javascript - React 组件在重新渲染时忽略动态元素

Question

我开发了一个包含三个 div 元素的 React 组件，如下所示。

render: function(){
    return (
    <div id="div_1">
        <div id="div_2"></div>
        <div>
            Click the below button
            <a href="#">Click here</a>
        </div>
    </div>
    );
})

在运行时，使用jquery将一些元素插入到“div_2”div中，如下所示。

componentDidMount: function(){
    //Invoking global function, which is outside react
    window.loadView();
}

我的加载 View 方法如下所示，

function loadView(){
   $('#div_2').html('//my elements')
}

现在令我惊讶的是，当我更改 react 组件的状态时， View 正在重新渲染，但不知何故“div_2”中的内容仍然不受干扰。有人能说出为什么会出现这种行为吗？

Answer 1

React 有自己的 DOM 虚拟副本，隐藏在某处。 React 使用它来发挥其魔力，仅在状态 A 更改为状态 B 时才更新 DOM。

在您的示例中，React 不知道您使用 jQuery 对 <div 2> 所做的更改。所以，据 React 所知，<div 2>没有改变，所以React不会更新它。

我强烈建议不要混合使用 React 和 jQuery 来更新组件。如果你想让你的代码易于管理，就让 React 独家垄断更新 DOM。

就你而言，我建议让 React 只管理内部部分，如下所示:

render: function(){
    return (
      <div>
        Click the below button
        <a href="#">Click here</a>
      </div>
    );
})

在你的 HTML 中:

<div id="div_1">
    <div id="div_2"></div>
    <div id="react-only domain"></div>   // mount your ReactDOM here
</div>