当前位置：首页 > React

react数据流实现

2026-01-27 14:33:02React

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 向子组件传递数据，子组件通过回调函数通知父组件。

react数据流实现

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） 复杂应用中使用集中式状态管理。

react数据流实现

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>;
}