当前位置：首页 > React

React如何实现数据更新

2026-03-31 18:09:53React

React 数据更新的实现方式

React 中的数据更新主要通过状态管理机制实现，核心依赖于 useState、useReducer 等 Hook 或类组件的 setState 方法。以下是具体实现方式：

使用 `useState` Hook

useState 是函数组件中最常用的状态管理工具。通过调用 useState 返回的更新函数触发组件重新渲染。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

使用 `useReducer` Hook

适合复杂状态逻辑的场景。通过定义 reducer 函数和 dispatch 方法实现状态更新。

React如何实现数据更新

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>当前计数: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>增加</button>
    </div>
  );
}

类组件中的 `setState`

类组件通过 this.setState 方法更新状态，支持对象或函数形式的更新。

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>当前计数: {this.state.count}</p>
        <button onClick={this.handleClick}>增加</button>
      </div>
    );
  }
}

状态提升与 Props 传递

父组件通过传递状态和更新函数给子组件，实现跨组件数据更新。

React如何实现数据更新

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child count={count} onUpdate={() => setCount(count + 1)} />
    </div>
  );
}

function Child({ count, onUpdate }) {
  return (
    <div>
      <p>子组件计数: {count}</p>
      <button onClick={onUpdate}>更新</button>
    </div>
  );
}

使用 Context API

通过 createContext 和 useContext 实现跨层级组件数据更新。

const CountContext = React.createContext();

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
    </CountContext.Provider>
  );
}

function Child() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Context 计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>更新</button>
    </div>
  );
}

第三方状态管理库

如 Redux、MobX 等，通过集中式状态管理实现复杂应用的数据更新。

// Redux 示例
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const store = createStore((state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
});

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Redux 计数: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}