17、React开发：Hooks、导入方式与代码分割优化

React开发：Hooks、导入方式与代码分割优化

1. React Hooks概述

1.1 useContext Hook

useContext 从 React.createContext 中获取上下文，并返回该上下文的当前值。它与 React Context API 配合使用，可在整个应用中共享数据，而无需逐层传递 props。需要注意的是，传递给 useContext 的参数必须是上下文对象本身，并且当上下文值发生变化时，调用 useContext 的任何组件都会重新渲染。

1.2 useReducer Hook

useReducer 是 setState 的替代方案，尤其适用于处理复杂的状态逻辑，涉及多个子值或下一个状态依赖于前一个状态的情况。它接受一个 reducer 函数和一个初始状态作为输入，并使用数组解构返回当前状态和一个 dispatch 函数。 useReducer 还能优化触发深度更新的组件的性能。

1.3 使用Hooks的优缺点

1.3.1 优点

• 代码行数更少 ：Hooks 允许按关注点和功能对代码进行分组，而不是按生命周期分组，使代码更简洁、更短。例如，下面是一个使用 React 类组件和使用 Hooks 的状态组件对比：