reactjs - React 如何实现它的钩子(Hook)(高层次)

Question

这个问题已经有答案了:

How do react hooks determine the component that they are for? (1 个回答)

已关闭 4 年前。

假设你有这样的东西:

const MyComponent = (props) => {
  const refA = React.useRef()
  const refB = React.useRef()
  const refC = React.useRef()
  const [x, setX] = React.useState(true)
  const [y, setY] = React.useState([])

  return <div>...</div>
}

在伪代码中，当它被多次调用时，它实际上在做什么？他们基本上是这样做的吗？

• 知道MyComponent即将从函数转换为虚拟树。
• 设置一个全局变量，该变量将在每个 useX 时进行跟踪钩子(Hook)在单个过程框架内调用。
• 为此组件实例存储每个钩子(Hook)调用的输出。
• 下次为该组件 ID 调用钩子(Hook)时，它会从最后一个 useX 获取最后返回结果的映射。 从此组件内调用。

我问这个问题是因为(a)似乎只能通过某种全局变量技巧来完成，以及(b)相应的 code相当复杂且难以解析。

想知道是否可以提供一个快速的高级概述或一些关于 React 如何实现这些神奇钩子(Hook)的伪代码。

看起来就像这样，尽管更高级:

let dispatcher = {}

function MyComponent() {

}

function begin() {
  dispatcher.component = {
    refs: [],
    states: []
  }
}

function useRef() {
  let ref = {}
  dispatcher.component.refs.push(ref)
  return ref
}

function useState(val) {
  let state = val
  dispatcher.component.states.push(val)
  return state
}

function end() {
  dispatcher.component = null
}

我只是不明白它如何用这种魔法来内存等等。

这与了解钩子(Hook)如何知道它们用于哪个组件的问题不同。这只是我的问题的一方面，我一般是问钩子(Hook)是如何工作的。

Answer 1

关于如何实现钩子(Hook)的问题对于解释每个钩子(Hook)来说非常广泛，让我们以 useRef 和 useState 为例。

虽然 useRef(initialValue) 只是一个带有 current 键的对象，但可能的实现:

const myRef = useRef('myReference');
const useRef = (initialValue) => ({ current: initialValue });

Hooks are just arrays ，该数组引用状态 - 它不与其他组件共享，但它维护在特定组件的后续渲染可访问的范围内。

在每次setter函数调用时，我们可以使用游标来定义需要使用哪种状态。

useState 的可能实现:

const state = [];
const setters = [];
let firstRun = true;
let cursor = 0;

function createSetter(cursor) {
  return function setterWithCursor(newVal) {
    state[cursor] = newVal;
  };
}

// This is the pseudocode for the useState helper
export function useState(initVal) {
  if (firstRun) {
    state.push(initVal);
    setters.push(createSetter(cursor));
    firstRun = false;
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}

// Our component code that uses hooks
function RenderFunctionComponent() {
  const [firstName, setFirstName] = useState("Rudi"); // cursor: 0
  const [lastName, setLastName] = useState("Yardley"); // cursor: 1

  return (
    <div>
      <Button onClick={() => setFirstName("Richard")}>Richard</Button>
      <Button onClick={() => setFirstName("Fred")}>Fred</Button>
    </div>
  );
}

// This is sort of simulating Reacts rendering cycle
function MyComponent() {
  cursor = 0; // resetting the cursor
  return <RenderFunctionComponent />; // render
}

console.log(state); // Pre-render: []
MyComponent();
console.log(state); // First-render: ['Rudi', 'Yardley']
MyComponent();
console.log(state); // Subsequent-render: ['Rudi', 'Yardley']

// click the 'Fred' button

console.log(state); // After-click: ['Fred', 'Yardley']