1

HTML：

JS：

var Counter = React.createClass({
    getInitialState : function() {
       return {
         list:['one','two'],
         flag: 1
       }
    },
    changeFlag : function() {
       this.setState({flag:2});
    },
    render : function() {
       var list = this.state.list;
       var flag = this.state.flag;
       return ( 
          <div>
              <ul id="list">
              {
                  list.map((item, index) => (
                      <li>{item}</li>
                  ))
              }
              </ul>
             <button onClick={this.changeFlag}>{flag}</button>
         </div>
      );
  }
})
ReactDOM.render( <Counter />, document.getElementById('content') );

setTimeout(function(){
   document.getElementById('list').childNodes[0].innerText= 'three'
},2000)

我已将列表初始化为“一”和“二”。现在我使用 jquery 直接更新 DOM，并在 2 秒超时后将“一”的值更改为“三”。现在，通过单击按钮，我再次进入状态，重新渲染组件。

现在我的问题是，如果我直接将 DOM 从“一”更改为“三”，虚拟 DOM 应该仍然保持值“一”，所以下次如果我更改状态，它将根据浏览器 DOM 检查虚拟 DOM，并且应该使用虚拟 DOM 更新浏览器 DOM。在我的情况下，单击按钮后值“三”仍然存在，这是怎么回事？

4

0 回答 0