ReactHooks —— 自定义Hook篇

什么是React Hooks？

• React hooks是一种特殊的内置函数，允许我们“hook”到React内部 :

  • 从Fiber tree中创建和访问state
  • 在Fiber tree中注册副作用
  • 手动获取DOM元素
  • ...

• 总是以“use”开头（例如useState、useEffect）

• 支持非可视化逻辑的轻松重用：我们可以将多个hook组合成我们自己的自定义hook

• 为函数组件提供在不同生命周期点拥有状态和运行副作用的能力(v16.8之前仅在类组件中可用)

可以说正是React hooks的出现，使得函数式组件成为React开发的主流

Hooks的规则

1. 只能在顶层调用hooks

   • 不要在条件语句、循环语句、嵌套函数或return之后调用hooks
   • 这是必要的，以确保hooks总是以相同的顺序调用。

2. 只从React函数中调用hooks

   • hooks只能在函数式组件和自定义hooks中调用

Hooks依赖于调用顺序

hooks需要在每次渲染中以相同的顺序调用

在Fiber这个工作单元中，会将hooks以链表的形式存储起来依次调用，如下图，我们使用判断语句去使用useState，第一次渲染时执行了const [B,setB] = useState('')并存储在Fiber中，但当更改了B的值为7，第二次渲染时不执行const [B,setB] = useState('')，此时存储hooks的链表就断裂了，无法执行后续的useEffect

自定义Hook

自定义hook可以让我们在多个组件中重用非可视化逻辑

一个自定义钩子应该有一个目的，使其可重用和可移植(即使跨多个项目)

hooks的规则也适用于自定义hooks

When

How

案例

实现一个使用localStorage存取数据的自定义hook

import { useState, useEffect } from "react";
export function useLocalStorageState(initialState, key) {
  const [value, setValue] = useState(function () {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialState;
  });
  useEffect(
    function () {
      localStorage.setItem(key, JSON.stringify(value));
    },
    [value, key]
  );
  return [value, setValue];
}