在React生态中，状态管理与组件性能优化是两个永恒的主题。useReducer、useMemo、React.memo、useCallback、forwardRef、useImperativeHandle以及zustand等工具和库为我们提供了强大的支持。本文将详细介绍这些工具的使用方法，帮助开发者写出更高效、更易维护的代码。
1. useReducer：管理复杂状态逻辑
useReducer是React提供的Hook之一，适用于管理具有多个子值的复杂状态逻辑。通过编写一个reducer函数，可以根据不同action类型返回新的状态。
1.1 基础使用
import { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'INC':
return state + 1;
case 'DEC':
return state - 1;
default:
return state;
}
}
function App() {
const [state, dispatch] = useReducer(reducer, 0);
return (
<>
<button onClick={() => dispatch({ type: 'DEC' })}>-</button>
<span>{state}</span>
<button onClick={() => dispatch({ type: 'INC' })}>+</button>
</>
);
}
export default App;
1.2 分派action传参
在action对象中添加payload属性，可以在分派action时传递额外参数。
// 同上基础使用代码，添加一个案例
<button onClick={() => dispatch({ type: 'UPDATE', payload: 5 })}>
Update by 5
</button>
2. useMemo：性能优化
useMemo用于缓存计算结果，避免在每次渲染时重复计算，尤其是在处理复杂计算时。
2.1 useMemo缓存计算结果
import { useMemo, useState } from "react";
function fib(n) {
console.log("计算函数执行了");
if (n < 3) return 1;
return fib(n - 2) + fib(n - 1);
}
function App() {
const [count, setCount] = useState(0);
const result = useMemo(() => fib(count), [count]);
return (
<div>
<div>Fibonacci of {count}: {result}</div>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default App;
3. React.memo：避免不必要的渲染
React.memo是一个高阶组件，它允许组件在props没有变化时跳过重新渲染。
3.1 props的比较机制
import React, { useState, useMemo } from "react";
const areEqual = (prev, next) => prev.list === next.list;
const MemoSon = React.memo(function Son({ list }) {
console.log("子组件被重新渲染了");
return <div>this is span{list}</div>;
}, areEqual);
function App() {
const [count, setCount] = useState(0);
const list = useMemo(() => [1, 2, 3, 4, 5], []);
return (
<>
<MemoSon list={list} />
<button onClick={() => setCount(count + 1)}>Change Count</button>
</>
);
}
export default App;
4. useCallback：缓存回调函数
useCallback用于缓存回调函数，确保在组件渲染时保持引用稳定。
4.1 useCallback缓存回调函数
import { memo, useCallback, useState } from 'react';
const MemoSon = memo(function Son({ onGetMessage }) {
console.log('Son组件渲染了');
return <button onClick={() => onGetMessage('Hello!')}>Click me</button>;
});
function App() {
const [, forceUpdate] = useState();
const onGetMessage = useCallback((message) => {
console.log(message);
}, []);
return (
<div>
<MemoSon onGetMessage={onGetMessage} />
<button onClick={() => forceUpdate(Math.random())}>Force Update</button>
</div>
);
}
export default App;
5. forwardRef + useImperativeHandle：ref的使用
forwardRef允许组件使用ref将DOM节点或子组件暴露给父组件。
5.1 forwardRef与useImperativeHandle
import { forwardRef, useImperativeHandle, useRef } from "react";
const Son = forwardRef(function Son(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus(),
}));
return <input ref={inputRef} />;
});
function App() {
const sonRef = useRef();
const handleFocus = () => {
sonRef.current.focus();
};
return (
<>
<Son ref={sonRef} />
<button onClick={handleFocus}>Focus Input</button>
</>
);
}
export default App;
6. Zustand：简化状态管理
zustand是一个简单但强大的状态管理库，它简化了状态逻辑，使得状态管理更加直观。
6.1 快速上手
import {
create } from "zustand";
const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({
count: state.count + 1 })),
}));
function App() {
const {
count, inc } = useStore();
return (
<>
<button onClick={
inc}>{
count}</button>
</>
);
}
export default App;
6.2 异步支持
zustand对异步操作也有很好的支持。
import {
create } from "zustand";
import {
useEffect } from "react";
const URL = "http://geek.itheima.net/v1_0/channels";
const useStore = create((set) => ({
count: 0,
inc: () => set((state) => ({
count: state.count + 1 })),
channelList: [],
fetchGetList: async () => {
const res = await fetch(URL);
const jsonRes = await res.json();
set({
channelList: jsonRes.data.channels });
},
}));
function App() {
const {
count, inc, fetchGetList, channelList } = useStore();
useEffect(() => {
fetchGetList();
}, [fetchGetList]);
return (
<>
<button onClick={
inc}>{
count}</button>
<ul>
{
channelList.map((item) => (
<li key={
item.id}>{
item.name}</li>
))}
</ul>
</>
);
}
export default App;
6.3 切片模式
当单个store较大时，可以使用切片模式进行模块拆分再组合。
import {
create } from 'zustand';
import {
useEffect } from 'react';
const URL = "http://geek.itheima.net/v1_0/channels";
const createCounterStore = (set) => ({
count: 0,
setCount: () => set((state) => ({
count: state.count + 1 })),
});
const createChannelStore = (set) => ({
channelList: [],
fetchGetList: async () => {
const res = await fetch(URL);
const jsonData = await res.json();
set({
channelList: jsonData.data.channels });
},
});
const useStore = create((...args) => ({
...createCounterStore(...args),
...createChannelStore(...args),
}));
function App() {
const {
count, inc, fetchGetList, channelList } = useStore();
useEffect(() => {
fetchGetList();
}, [fetchGetList]);
return (
<>
<button onClick={
inc}>{
count}</button>
<ul>
{
channelList.map((item) => (
<li key={
item.id}>{
item.name}</li>
))}
</ul>
</>
);
}
export default App;
通过上述内容，我们可以看到zustand提供了一种非常灵活的方式来管理React应用中的状态。无论是简单的计数器，还是复杂的异步数据获取，甚至是大型应用的状态管理，zustand都能够提供简洁而强大的解决方案。
扫描二维码关注公众号，回复：
17434887 查看本文章
总结
在React应用开发中，状态管理与性能优化是提升用户体验和应用效率的关键。通过本文的深入探索，我们了解到了useReducer对于复杂状态逻辑的管理能力，useMemo和React.memo在避免不必要渲染方面的高效性，useCallback在保持函数引用稳定性方面的优势，以及forwardRef和useImperativeHandle在ref操作中的灵活性。
特别值得一提的是zustand状态管理库，它以其简洁的API和强大的功能，为React状态管理提供了一种新的解决方案。无论是基本的状态提升、异步数据流的处理，还是大型应用的模块化状态管理，zustand都能够以一种声明式和可预测的方式进行处理，极大地简化了状态逻辑的编写和维护。
随着React生态的不断发展，这些工具和库将继续演进，为开发者提供更多的便利。掌握并合理运用这些高级技巧，将有助于我们构建出更加健壮、高效和易于维护的React应用。