React Hooks - 学习笔记

React Hooks

Hook 是能让你在函数组件中“钩入” React 特性的函数。

State Hook

• useState 不能存在于条件判断语句中，是按照顺序记忆的
• Hook 在 class 内部是不起作用的，但是可以使用 hook 取代 class
• 在函数组件中，没有 this，所以不能分配和读取 this.state，直接调用 useState Hook

  import React, { useState } from 'react';
  function example() {
    // 声明一个叫做 count 的 state 变量
    // React 在重新渲染的时候会记住 count 当前的值，并提供最新的值给我们的函数
    // 通过调用 setCount 来更新当前的 count
    const [count, setCount] = useState('apple');
  
    // 在函数中，直接用 count 读取 count 的值，而不是通过 this.state.count 的方式。 
    return (
      <p>want an {count}</p>
    )
  }
  

• 定义 state 变量的时候，等号左边的名字并不是 React API 的部分，可以自己取名字。这种 JS 语法叫做数组解构。它意味着我们同时创建了 count 和 setCount 两个变量, count 的值为 useState 返回的第一个值, setCount 是返回的第二个值。它等价于下面代码：

  var fruitStateVariable = useState(0)
  var count = fruitStateVariable[0]
  var setCount = fruitStateVariable[1]
  

• 使用 hook 存储多个不同的变量，就需要调用 useState() 多次。可以同时给不同的 state 变量去不同的名称，并且可以单独更新它们。

  function ExampleWithManyStates() {
  // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
  

  function handleOrangeClick() {
    // 和 this.setState({ fruit: 'orange' }) 类似
    setFruit('orange');
  }
  

Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作

• Effect Hook 可以看做是 componentDidMount, componentDidUpdate, componentWillMount 这三个 React class 生命周期函数的组合
• React 组件中有两种副作用操作：需要清除的和不需要清除的。
• React 会保存我们传递的 effect 函数，并且在执行首次 DOM 渲染 (componentDidMount)和每次更新导致的重新渲染 (componentDidUpdate)都会调用它。
• 传递给 useEffect 的函数在每次渲染中都会有所不同，因为每次重新渲染，都会给你新的 effect，替换掉之前的。
• 使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这会让应用看起来更快。而之前的 componentDidMount 或 componentDidUpdate 则是同步执行的

React 的清除机制

• 在 class 中，通常会在 componentDidMount 中设置订阅，并在 componentDidWillUnmount 中清除它
• effect 中返回一个函数，是 effect 可选的清除机制，每个 effect 都可以返回一个清除函数。React 会在组件卸载的时候执行清除操作。

useEffect(() => {
  document.title = `You clicked ${count} times`
}, [count]); // 只有当 count 的值发生改变时，才会重新执行 `document.title` 这一句

这里有一点需要重视，componentWillUnmount 只会在组件被销毁前执行一次，而 useEffect 里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。
useEffect 接受第二个数组类型的参数，仅有在数组中变量发生改变时，才会重新订阅。如果想执行只运行一次的 effect, 也就是说仅在组件挂载（componentDidMount）和卸载（componentWillUnmount时执行），可以传递一个空数组（[]）作为第二个参数。不过这种用法可能带来 bug，少用。

其他的 Effect Hooks

除了上文介绍的 useState 和 useEffect，react 还给我们提供了很多有用的 Hooks：
useContext useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect

Hook 规则

• 只在最顶层使用 Hook，不要在循环、条件或嵌套函数中调用 Hook。这样就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。
• 只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook。

自定义 Effect Hooks

将复用的逻辑抽离出来，哪个组件要用，就在哪个组件里面使用

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