react如何通知数据
数据通知机制
React中数据通知通常通过状态管理、事件触发或上下文传递实现。核心思想是确保组件能响应数据变化并更新UI。
状态提升
将共享状态提升到最近的共同父组件，通过props向下传递数据和方法。子组件调用父组件传递的方法来更新状态。
function Parent() {
const [count, setCount] = useState(0);
return <Child count={count} onIncrement={() => setCount(c => c + 1)} />;
}Context API
使用React Context跨层级传递数据，避免props逐层传递。适合全局或深层嵌套组件间的数据共享。
const CountContext = createContext();
function App() {
const [count, setCount] = useState(0);
return (
<CountContext.Provider value={{ count, setCount }}>
<DeepChild />
</CountContext.Provider>
);
}状态管理库
Redux或MobX等库提供集中式状态管理。通过dispatch actions修改store，组件通过订阅store自动更新。
// Redux示例
const store = configureStore({ reducer: counterReducer });
function Component() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>{count}</button>;
}自定义事件
使用自定义事件或EventEmitter实现非父子组件通信。适用于解耦的组件间通信。
const emitter = new EventEmitter();
emitter.emit('dataUpdate', newData);
emitter.on('dataUpdate', data => console.log(data));效果对比
- 状态提升：适合局部组件通信，简单直接但可能造成prop drilling
- Context：适合跨层级访问，避免props层层传递但可能引起不必要的重渲染
- Redux：适合复杂状态管理，提供时间旅行调试但需要较多样板代码
- 自定义事件：完全解耦但需要手动管理订阅关系
