React函数组件未在UI使用state时点击仅触发两次渲染的原因

你的组件只渲染2次的核心原因是React的状态更新机制：只有当state的新值与旧值严格不相等（===）时，才会触发组件重新渲染，和这个state有没有在UI中使用无关。

具体拆解你的代码执行流程：

• 组件首次挂载：执行函数，打印rendered（这是第一次渲染）。
• 第一次点击按钮：调用setTitle("Title My")，state从初始值"My Title"变为"Title My"，值发生了变化，React触发组件重新渲染，打印rendered（这是第二次渲染）。
• 后续多次点击按钮：依然调用setTitle("Title My")，但此时state的当前值已经是"Title My"，新值和旧值完全相等，React会直接跳过这次状态更新，不会触发组件重新渲染，所以不会再打印rendered。

简单说，React不会做无意义的重复渲染——当你设置的state和当前状态完全一样时，不管这个state用不用在UI里，都不会触发渲染。

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