Hook学习记录

为了加深印象，并方便以后再看，写此文章用作记录，内容参照react官网

Hook的引入

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

Hook的注意事项

hook可以多条使用，根据书写顺序进行调用，遵循两个规则

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。遵循此规则，确保组件的状态逻辑在代码中清晰可见。

为什么hook只能在最顶层使用？这是hook内部的调用问题，为了保证hook的调用顺序不会改变

useState第一次调用会创建对应的变量为state，下次渲染的时候，就会读取第一次创建的变量，如果你把hook写在一个if判断里，如果判断不调用的话，React 调用顺序不会因为缺少hook函数而变化，这样React 不知道这次调用是什么情况，就会使用上次渲染的结果，从这里开始，后面的 Hook 调用都被提前执行，导致 bug 的产生。详情参考官网的hook规则

这也是为什么useState不叫createState，因为他更多的是使用，而不是创建

State Hook

声明

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);

读取

  <p>You clicked {count} times</p>

修改

  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

修改（函数式修改）

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

【注】修改时传入函数，函数的参数，是上一次state的值

为什么声明的时候要使用方括号？方括号有什么用？

这种 JavaScript 语法叫数组解构。它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit 是返回的第二个值。它等价于下面的代码：

  var fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
  var fruit = fruitStateVariable[0]; // 数组里的第一个值
  var setFruit = fruitStateVariable[1]; // 数组里的第二个值

当我们使用 useState定义 state 变量时候，它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数。使用 [0] 和 [1] 来访问有点令人困惑，因为它们有特定的含义。这就是我们使用数组解构的原因。

Effect Hook

提示
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    return () => {
       document.title = `还原标题`;
      }
  });
}

这个effect，在创建时会修改标题，并且在每次渲染时更新标题，如果effect返回了一个函数，那么在组件被卸载之前，会调用这个函数，一般用来清除一些不用的东西，优化性能、防止bug。

性能优化

说到性能优化，除了上述的方法，hook还有一些性能优化的方法

通过跳过 Effect 进行性能优化

在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。

这是很常见的需求，所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：

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

这样写，这个hook函数只会在count变更的时候才执行，而不再是每次渲染都执行

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []); // 仅在初次刷新时会执行

传入第二个参数为[]，可以执行一些只需要一次的函数，例如初始化请求数据

Hook API

Hook API(简书)
（待补充）