React源码 Hooks

我们先初步了解下 hooks，使用 useState 和 useEffect。

/**
 * 必须要react和react-dom 16.7以上
 */
import React, { useState, useEffect } from 'react'
export default () => {
  const [name, setName] = useState('zhangsan')
  return (
    <>
      <p>My Name is: {name}</p>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
    </>
  )
}

这是一个非常非常简单的 demo , 首先要使用 hooks ，必须要react和react-dom 16.7以上。我们这里声明了一个 function component ， 在以前对比 class component , 他缺少的是什么，缺少的就是 this 对象。他没有 this 对象，就没有 this.state , 就不具有包含自己本身的状态的功能，第二个，他不能有生命周期方法，这是最明显的几个特点，在这里，我们使用了 hooks 来存储了state 

const [name, setName] = useState('zhangsan')

这边使用 useState， 然后传入一个默认值，然后他返回的是一个数组，这是一个数组的解构，大家应该都清楚，这个数组的第一项是我们 state 对应的变量，第二项是我们去改变这个 stage 的方法。这就是通过 useState 返回给我们的唯一的一个东西。然后我们就可以在我们渲染当中去使用这个 state 和修改这个 stage。比如这个 onChange 就是去修改这个 state。

 

这就是 hooks 给 function component 提供了 class component 所具有的能力。他的意义不仅仅是为了替代 class component ， 他的意义是为了帮助我们去拆分组件内部的一些逻辑。把他提取出来，能够给更多的组件进行复用。以前在 class component 里面是很难去拆分这部分逻辑的。

 

useEffect(() => {
    console.log('component update')

    return () => {
        console.log('unbind')
    }
}, [])

我们要使用生命周期方法，在组件渲染的时候，我们要去做一些操作的时候，我们可以使用 Hooks 中的 useEffect 。这个东西可以传入一个方法，在 hooks 里面没有着重的区分 mounted 和 updated 。useEffect 每次有内容更新的时候都会调用。如果我们在这个方法里面做了事件绑定，在第 n 次更新的时候要解除这个事件，怎么办呢，就是在 return 这个方法里面解除绑定。在这里会先执行 unbind 。再执行 component update 。这比较符合更新的逻辑，每次更新的时候都会把之前的状态消除，然后返回新的状态。

 

这里传入一个空的数组，就代表执行一次就 ok 了。这就是使用 hooks 模拟生命周期方法的一个用法。 我们在 React.js 里面找到 useState 源码

 

function resolveDispatcher() {
  const dispatcher = ReactCurrentOwner.currentDispatcher;
  invariant(
    dispatcher !== null,
    'Hooks can only be called inside the body of a function component.',
  );
  return dispatcher;
}

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

我们看到 useState 里面有个 dispatcher，这个 useState 的返回值是 dispatcher.useState 。这个 dispatcher 是调用了 resolveDispatcher(). 在方法 resolveDispatcher 里面看到这个 dispatcher 是通过  ReactCurrentOwner.currentDispatcher 获取的。这就是涉及后续渲染的时候才会去赋值这些东西。因为在 react 使用阶段是没有拿到任何节点。在 createElement 的时候传入的是对象，还没真正渲染，还没真正的创建这个实例。 ReactCurrentOwner 是个全局的类，

 

const ReactCurrentOwner = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Fiber),
  currentDispatcher: (null: null | Dispatcher),
};

这就是 ReactCurrentOwner 的源码，非常简单，就是一个全局的对象。里面有两个属性，一个是 current , 就是目前渲染的是哪个节点，这个实力。currentDispatcher 就是实力对应的 dispatcher。 useEffect 类似于 useState。