React source Hooks

Let preliminary understanding under the hooks, and the use of useState useEffect.

/**
 * Must react and react-dom 16.7 above
 */
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)} />
    </>
  )
}

This is a very, very simple demo, the first to use hooks, you must react and react-dom 16.7 above. Here we declare a function component, in contrast to previous class component, what he lacks is missing is this object. He did not this subject, there is no this.state, not the state itself has a function that contains a second, he can not have a life-cycle approach, which is the most obvious of several features, where we use hooks to stores the state 

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

Here use useState, then passing a default, and then he returns an array, which is an array of deconstruction, we should all know, this is our first array of state variables corresponding to the second term is that we this stage to change the method. This is returned to us only by one thing useState. Then we will be able to use this state and modify the stage in which we render. OnChange such as this is to change this state.

 

That's hooks to the function component provides a class component has the ability. His significance not only to replace class component, his meaning is to help us to split some of the logic of the internal components. He extracted, can be multiplexed to more components. Previously class component which is difficult to split part of this logic.

 

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

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

We want to use the life-cycle approach, the component rendering, we want to do some operation, we can use Hooks in useEffect. This thing can pass a method, there is no focus on the distinction between hooks mounted and updated. useEffect updates every time there is going to be called. If we do inside this event binding method, when the n-th updated to remove this event, how to do it, this is the method in which return unbind. Here will be executed first unbind. Then perform component update. This is more logical update, each update is going to be put before the condition is removed, and then return to the new state.

 

Here passed an empty array, once on behalf of the Executive ok. This usage is to use a life-cycle approach hooks simulation. We find useState source inside the React.js

 

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);
}

We see useState inside a dispatcher, the return value is useState dispatcher.useState. The dispatcher is called resolveDispatcher (). In the method resolveDispatcher see inside this dispatcher is obtained by ReactCurrentOwner.currentDispatcher. This is the follow-up when it comes to rendering will assign these things. Because react using the stage did not get any node. When createElement incoming object, not really rendering, not really created this instance. ReactCurrentOwner is a global class,

 

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

This is ReactCurrentOwner source code, very simple, is a global object. There are two properties, one is current, which is the current rendering nodes, the strength. currentDispatcher is the strength corresponding to the dispatcher. useEffect similar useState.