React状态变更时文本输入组件未重新渲染问题排查

代码示例 #

App.js

import React, { useState} from 'react';
import Input from './Components/Input';
export default function App() {
  const [state,setState]=useState(0);
  const handler=()=>{
    setState(prev=>prev+1);
  }
  return <>
    <Input></Input>
    <button onClick={handler}>Change state</button>
    <p>{state}</p>
  </>  
}

Input.js

export default function Input()
{
    return <input type="text"></input>
}

问题描述 #

点击按钮修改父组件state时，Input子组件表现为输入框保留输入内容，看似未重新渲染，但按常理父组件重渲染时，即使子组件props未变化，子组件也应重渲染。即使直接使用<input type="text">或给Input传入dummyProp，问题依然存在，且未开启严格模式。

解答 #

1. 澄清核心误解：输入框内容保留≠子组件没重渲染。React的重渲染分为两个阶段：组件函数执行、真实DOM更新。父组件state变化时，子组件的函数确实会重新执行（即逻辑上的重渲染），但由于Input组件返回的input元素没有任何属性变化，React通过虚拟DOM对比后会复用原真实DOM节点，不会重新创建或更新DOM，因此输入框的内容（属于DOM自身的状态）会被保留，看起来像是没重渲染。

2. 验证重渲染的方法：在Input组件中添加日志输出，就能直观看到组件函数是否执行：

export default function Input() {
  console.log('Input组件已执行（重渲染）');
  return <input type="text"></input>
}

点击按钮时，控制台会打印上述日志，证明子组件确实完成了重渲染。

3. 强制DOM更新的方式（非必要）：如果需要让React每次都重新创建input的DOM节点（比如清空输入内容），可以给子组件添加随父组件state变化的key属性：

// 在App.js中修改Input的调用
<Input key={state} />

key是React识别元素唯一性的标识，当key变化时，React会销毁旧DOM并创建新DOM，此时输入框内容会被清空，也能直观看到组件重渲染的效果。

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