react数据流实现
React 数据流实现方式
React 提供了多种数据流管理方案，可根据项目复杂度选择合适的方式。以下是常见的实现方法：
1. 组件内部状态（State）
适用于组件内部数据管理，通过 useState 或 this.state 实现。
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}2. 父子组件通信（Props） 父组件通过 props 向子组件传递数据，子组件通过回调函数通知父组件。
function Parent() {
const [value, setValue] = useState('');
return <Child value={value} onChange={setValue} />;
}
function Child({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}3. Context API 跨层级组件共享数据，避免 prop drilling 问题。
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
}4. 状态管理库（Redux/MobX） 复杂应用中使用集中式状态管理。
Redux 示例：
// store.js
const store = createStore(reducer);
// reducer.js
function reducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT': return state + 1;
default: return state;
}
}
// component.js
function Counter() {
const count = useSelector(state => state);
const dispatch = useDispatch();
return <button onClick={() => dispatch({ type: 'INCREMENT' })}>{count}</button>;
}5. 自定义 Hook 封装可复用的状态逻辑。
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}
function Counter() {
const { count, increment } = useCounter(0);
return <button onClick={increment}>{count}</button>;
}选择建议
- 简单组件交互：使用组件状态和 props
- 跨多级组件：Context API
- 复杂应用状态：Redux/MobX
- 逻辑复用：自定义 Hook
每种方案都有其适用场景，应根据项目具体需求进行选择。对于大多数中小型应用，Context API 配合 useState 已能满足需求。
