React函数组件控制台多次渲染原因及单次渲染实现方法

你遇到的多次渲染日志来自两个独立的React机制，分开说明：

1. 首次加载就出现两次初始化/渲染日志：React 18 开发环境严格模式行为
   现在用create-react-app或者Vite创建的React项目，默认会在入口文件开启React.StrictMode严格模式。开发环境下，严格模式会对首次挂载的组件执行「挂载→卸载→重新挂载」的双调用流程，目的是提前检测出副作用没有清理、不安全的生命周期写法等潜在bug，这个双调用行为只在开发环境存在，生产环境打包后不会出现。
2. 点击Count按钮后每次都触发effect日志：useEffect默认执行逻辑
   你写的useEffect没有传入第二个依赖数组参数，这种写法下effect会在组件每次渲染完成后都执行一次。点击按钮会更新count状态，状态变化会触发组件重渲染，重渲染完成后自然会触发effect打印日志。

根据你想要的效果对应调整即可：

• 如果只是想让useEffect里的逻辑仅在组件首次挂载时执行一次，后续重渲染不触发，只需要给useEffect传入**空依赖数组[]**作为第二个参数即可，这个写法等价于类组件的componentDidMount生命周期。修改后的UseEffect.js代码如下：

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

function MyFunction(){
console.log('-> Function Init')

const [count, setCount] = useState(0)
const handleCount = () => {
    setCount(prevState => prevState+1)
}

// 传入空依赖数组，仅首次挂载完成后执行一次
useEffect(() => {
    console.log('my first effect')
}, [])

console.log(`-> Start Render (${count})`)
return(
    <div>
            <h1>Function Component</h1>
            <p>
                <button onClick={handleCount}>Count</button>
                {count}
            </p>
    </div>
)}

export default MyFunction

• 如果想连首次加载的双调用初始化日志都去掉，可以找到项目入口文件（通常是src/index.js或src/main.jsx），删掉包裹根组件的<React.StrictMode>标签即可。不过更推荐保留严格模式，它能帮你在开发阶段提前规避很多隐蔽的代码问题，且生产环境不会有双调用的额外开销。

注意：状态更新触发组件函数重新执行、打印渲染日志是React的正常工作机制，只要组件状态变化就会触发重渲染计算最新UI，这个行为不需要也不应该被禁止，我们通常只需要控制副作用逻辑（useEffect内的代码）的执行时机即可。

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