date
Jul 18, 2024 07:23 AM
type
status
slug
summary
tags
category
updated
Aug 27, 2024 03:22 AM
icon
password
React中常用的五个Hooks
useState
用于在函数组件中添加状态，状态的更新会触发组件重新渲染。
示例：
useEffect
用于在函数组件中执行副作用操作，如数据获取、订阅、手动更改DOM等。它相当于
componentDidMount，componentDidUpdate 和 componentWillUnmount 的结合。副作用一定要是改变的数据，像对象这种引用型的数据，虽然你主观认为数据改变了，但是并没有改变引用，所以特定监听不到。但是可以配合
useState 实现监听。示例：
useContext
用于共享状态而无需手动通过每一级组件传递props。
示例：
useReducer
用于更复杂的状态管理逻辑，类似于
useState，但适用于包含多个子值或复杂状态逻辑的情况。示例：
useRef
用于访问DOM元素或保存一个可变值，该值在组件重新渲染时不会改变。
示例：
使用 useReducer 进行复杂状态管理
为什么使用
useReducer：useReducer 在处理包含多个子值或复杂状态逻辑时更合适。通过定义一个 reducer 函数，我们可以更清晰地管理状态更新逻辑。示例：
使用 memo 进行组件优化
为什么使用
memo：React.memo 是一个高阶组件，可以将组件包装在其中以避免不必要的重新渲染。React.memo 通过浅比较 props 来决定是否重新渲染组件。示例：
在上述示例中，
ChildComponent 只有在 name 改变时才会重新渲染。通过 React.memo 包装组件，可以有效地减少不必要的渲染，提高性能。使用 useMemo 和 useCallback 进行性能优化
useMemo
为什么使用
useMemo：useMemo 用于缓存计算结果，从而避免在每次渲染时都进行耗时计算。示例：
useCallback
为什么使用
useCallback：useCallback 用于缓存函数实例，从而避免在每次渲染时都创建新的函数实例，特别是在将函数传递给子组件时非常有用。示例：
总结
这些示例展示了React中常用的Hooks及其使用场景。通过合理运用这些Hooks，可以有效地管理组件状态、处理副作用、优化性能，提升开发效率和应用性能。