Hook使用规则

Hook 使用规则

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。在未来甚至可以完全覆盖并替换 class 的写法。

注意： hook 只能使用在函数组件中， class 组件不支持，所有 hook 默认约定名称用 use 开头

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

1. 只能在函数最外层调用 Hook 。不要在循环、条件判断或者子函数中调用。

2. 只能在 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 (
    
      You clicked {count} times
      
    
  );
}