如何在浏览器控制台手动刷新DOM？React组件场景咨询

问题根源 #

你定义的flag是全局变量，并非React组件的状态（state）。React的更新机制是：仅当组件的state或props发生变化时，才会自动触发重渲染并更新DOM。修改全局变量flag无法被React感知，因此DOM不会同步更新。

控制台临时触发DOM更新的方法 #

控制台没有通用的直接刷新React组件DOM的命令，但可以通过以下方式临时触发重渲染：

• 借助React DevTools：打开React DevTools选中目标组件后，在控制台输入$r.forceUpdate()（$r是DevTools提供的当前选中组件实例的快捷变量），强制组件调用render方法更新DOM。
• 注意：这只是调试用的临时手段，不能作为正式代码的解决方案。

正确的长期解决方案 #

将flag改为组件的内部状态，这样修改状态时React会自动触发重渲染：

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    // 将flag定义为组件state
    this.state = {
      flag: true
    };
  }

  render() {
    return (
      <div>
        <div 
          className="box" 
          style={{backgroundColor: this.state.flag ? "skyblue" : "black"}}
        >
          box
        </div>
      </div>
    );
  }
}

后续需要修改flag时，通过this.setState({flag: false})来更新，DOM会自动同步变化。

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