React Hook学习

fengchunqi 2022/10/29 React

# 什么是Hook

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

Hook写法：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class写法：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Hook和class的比较

Hooks组件更加简洁。
Hooks业务代码更加聚合，逻辑更加紧凑。
class组件组件的复用通常使用render props和高阶组件（HOC）两种方式，而Hooks组件可以通过自定义Hook的方式进行组件复用。
Hooks组件可以免去class组件中对this的处理。

# Hook出现的意义

函数组件中不能拥有自己的状态（state）。在Hooks之前函数组件是无状态的，都是通过props来获取父组件的状态，但是Hooks提供了useState来维护函数组件内部的状态。
函数组件中不能监听组件的生命周期。useEffect聚合了多个生命周期函数。
class组件逻辑难以复用（render props，HOC）。

React需要为共享状态逻辑提供更好的原生途径。
减少了对this的处理操作。

# Hook API

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

# 使用规则

只在最顶层使用Hook

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

参考链接

npm模块安装机制 useState源码学习

frenchleave

Choose mode

React Hook学习

React Hook学习

# 什么是Hook

# Hook和class的比较

# Hook出现的意义

# Hook API

# 使用规则