react 与 react hook生命周期对照

以下是React中class组件生命周期和function组件中对应的Hook的对照表：

| Class组件生命周期 | 对应的Hook |
| --- | --- |
| constructor(props) | useState(initialState) |
| componentWillMount() | 无对应Hook |
| render() | useState()、use()、useContext() |
| componentDidMount() | useEffect(callback, []) |
| shouldComponentUpdate(nextProps, nextState) | useMemo()、React.memo() |
| componentWillUpdate(nextProps, nextState) | 无对应Hook |
| componentDidUpdate(prevProps, prevState) | useEffect(callback) |
| componentWillUnmount() | useEffect(() => { return () => {} }) |

需要注意的是，由于Hook是在函数组件中使用的，所以没有像class组件中的constructor和componentWillMount这样的生命周期函数。另外，由于Hook是基于函数的，所以它们的执行顺序是固定的，而class组件的生命周期函数的执行顺序是不固定的。

相关问题

react hooks 的常用 hook

React Hooks 是 React 16.8 的新增特性，它使得我们可以在函数组件中使用状态（state）、生命周期钩子（lifecycle hook）等之前只能在 Class 组件中使用的特性。常用的 React Hooks 包括：

1. useState: useState 是最基础的 Hook 之一，它可以用来在函数组件中添加状态。useState 返回一个数组，其中第一个元素是当前状态的值，第二个元素是改变状态的函数。

2. useEffect: useEffect 是另一个常用的 Hook，它可以让我们在函数组件中使用类似 componentDidMount、componentDidUpdate 和 componentWillUnmount 这些生命周期钩子。useEffect 接收一个函数作为参数，该函数会在组件挂载、更新或卸载时执行。

3. useContext: useContext 可以用来在函数组件中使用 Context 上下文。它接收一个 Context 对象作为参数，并返回该 Context 的当前值。

4. useMemo: useMemo 可以用来缓存计算结果，避免重复计算。它接收一个计算函数和依赖项数组作为参数，只有当依赖项数组发生变化时才会重新计算。

5. useCallback: useCallback 用来缓存函数，避免重复创建。它接收一个函数和依赖项数组作为参数，并返回一个缓存后的函数。

react中class和hook的区别

React中的Class和Hook是两种不同的组件写法方式。Class是一种传统的React组件写法，需要继承React.Component类，并且需要定义render方法来进行渲染。而Hook则是React16.8版本后新增的一种组件写法方式，它可以在不编写类的情况下使用状态和其他React功能。

Class组件适用于更复杂的场景，如组件之间有复杂的生命周期和状态管理需要，而Hook则适用于更简单的场景，如一些简单的UI组件等。同时，Hook也提供了更好的可复用性和抽象性，帮助我们更好地组织React代码。