React Hook解读

时间 2021-03-02

标签 html react 数组性能优化函数性能优化 this eslint code 栏目 React 繁體版

原文原文链接

什么是React Hook?

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

使用React Hook的目的是什么？

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

何时会用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：this

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 的第二个可选参数便可：eslint

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

若是想执行只运行一次的 effect（仅在组件挂载和卸载时执行），能够传递一个空数组（[]）做为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，因此它永远都不须要重复执行。这并不属于特殊状况 —— 它依然遵循依赖数组的工做方式。code

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

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