1. 使用 React.memo 优化函数式组件
- 实现方式：对于函数式组件，如果其 props 没有变化，组件不需要重新渲染。可以使用
React.memo 来包裹组件。例如：
import React from'react';
const MyComponent = React.memo((props) => {
return <div>{props.value}</div>;
});
export default MyComponent;
- 注意事项：
React.memo 进行的是浅比较，如果 props 是复杂对象（如对象或数组），浅比较可能无法检测到深层次的变化，导致组件不能按预期重新渲染。此时可以使用 useMemo 或 useCallback 来处理复杂数据的变化。
2. Redux 中的 shouldComponentUpdate 优化
- 实现方式：在 Redux 中连接的组件，通过
mapStateToProps 获取状态。可以在组件类中重写 shouldComponentUpdate 方法，手动判断是否需要更新。例如：
import React, { Component } from'react';
import { connect } from'react-redux';
class MyConnectedComponent extends Component {
shouldComponentUpdate(nextProps) {
return nextProps.someValue!== this.props.someValue;
}
render() {
return <div>{this.props.someValue}</div>;
}
}
const mapStateToProps = (state) => ({
someValue: state.someSlice.someValue
});
export default connect(mapStateToProps)(MyConnectedComponent);
- 注意事项：手动编写
shouldComponentUpdate 逻辑时要确保全面，避免遗漏重要的状态变化，导致组件不能及时更新。同时，这种方式在函数式组件中无法直接使用，需要使用 React.memo 替代。
3. 使用 Redux Toolkit 优化 Redux 状态管理
- 实现方式：Redux Toolkit 提供了
createSlice 等工具函数，简化了 Redux 状态管理。例如，创建一个 slice：
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value++;
},
decrement: (state) => {
state.value--;
}
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
- 注意事项：虽然 Redux Toolkit 简化了代码，但在大型应用中仍需注意合理拆分 slices，避免单个 slice 过于庞大，导致状态管理混乱。同时，要确保正确使用 immer 库提供的功能，不要在 reducer 中错误地进行不可变数据操作。
4. 优化 Redux 数据结构
- 实现方式：设计扁平化的 Redux 数据结构，避免深层次嵌套。例如，将列表数据直接存储在数组中，而不是嵌套在复杂对象中。并且使用规范化数据结构，以 ID 为键来存储对象，方便查找和更新。
// 规范化数据结构示例
const initialState = {
users: {
1: { id: 1, name: 'John' },
2: { id: 2, name: 'Jane' }
},
userIds: [1, 2]
};
- 注意事项：在规范化数据结构时，要注意数据的一致性维护。例如，在更新某个用户信息时，要确保相关的 ID 列表和具体用户对象都得到正确更新。同时，在从规范化数据结构中获取数据用于组件展示时，可能需要一些额外的映射操作。
5. 使用 React.lazy 和 Suspense 进行代码分割
- 实现方式：使用
React.lazy 动态导入组件，配合 Suspense 处理加载状态。例如：
import React, { lazy, Suspense } from'react';
const BigComponent = lazy(() => import('./BigComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<BigComponent />
</Suspense>
</div>
);
}
export default App;
- 注意事项：确保在合适的位置添加
Suspense，避免用户看到白屏。同时，要合理分割代码，避免分割过度导致过多的加载请求，影响性能。另外，对于一些初始渲染就需要的关键组件，要谨慎使用代码分割，以免影响首屏加载时间。
