-将 useEffect 放在组件内部让我们可以在 effect 中直接访问count state 变量（或其他 props）;Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

useEffect 会在每次渲染后都执行吗？

它在第一次渲染之后和每次更新之后都会执行;React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

useEffect 是不是异步？

是异步；如果需要effect 同步的话，有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

useEffect 的优势？

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。

2.需要清除的 effect

useEffect 的设计是在同一个地方执行。如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它

useEffect(() => {
  // 渲染时执行 相当于clas组件的 componentDidMount componentDidUpdate 
  return () => {
    // 组件卸载时执行 相当于clas组件的
  };
}, []); // 注1 例：[count] 仅在count 更改时更新 componentWillUnmount

提示

如果使用注1这种优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量;
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。

Hook 规则

1.只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

2.只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。
在 React 的函数组件中调用 Hook
在自定义 Hook 中调用其他 Hook

自定义Hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性。

自定义 Hook 必须以 “use” 开头吗？

必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。

在两个组件中使用相同的 Hook 会共享 state 吗？

不会。 自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook时，其中的所有 state 和副作用都是完全隔离的。

自定义 Hook 如何获取独立的 state？

每次调用 Hook，它都会获取独立的 state；我们可以在一个组件中多次调用 useState 和 useEffect，它们是完全独立的。