react如何组织处理复杂的数据
React 处理复杂数据的常见方法
状态提升（State Lifting）
将共享状态提升到最近的共同父组件，通过 props 向下传递数据。适用于父子组件或兄弟组件之间的数据共享。
示例：
function Parent() {
const [data, setData] = useState([]);
return (
<>
<ChildA data={data} />
<ChildB onDataUpdate={setData} />
</>
);
}使用 Context API
通过 createContext 和 useContext 跨层级传递数据，避免 prop drilling。适合全局或深层嵌套的数据共享。
示例：
const DataContext = createContext();
function App() {
const [data, setData] = useState({});
return (
<DataContext.Provider value={{ data, setData }}>
<DeepNestedComponent />
</DataContext.Provider>
);
}
function DeepNestedComponent() {
const { data } = useContext(DataContext);
return <div>{data.value}</div>;
}状态管理库（Redux/Zustand）
Redux 通过单一 store 管理状态，适合大型应用；Zustand 是轻量级替代方案。两者均支持中间件和异步操作。
Redux 示例：
const store = configureStore({ reducer: rootReducer });
function App() {
return (
<Provider store={store}>
<Component />
</Provider>
);
}自定义 Hook 封装逻辑
将复杂数据逻辑抽离为可复用的自定义 Hook，保持组件简洁。
示例：
function useComplexData(initialData) {
const [data, setData] = useState(initialData);
const updateData = (newData) => {
// 复杂处理逻辑
setData(normalizeData(newData));
};
return [data, updateData];
}数据规范化（Normalization）
将嵌套数据转换为扁平结构，类似数据库表设计，便于通过 ID 快速查找和更新。
示例：
const normalizedData = {
users: {
'1': { id: 1, name: 'Alice' },
'2': { id: 2, name: 'Bob' }
},
posts: {
'101': { id: 101, userId: 1, content: 'Hello' }
}
};性能优化策略
- 使用
useMemo缓存计算结果：const processedData = useMemo(() => heavyComputation(data), [data]); - 使用
useCallback避免函数重复生成：const handleUpdate = useCallback((newData) => updateData(newData), []);
服务端状态管理（React Query/SWR）
处理异步数据时，使用这些库可自动管理缓存、更新和错误状态。
React Query 示例：
const { data, isLoading } = useQuery('todos', fetchTodos);
if (isLoading) return <Loader />;
return <TodoList data={data} />;选择依据
- 组件层级深度：浅层用 props，深层用 Context 或状态库。
- 数据更新频率：高频更新考虑性能优化或状态管理库。
- 团队习惯：已有 Redux 基建可延续使用，新项目可评估轻量方案。
