React重点内容Hook

1、useState 就是一个 Hook，useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。

eg:声明一个叫 “count” 的 state 变量。

  const [count, setCount] = useState(0);
 

2、useState() 方法里面唯一的参数就是初始 state

3、默认情况下，React 会在每次渲染后调用副作用函数useEffect —— 包括第一次渲染的时候。

4、useEffect：它能在函数组件中执行副作用，并且它与 class 中的生命周期函数极为类似。

5、如果 effect 返回一个函数，React 将会在执行清除操作时调用它，相当于class中的componentWillUnmount周期函数

6、如果某些特定值在两次重渲染之间没有发生变化，可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

7、Hook规则（可ESLint 插件强制执行以下两规则）：

（1）只在最顶层使用 Hook：不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。

（2）只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook。

8、自定义Hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。适用于两个函数想共享逻辑的情况

useReducer：useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

const [state, dispatch] = useReducer(reducer, initialArg, init);