React Hook

[sfsoul]

Hook 简介

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

Hook 产生的动机

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

使用 Effect Hook

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate和componentWillUnmount 这三个函数的组合。

需要清除的 effect

如果 effect 返回一个函数，React 将会在执行 清除操作时调用它。

• 为什么要在 effect 中返回一个函数？： 这是 effect 可选的清除机制，每个 effect 都可以返回一个清除函数。
• React 何时清除 effect？： React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。

按时间列出一个可能会产生的订阅和取消订阅操作调用序列：

// Mount with { friend: { id: 100 } } props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange);     // 运行第一个 effect

// Update with { friend: { id: 200 } } props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange);     // 运行下一个 effect

// Update with { friend: { id: 300 } } props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange);     // 运行下一个 effect

// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect

[sfsoul]

Hook 使用规则

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook，确保总是在 React 函数的最顶层调用它们。

 // error：在条件语句中使用 Hook 违反第一条规则
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

// correct
useEffect(function persistForm() {
    // 👍 将条件判断放置在 effect 中
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook，可以：

• 在 React 的函数组件中调用 Hook
• 在自定义 Hook 中调用其他 Hook

[sfsoul]

自定义 Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

• 自定义 Hook 必须以 “use” 开头
• 在两个组件中使用相同的 Hook 不会共享 state。自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。

[sfsoul]

Hooks FAQ

Hooks FAQ