react是如何实现数据流动的
React 数据流动的实现方式
React 的数据流动主要通过以下几种机制实现，每种方式适用于不同场景：
单向数据流（Unidirectional Data Flow）
React 采用自上而下的单向数据流设计。父组件通过 props 向子组件传递数据，子组件通过回调函数（如 onClick）通知父组件状态变化。这种模式确保数据变更源头单一，易于追踪。
状态提升（Lifting State Up）
当多个组件需要共享同一状态时，将状态提升至最近的共同父组件中管理。父组件通过 props 分发数据，子组件通过回调函数触发父组件状态更新。
Context API
通过 React.createContext 创建全局数据层，允许跨层级组件共享数据，避免逐层传递 props。Provider 组件提供数据，Consumer 组件或 useContext Hook 消费数据。
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}状态管理库（如 Redux、MobX）
复杂应用可使用第三方库集中管理状态。Redux 通过单一 Store 存储状态，组件通过 dispatch 触发 Action 修改状态，再通过订阅机制更新视图。
Hooks 数据流
useState：管理组件内部状态。useReducer：适用于复杂局部状态逻辑。- 自定义 Hooks：封装可复用的状态逻辑，实现组件间数据共享。
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}选择数据流动方式的依据
- 简单父子通信：单向数据流 + 状态提升。
- 跨层级共享：Context API 或状态管理库。
- 高频更新或复杂逻辑：考虑 Redux 或 MobX。
- 局部状态：优先使用 Hooks。
