React Hooks

[yangtao2o]

什么是 Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

动机：

• 在组件之间复用状态逻辑很难
• 复杂组件变得难以理解
• 难以理解的 class

React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

常用钩子：

• useState() 状态钩子
• useContext() 共享钩子
• useReducer() action 钩子
• useEffect() 副作用钩子

// 引入 React 中的 useState, useEffect Hook。
// 它让我们在函数组件中存储内部 state。
import React, { useState, useEffect } from "react";

function Counter() {
  // 调用 useState Hook 声明了一个新的 state 变量。
  // 它返回一对值给到我们命名的变量上。
  // [count, setCount] 使用的数组解构
  const [count, setCount] = useState(0);
  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

export default Counter;

对比 Class Component 中将组件状态放在 state 属性中维持的做法，React Hook 使用 useState 方法来在 Function Component 中创建状态变量、创建改变状态的方法、传入初始状态。这样就实现了一个拥有自己的状态的 Function Component。显而易见，无论是简洁程度还是优雅程度，Function Component 都要远远优于 Class Component。

useEffect是用来处理组件状态变化引起的副作用的，而副作用的含义是：和真实世界进行交互的作用，都是副作用，包括页面跳转、Ajax 请求、DOM 操作等等。

在传统的 Class Component 中，副作用是在 componentDidMount 和 componentDidUpdate 两个生命周期中结合处理的。因为初次渲染，并不会执行 componentDidUpdate，而更新的时候，又需要通过 componentDidUpdate 更新。

在 useEffect 结合了这两个生命周期，其含义是：无论组件状态是第 1 次更新还是第 n 次更新，其中的回调函数都会被调用。

React 何时清除 effect？React 会在组件卸载的时候执行清除操作。

由于添加和删除订阅的代码的紧密性，所以 useEffect 的设计是在同一个地方执行。如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它：

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);
  };
});

学习资料：

• Hook 简介 - 官方文档讲解的非常详细，也非常易于理解
• React Hooks 入门教程 - 阮一峰