React中状态设置this.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>You clicked {this.state.count} times</p>
        <button onClick={() => this.increment()}>
          Click me
        </button>
      </div>
    );
  }
}

// ❌ 错误的做法
increment() {
  this.setState({ count: this.state.count + 1 });
  console.log(this.state.count); // 这里打印的仍然是旧的值，不是 +1 后的值
}

increment() {
  this.setState((prevState) => {
    return { count: prevState.count + 1 }; // 基于之前的状态计算新状态
  });
}

increment() {
  this.setState(
    (prevState) => ({ count: prevState.count + 1 }),
    () => {
      console.log('状态已更新，当前count是：', this.state.count); // 这里可以拿到最新值
      // 可以在这里操作DOM，比如根据新的状态设置焦点等
    }
  );
}

import { useState } from 'react';

function Counter() {
  // useState 返回一个数组： [当前状态值, 更新状态的函数]
  const [count, setCount] = useState(0);

  function increment() {
    // 直接传入新的值
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

// ❌ 错误的做法
function increment() {
  setCount(count + 1);
  console.log(count); // 仍然是旧值
}

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

const [user, setUser] = useState({ name: 'Alice', age: 25 });

function updateName(newName) {
  // ❌ 错误：直接修改原对象
  // user.name = newName;
  // setUser(user); // 不会触发重新渲染，因为引用没变

  // ✅ 正确：展开运算符创建新对象
  setUser({
    ...user,      // 拷贝所有旧属性
    name: newName // 用新值覆盖其中的name属性
  });
}