当前位置：首页 > React

react如何更新组件状态

2026-01-24 12:06:52React

使用 useState Hook

在函数组件中，可以通过 useState Hook 来定义和更新状态。useState 返回一个状态值和一个更新该状态的函数。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

使用 setState 方法（类组件）

在类组件中，可以通过 this.setState 方法来更新状态。setState 可以接受一个对象或函数作为参数。

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

使用函数式更新

当新状态依赖于旧状态时，建议使用函数式更新以避免竞态条件。

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

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

批量更新状态

在 React 中，多次调用状态更新函数可能会被批量处理。可以使用 useState 或 setState 的自动合并特性。

function Example() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser(prevUser => ({ ...prevUser, name: 'Jane' }));
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

使用 useEffect 监听状态变化

可以通过 useEffect Hook 监听状态的变化并执行副作用。

react如何更新组件状态

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

  useEffect(() => {
    console.log(`Count changed to ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}