React函数组件重复点击按钮时日志异常问题咨询

问题描述 #

编写了一段React函数组件代码：切换到新按钮时，控制台先打印更新后的sourceType，再打印"My Log"，符合预期。但存在疑惑：

• 已处于users标签时，再次点击users按钮，控制台会打印"My Log"；
• 后续无论多少次点击users按钮，都不再输出任何日志；
• 想知道该现象是否和组件生命周期有关，以及具体原因。

组件代码如下：

import React, { useState, useEffect } from "react";

export default function App() {
  const [sourceType, setSourceType] = useState("posts");

  useEffect(() => {
    console.log(sourceType);
  }, [sourceType]);

  console.log("My Log");

  return (
    <div>
      <button
        onClick={() => {
          setSourceType("posts");
        }}
      >
        Posts
      </button>

      <button
        onClick={() => {
          setSourceType("users");
        }}
      >
        Users
      </button>

      <button
        onClick={() => {
          setSourceType("comments");
        }}
      >
        Comments
      </button>

      <h1>{sourceType}</h1>
    </div>
  );
}

原因解析 #

1. 第一次重复点击触发"My Log"的原因 #

React的setState机制并非完全同步判断值是否相等：当你第一次重复调用setSourceType("users")时，React会先触发一次组件重渲染（所以组件内的console.log("My Log")会执行），之后才会检测到sourceType的值没有发生变化，因此不会更新DOM，也不会触发依赖于sourceType的useEffect回调。

2. 后续点击无日志的原因 #

React内部有性能优化机制：当检测到连续多次调用setState传入的新值与当前state完全相同时，会跳过后续的更新流程，不再触发组件重渲染。这就是为什么第一次重复点击后，再点同一个按钮不会有任何日志输出。

3. 与组件生命周期的关联 #

函数组件的重渲染对应类组件的render阶段，而useEffect属于渲染完成后的副作用阶段：

• 只有当state的实际值发生变化时，useEffect的依赖数组才会触发回调执行；
• 重渲染的触发条件并不完全依赖state值的变化，第一次重复点击时React的内部判断逻辑会先允许重渲染，之后才会启用优化跳过后续重复更新。

内容的提问来源于stack exchange，提问作者free-stack