为何React组件更新state后未重新渲染？技术疑问

首先看你的代码：

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count); // I expected this to re-render
  };

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

export default Counter;

你遇到的问题核心是对useState的更新机制理解有误：React在处理useState的更新时，会对比新状态值和当前状态值的严格相等性（===）。如果两者完全相同，React会认为状态没有发生变化，因此不会触发组件的重新渲染。

你的increment函数里调用setCount(count)，本质是把当前的count值（比如初始的0）重新赋值给状态，新值和旧值完全一致，所以React判定不需要更新组件，自然点击按钮后没有任何反应。

正确的实现方式 #

要触发组件更新并实现计数增加的效果，你需要传递一个不同于当前状态的新值给setCount，推荐两种写法：

1. 直接计算新值（适用于简单同步场景）

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

2. 函数式更新（更可靠，尤其在依赖前一次状态值的异步操作中）
   React允许你给setCount传递一个函数，这个函数会接收当前的状态值作为参数，返回新的状态值：

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

这种方式能确保你总是基于最新的状态值来计算新状态，避免因闭包导致的状态不一致问题。

内容的提问来源于stack exchange，提问作者Ravindu Danthanarayana