react 如何改变state

改变 state 的方法

在 React 中，state 是组件内部的可变数据，用于存储组件的状态。改变 state 需要使用特定的方法，以确保 React 能够正确跟踪状态变化并触发重新渲染。

使用 useState Hook

对于函数组件，可以使用 useState Hook 来声明和更新 state。useState 返回一个 state 变量和一个更新该变量的函数。

import React, { useState } from 'react';

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

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

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

使用 setState 方法（类组件）

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

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

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

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

使用函数更新 state

当新的 state 依赖于旧的 state 时，建议使用函数形式的 setState 或 useState 的更新函数，以避免竞态条件。

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

// 类组件中的等价写法
this.setState(prevState => ({
  count: prevState.count + 1
}));

合并 state 更新

setState 在类组件中是浅合并的，只会更新指定的字段，而不会影响其他 state 字段。但在函数组件中，useState 不会自动合并，需要手动合并。

// 类组件中的合并
this.setState({ newField: 'value' });

// 函数组件中的手动合并
const [state, setState] = useState({ field1: 'value1', field2: 'value2' });
setState(prevState => ({ ...prevState, newField: 'value' }));

异步更新 state

setState 和 useState 的更新函数是异步的。如果需要立即使用更新后的 state，可以在 useEffect Hook 中监听 state 变化，或在类组件中使用 setState 的回调函数。

// 函数组件中使用 useEffect
useEffect(() => {
  console.log('Count updated:', count);
}, [count]);

// 类组件中使用回调
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Count updated:', this.state.count);
});

避免直接修改 state

直接修改 state 不会触发重新渲染，必须使用 setState 或 useState 的更新函数。

// 错误做法
this.state.count = this.state.count + 1;

// 正确做法
this.setState({ count: this.state.count + 1 });