React受控表单元素构造函数初始化后render方法不重渲染问题

嘿，这个问题我刚入门React的时候也踩过一模一样的坑！让我给你掰扯清楚为啥会这样，以及该怎么解决～

React的核心渲染逻辑是靠render方法驱动的：每次组件的state或props发生变化时，React会自动触发render方法，生成新的虚拟DOM树，再通过Diff算法对比新旧DOM的差异，只更新需要变化的部分。

• 如果你在构造函数里初始化input元素，这个元素是组件挂载前就生成好的静态对象，之后不管state怎么变，render方法里都不会重新生成它。没有新的虚拟DOM节点和旧节点对比，React自然不会去更新真实DOM里的input值，也就出现了你看到的“不重渲染”问题。
• 而把input放在render里创建时，每次state更新都会触发render，生成带有最新value的虚拟DOM节点，React能立刻检测到变化，同步更新到真实DOM上，这就是你预期的正常效果。

最标准也最推荐的做法，就是把input的创建逻辑移回render方法里，完全遵循React的受控组件设计模式：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
    // 提前绑定事件处理函数，避免每次render创建新函数
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    this.setState({ inputValue: e.target.value });
  }

  render() {
    // 每次render都会根据当前state生成最新的input
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />
      </div>
    );
  }
}

如果你因为特殊需求非要在构造函数里处理元素（真的不推荐，容易破坏React的数据流），那只能手动在state更新后修改DOM，但这完全违背了受控组件“state唯一数据源”的理念，会埋下很多难以排查的bug，真心不建议这么做。

受控组件的核心就是让state成为UI的唯一数据源，所有UI变化都通过修改state来触发，而render方法是连接state和UI的必经桥梁。遵循这个模式，就能避开绝大多数这类奇怪的渲染问题啦～

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