React - Hook使用规则 - 《爬坑之路》

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。在未来甚至可以完全覆盖并替换class的写法。
注意：hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

import React, { useState } from 'react';
let isName = true;
function Example() {
  // 报错：React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render 
  // 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  const [count, setCount] = useState(0);
  if(isName){
    const [name, setName] = useState('名字');
    isName = false;
  }
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}