Question

我有一个非常简单的应用程序，其组件包含两个孩子。它还包含一个强制重新渲染的按钮。

const Hello = () => <span id="hello">hello</span>;
const World = () => <span id="world">world</span>;

class HelloWorld extends React.Component {
  render() {
    return (
      <div id="hello-world">
        <Hello />
        <World />
        <button onClick={() => this.forceUpdate()}>re-render</button>
      </div>
    )
  }
}

使用以下代码，我可以重新排列DOM，使得Hello紧跟World

var hello = document.getElementById('hello-world').children[0]
var world = document.getElementById('hello-world').children[1]
hello.parentNode.insertBefore(world, hello)

当我强制重新渲染时，我期望React将其在虚拟DOM（Hello World中表示的内容渲染到DOM。相反，它将继续呈现World Hello。为什么是这样？手动DOM更新在什么情况下会引起问题？

Answer 1

对于这种问题（动态组件渲染），我将使用一个数组，并通过forceUpdate（）更改顺序。

helloWorld = [Hello, World];

并使用地图进行渲染以为其提供密钥：

render() {
 return (
   <div>{
     helloWorld.map(Item => (<Item key={ uniqueVar } />)
   )
  }</div>
 )
}

Answer 2

根据docs：

调用forceUpdate（）将导致在渲染器上调用render（）组件，跳过shouldComponentUpdate（）。这将触发子组件的正常生命周期方法，包括每个子项的shouldComponentUpdate（）方法。 React只会如果标记发生更改，请更新DOM。

这意味着render()将被调用，但是如果您的数据未更改，则dom的那些部分将不会更新-它们是相同的。

使用forceUpdate（）手动进行DOM更新和React组件渲染

2 个答案: