什么是React Hook?

Hook 是一个特殊的函数，它可以让你”钩入”React state及生命周期等特性的函数。例如，useState是允许你在React函数组件中添加state的Hook。

使用React Hook的目的是什么？

使用Hook其中一个目的就是要解决class中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到几个不同方法中的问题。

什么时候会用React Hook？

如果你在编写函数组件并意识到需要向其添加一些state，以前的做法是必须将其它转化为class。现在你可以在现有的函数组件中使用Hook。

React Hook的规则是什么？

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

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

什么是Hook的副作用？

之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。

通过使用 Hook，你可以把组件内相关的副作用组织在一起（例如创建订阅及取消订阅），而不要把它们拆分到不同的生命周期函数里。
Effect Hook 可以让你在函数组件中执行副作用操作。
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect 会在每次渲染后都执行吗？
是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。
有的Hook是需要清理的（比如定时器），有的是不需要清理的的（比如数据获取）。需要清理的副作用，需要返回一个函数。

不需要清理的effect：

import React, { useState, useEffect } from ‘react‘;
   function Example() {
        const [count, setCount] = useState(0);
        useEffect(() => {
            document.title = `You clicked ${count} times`;
       });

   return (
        <div>
             <p>You clicked {count} times</p>
             <button onClick={() => setCount(count + 1)}>
                 Click me
            </button>
        </div>
   );
 }

需要清理的effect：

import React, { useState, useEffect } from ‘react‘;
    function FriendStatus(props) {
        const [isOnline, setIsOnline] = useState(null);
              useEffect(() => {
              function handleStatusChange(status) {
                    setIsOnline(status.isOnline);
              }
             ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
            // Specify how to clean up after this effect:
            return function cleanup() {
                   ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
            };
      }); 
     if (isOnline === null) {
        return ‘Loading...‘;
      }
     return isOnline ? ‘Online‘ : ‘Offline‘;
 }

effect性能优化：

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

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

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。

推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则。此规则会在添加错误依赖时发出警告并给出修复建议。

更多详细Hook API，详见：Hook API

React Hook解读

原文：https://www.cnblogs.com/Joannamo/p/14466453.html