为什么顺序调用对React Hook很重要

2021-07-24 本文已影响0人左冬的博客

原文地址：Why Do React Hooks Rely on Call Order? - Dan Abramov

Hooks 重渲染时是依赖于固定顺序调用的

Hook 规则

请不要在循环、条件或者嵌套函数中调用 Hooks

都有在 React 函数中才去调用 Hooks

React提供了一个 linter 插件来强制执行这些规则

只在最顶层使用Hook

不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们

这条规则是为了确保Hook在每次渲染中都按照同样的顺序被调用，这让React能够在多次的useState和useEffect调用之间保持hook状态正确

为什么一定要强调Hook按照顺序调用

通常函数组件会有多个state，让我们通过一个例子来理解useState可能是如何工作的

// 和useState一样，myUseState接收一个初始值，返回state和setState方法
const myUseState = initialValue => {
    let state = initialValue
    const setState = newValue => {
        state = newValue
        // 重新渲染
        render()
    }
    return [state, setState]
}

const render = () => {
    ReactDOM.render(<App />, document.getElementById('app'))
}

function App() {
    const [n, setN] = myUseState(0)
    ...
    return (
        <div>
            <p>{n}</p>
            <button onClick={() => setN(n + 1)}>
                +1
            </button>
        </div>
    );
}

点击button，n没有任何变化
原来每次state都变成了初始值0，因为myUseState会将state重置

我们需要一个不会被myUseState重置的变量，那么这个变量只要声明在myUseState外面即可

let _state;
const myUseState = initialValue => {
    // 如果state是undefined，则赋给初始值，否则就赋值为保存在外面的_state
    _state = _state === undefined ? initialValue : _state;
    const setState = newValue => {
        _state = newValue;
        render();
    };
    return [_state, setState];
};

还有问题，如果一个组件有俩state咋整？由于所有数据都放在_state，产生冲突：

function App() {
    const [n, setN] = myUseState(0)
    const [m, setM] = myUseState(0)
    ...
}

解决：

把_state做成对象（注意后面会对此种方案进行详细讨论）
- 不可行，没有key，useState(0)只传入了一个参数0，并不知道是n还是m
把_state做成数组
- 可行，_state = [0, 0]

let _state = [];
// 同样需要把index声明在myUseState外面，用来记录调用顺序
let index = 0;
const myUseState = (initialValue) => {
    const currentIndex = index;
    // 对应调用顺序下的state有值吗？
    _state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex];
    const setState = (newValue) => {
        // 设置对应顺序的state
        _state[currentIndex] = newValue;
        render();
    };
    // 下一个state的位置，使index加一位
    index += 1;
    return [_state[currentIndex], setState];
};

const render = () => {
    // 重新渲染要重置index
    // 注意触发setter才会re-render
    index = 0;
    ReactDOM.render(<App />, document.getElementById('app'));
};

显而易见的，因为数组根据调用顺序存储值，每一个下标会对应其相应的state，所以useState调用顺序必须一致！
re-render时会从第一行代码开始重新执行整个组件，所以调用顺序依然是一致的

(需要注意的是，这部分内容只是API的一种可能实现方法，真实useState使用链表存储，为了大家更好地的理解它此处使用数组替代)

带着刚刚的思考再次回顾，举个🌰：

function RenderFunctionComponent() {
  const [firstName, setFirstName] = useState("Rudi");
  const [lastName, setLastName] = useState("Yardley");

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

初始化
创建两个空数组“state”与“setters”，设置指针“cursor”为 0

初始化
首次渲染
每当useState()被调用时，如果它是首次渲染，它会通过push将一个setter方法（绑定了指针“cursor”位置）放进“setters”数组中，同时，也会将另一个对应的状态放进“state”数组中去
首次渲染
后续渲染re-render
每次的后续渲染都会重置指针“cursor”的位置（index=0），并会从每个数组中读取对应的值（之前讲了数据的存储是独立于组件之外的）

后续渲染
处理事件
每个setter都会有一个对应的指针位置的引用，因此当触发任何setter调用的时候都会触发去改变状态数组中的对应的值
处理事件

看到这里，想必大家对Hook的调用顺序有了更深的印象了，那么让我们做一些React团队禁止去做的事情，比如在条件语句中使用Hook

let firstRender = true;

function RenderFunctionComponent() {
  let initName;
  
  if(firstRender){
    [initName] = useState("Rudi");
    firstRender = false;
  }
  const [firstName, setFirstName] = useState(initName);
  const [lastName, setLastName] = useState("Yardley");

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

我们在条件语句中调用了useState函数，让我们看看它对整个系统造成的破坏

糟糕组件的首次渲染
到此为止，我们的变量firstName与lastName依旧包含了正确的数据，让我们继续去看一下第二次渲染会发生什么事情

糟糕的第二次渲染
现在firstName与lastName这两个变量全部被设置为“Rudi”（该位置读取到的是Rudi），与我们实际的存储状态不符

这个例子的用法显然是不正确的，但是它让我们知道了为什么我们必须使用React团队规定的规则去使用Hooks

当然了，多亏了React提供了linter插件帮我们强制执行了这条规则，在代码编译过程中会报个错 React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. React团队yyds！orz!

所以你现在应该清楚为什么你不应该在条件语句或者循环语句中使用 Hooks 了吗？

因为我们维护了一个指针“cursor”指向一个数组，如果你改变了 render 函数内部的调用顺序，那么这个指针“cursor”将不会匹配到正确的数据，你的调用也将不会指向正确的数据或句柄

希望通过上面的两个例子，为大家建立了一个关于 Hooks 的更加清晰的思维模型

另外，Dan也提到了几个经常有人提出的修改Hooks的方案，并对其缺陷进行了详细阐述以佐证Hooks的设计是yyds！接着往下看

缺陷1：无法提取custom hook

有个替代方案是限制一个组件调用多次 useState()，你可以把 state 放在一个对象里，这样还可以兼容 class 不是更好吗？

function Form() {
  const [state, setState] = useState({
    name: 'Mary',
    surname: 'Poppins',
    width: window.innerWidth,
  });
  // ...
}

Hooks 是允许这种风格写的，你不必将 state 拆分成一堆 state 变量

但是useState的关键在于你可以从组件中提取出部分有状态的逻辑（state + effect）到 custom hooks 中

function Form() {
  // 在组件内直接定义一些 state 变量
  const [name, setName] = useState('Mary');
  const [surname, setSurname] = useState('Poppins');

  // 我们将部分 state 和 effects 移至 custom hook
  const width = useWindowWidth();
  // ...
}

function useWindowWidth() {
  // 在 custom hook 内定义一些 state 变量
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    // ...
  });
  return width;
}

上面代码，可以将部分state（width）提取到自定义组件（useWindowWidth）中，如果你只允许每个组件调用一次useState()，你将失去用custom hook引入state能力，这就是custom hooks的关键

缺陷2：命名冲突

一个常见的建议是让组件内 useState() 接收一个唯一标识 key 参数（string 等）区分 state 变量

看起来大致是这样：

function Form() {
  // 我们传几种 state key 给 useState()
  const [name, setName] = useState('name');
  const [surname, setSurname] = useState('surname');
  const [width, setWidth] = useState('width');
  // ...

这试图摆脱依赖顺序调用（显示 key），但引入了另外一个问题 —— 命名冲突

而且，你可能无法在同一个组件调用两次useState('name')，比方说每当你在custom hook里添加一个新的state变量时，就有可能破坏使用它的任何组件（直接或者间接），因为可能已经有同名的变量位于组件内

而通过一开始讲到的Hooks提案，通过依赖顺序调用来解决这个问题：即使两个 Hooks都用name变量，它们也会彼此隔离，每次调用useState()都会获得独立的「内存单元」

缺陷3：同一个 Hook 无法调用两次

给 useState 「加key」的另一种衍生提案是使用像 Symbol 这样的东西，这样就不冲突了对吧？

const nameKey = Symbol();
const surnameKey = Symbol();
const widthKey = Symbol();

function Form() {
  // 我们传几种state key给useState()
  const [name, setName] = useState(nameKey);
  const [surname, setSurname] = useState(surnameKey);
  const [width, setWidth] = useState(widthKey);
  // ...

这个提案看起来好像有利于提取state到custom hook当中

function Form() {
  // ...
  const width = useWindowWidth();
  // ...
}

/*********************
 * useWindowWidth.js *
 ********************/
const widthKey = Symbol();
 
function useWindowWidth() {
  const [width, setWidth] = useState(widthKey);
  // ...
  return width;
}

但是如果多次调用，例如：

function Form() {
  // ...
  const name = useFormInput();
  const surname = useFormInput();
  // ...
  return (
    <>
      <input {...name} />
      <input {...surname} />
      {/* ... */}
    </>    
  )
}

/*******************
 * useFormInput.js *
 ******************/
const valueKey = Symbol();
 
function useFormInput() {
  const [value, setValue] = useState(valueKey);
  return {
    value,
    onChange(e) {
      setValue(e.target.value);
    },
  };
}

我们调用 useFormInput() 两次，但 useFormInput() 总是用同一个 key 调用 useState()，就像这样：

const [name, setName] = useState(valueKey);
const [surname, setSurname] = useState(valueKey);

又又又又发生了冲突:)
而Hooks提案没有这种问题，因为每次调用useState()会获得单独的state（状态不与其他组件共享）。且依赖于固定顺序调用使我们免于担心命名冲突

缺陷4：钻石问题(多层继承问题)

比如useWindowWidth()和useNetworkStatus()这两个custom hooks可能要用像 useSubscription() 这样的 custom hook，如下：

function StatusMessage() {
  const width = useWindowWidth();
  const isOnline = useNetworkStatus();
  return (
    <>
      <p>Window width is {width}</p>
      <p>You are {isOnline ? 'online' : 'offline'}</p>
    </>
  );
}

function useSubscription(subscribe, unsubscribe, getValue) {
  const [state, setState] = useState(getValue());
  useEffect(() => {
    const handleChange = () => setState(getValue());
    subscribe(handleChange);
    return () => unsubscribe(handleChange);
  });
  return state;
}

function useWindowWidth() {
  const width = useSubscription(
    handler => window.addEventListener('resize', handler),
    handler => window.removeEventListener('resize', handler),
    () => window.innerWidth
  );
  return width;
}

function useNetworkStatus() {
  const isOnline = useSubscription(
    handler => {
      window.addEventListener('online', handler);
      window.addEventListener('offline', handler);
    },
    handler => {
      window.removeEventListener('online', handler);
      window.removeEventListener('offline', handler);
    },
    () => navigator.onLine
  );
  return isOnline;
}

嵌套+嵌套+嵌套 = 💎

       / useWindowWidth()   \                   / useState()  🔴 Clash
Status                        useSubscription() 
       \ useNetworkStatus() /                   \ useEffect() 🔴 Clash

而固定顺序调用的话

                                                / useState()  ✅ #1. State
       / useWindowWidth()   -> useSubscription()                    
      /                                          \ useEffect() ✅ #2. Effect
Status                         
      \                                          / useState()  ✅ #3. State
       \ useNetworkStatus() -> useSubscription()
                                                 \ useEffect() ✅ #4. Effect

缺陷5：复制粘贴的主意被打乱

或许我们可以通过引入某种命名空间来挽救给 state 加「key」提议，有几种不同的方法可以做到这一点

一种方法是使用闭包隔离 state 的 key，这需要你在「实例化」 custom hooks时给每个 hook 裹上一层 function：

/*******************
 * useFormInput.js *
 ******************/
function createUseFormInput() {
  // 每次实例化都唯一
  const valueKey = Symbol();  

  return function useFormInput() {
    const [value, setValue] = useState(valueKey);
    return {
      value,
      onChange(e) {
        setValue(e.target.value);
      },
    };
  }
}

可是要知道上面实例代码只是一个input组件，但是可以看到，它的代码已经很重了，真实的React App由多个类按照层级，一层层构成，复杂度成倍增长，嵌套地狱。

而Hooks 的设计目标之一就是避免使用高阶组件和render props的深层嵌套函数

而且不得不操作两次才能使组件用上custom hook

// 我们不得不在使用任何custom hook时进实例化
const useNameFormInput = createUseFormInput();
const useSurnameFormInput = createUseFormInput();

function Form() {
  // ...
  // 还有一次是最终的调用
  const name = useNameFormInput();
  const surname = useNameFormInput();
  // ...
}

这意味着即使一个很小的改动，你也得在顶层声明和render函数间来回跳转

你还需要非常精确的命名，总是需要考虑「两层」命名 —— 像 createUseFormInput 这样的工厂函数和 useNameFormInput、useSurnameFormInput这样的实例 Hooks

参考资料：
Why Do React Hooks Rely on Call Order?
(译)React hooks：它不是一种魔法，只是一个数组——使用图表揭秘提案规则
 Rules of Hooks
RFC: React Hooks