当前位置：首页 > React

react如何修改值

2026-01-15 09:08:46React

修改 React 组件的值

在 React 中修改值通常涉及状态管理。根据组件的类型（类组件或函数组件）和状态管理方式（本地状态或全局状态），方法有所不同。

使用 useState（函数组件）

在函数组件中，通过 useState Hook 管理本地状态。调用状态更新函数可以修改值。

react如何修改值

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1); // 直接更新值
  };

  return (
    <div>
      <p>当前值: {count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
}

使用 setState（类组件）

在类组件中，通过 this.setState 方法更新状态值。

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

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

使用 useReducer（复杂状态逻辑）

对于复杂的状态逻辑，可以使用 useReducer 来管理状态更新。

react如何修改值

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

function ExampleComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

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

使用 Context API（跨组件共享状态）

通过 Context API 可以在多个组件间共享和修改状态。

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function CountProvider({ children }) {
  const [count, setCount] = useState(0);

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

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

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

function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

使用 Redux（全局状态管理）

在大型应用中，Redux 提供集中的状态管理方式。

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

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

  return (
    <div>
      <p>当前值: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
    </div>
  );
}

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