Hook标准千万不要在普通 JavaScript 函数中启用

什么叫Hook？

React Hook 是 React 16.8 版本号引进的一种新特性，它是一种用以函数公式部件中加入状况和生命周期方法。让开发人员在没有应用类部件的情形下，完成相近类元件的state、生命期作用，能够提供良好的代码复用、代码可读性。

官方网叙述

Hook标准

1. 千万不要在普通 JavaScript 函数中启用 Hook
2. 确保每一次3D渲染里都按同样顺序调用（千万不要在循环系统，标准或嵌套函数中启用 Hook）

官方网叙述

Hook运作全过程

1. 在函数公式部件中启用Hook函数公式时（例useState、useEffect等），React会到内部结构（Fiber的memoizedState上）维护保养一个Hook单链表
2. 当部件3D渲染时，React会依据Hook单链表顺序先后实行每一个Hook函数公式，并根据不同Hook目标来升级相对应的情况或实行相匹配的不良反应等
3. 当部件再次3D渲染时，React会重新依照同样的顺序执行每一个Hook函数公式，并把返回值与之前储存数值进行对比，假如有所变化，则开启相对应更新实际操作

基本形状

由于自己写的 useState 控制不了 React 的再次3D渲染，因此我根据再次运作 ReactDOM 的 render 来模拟 React 的再次3D渲染。

import React from "react";
import ReactDOM from "react-dom";

let memorizedValue;

const useState = (initValue) => {
  memorizedValue = memorizedValue || initValue;

  const setState = (newValue) => {
    memorizedValue = newValue;

    render();
  };

  return [memorizedValue, setState];
};

const App = () => {
  const [number, setNumber] = useState(0);

  return (
    <>
      <p>number: {number}</p>
      <button onClick={() => setNumber(number   1)}>add</button>
    </>
  );
};

function render() {
  ReactDOM.render(<App />, document.querySelector("#root"));
}

render();

适用好几个setState

以上简易 useState 虽然能正常运转，但不能设定好几个 useState，所以我在以上代码基础上，加了 states 和 index 来控制好几个 useState 的现象（在 React Hook源代码中要用单链表操纵）。

import React from "react";
import ReactDOM from "react-dom";

const states = [];

let index = 0;

const useState = (initValue) => {
  const currentIndex = index;

  states[currentIndex] = states[currentIndex] || initValue;

  const setState = (newValue) => {
    states[currentIndex] = newValue;

    render();
  };

  index  ;

  return [states[currentIndex], setState];
};

const App = () => {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);

  return (
    <>
      <p>number1: {number1}</p>
      <p>number2: {number2}</p>
      <button onClick={() => setNumber1(number1   1)}>add</button>
      <button onClick={() => setNumber2(number2   1)}>add</button>
    </>
  );
};

function render() {
  ReactDOM.render(<App />, document.querySelector("#root"));
  index = 0;
}

render();

汇总

通过以上事例大家可以得出，在界定、3D渲染、再次3D渲染都与Hook的启用次序相关，所以无法适用范围、循环系统去启用Hook，所以这些启用方法都可能会更改Hook的启用次序，因此React才能界定 “确保每一次3D渲染里都按同样顺序调用” 这一标准。

参考文献

legacy.reactjs.org/docs/hooks-…

medium.com/@ryardley/r…