react如何变更state状态

变更 React 状态的方法

在 React 中，状态（state）是组件内部管理数据的方式。变更状态需要使用 setState（类组件）或状态更新函数（函数组件）。以下是具体实现方法：

类组件中使用 setState

在类组件中，通过 this.setState 方法更新状态。该方法接受一个对象或函数作为参数，用于合并到当前状态。

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

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

  render() {
    return (
      <button onClick={this.handleClick}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

函数组件中使用 useState

函数组件通过 useState Hook 管理状态。调用状态更新函数（如 setCount）可以直接设置新值或使用函数式更新。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1); // 直接设置新值
  };

  // 函数式更新（依赖前一个状态）
  const handleClickFunctional = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

状态更新是异步的

React 的状态更新可能是异步的，连续调用 setState 或状态更新函数时，应使用函数式更新以确保基于最新状态。

// 类组件
this.setState((prevState) => ({ count: prevState.count + 1 }));

// 函数组件
setCount(prevCount => prevCount + 1);

合并状态更新

在类组件中，setState 会自动合并状态对象。函数组件中需手动合并状态（如使用展开运算符）。

// 类组件
this.setState({ ...this.state, newKey: 'value' });

// 函数组件
const [state, setState] = useState({ a: 1, b: 2 });
setState(prevState => ({ ...prevState, b: 3 }));

使用 useReducer 管理复杂状态

对于复杂状态逻辑，可以使用 useReducer 替代 useState，通过 reducer 函数集中管理状态变更。

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

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

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      Count: {state.count}
    </button>
  );
}