更新渲染元素（不可变）

小编典典

更新渲染元素（不可变）

reactjs

在React教程中，它说

React元素是不可变的。创建元素后，就无法更改其子级或属性。元素就像电影中的单个帧：它表示特定时间点的UI。到目前为止，根据我们的知识，更新UI的唯一方法是创建一个新元素并将其传递给ReactDOM.render（）。

在下一个标题中，它说

仅反应更新需要什么

React DOM将元素及其子元素与上一个元素进行比较，并且仅应用必要的DOM更新以使DOM达到所需状态。

他们举的例子-

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

在此示例中，React Only更新<h2>It is {new Date().toLocaleTimeString()}.</h2代码的时间-

行。因为这只是必要的更改，但是我无法理解React如何更改他们提到的不可变对象

React元素是不可变的。创建元素后，就无法更改其子级或属性。

因此，它不仅应该更改（上面的代码示例中的）“ Just Time Part”，还应该更改整个React
Element。我无法理解React如何在Immutable对象（上面的例子中是元素）中进行必要的更新，或者我缺少什么？

阅读 288

2020-07-22

共1个答案

小编典典

React组件是在内部使用createElement构建的：

React.createElement(type, props)

因此，当在其道具上进行任何更改时，值将被更新，但其类型不会被更新。

例如：

React.createElement('h1', 'Hello, world!')
// first param is type, and second is prop

这里的道具没有改变，因此这个元素将不会被更新。

该组件可以用createElement编写，例如：

React.createElement('div',
   React.createElement('h1', 'Hello world!'),
   React.createElement(....),
   React.createElement(...)
)

因此，只要特定元素的任何道具发生变化，该元素就只会被更新。

为什么只更新道具，而不输入类型。元件？

这是因为React将它们存储在ReactDOM对象中，而不是HTML
DOM中。并仔细分析需要更新的内容。ReactDOM只是一个具有key：value对的对象。

例如，React初始化它的dom就像：

var ReactDOM = {}

现在，无论需要更新哪个属性，都可以对其进行处理。

Object.defineProperties(ReactDOM, {
  type: { // creating immutable property
    value: 'h1',
    writable: false,
    configurable: false
  },
  props: {
    writable: true,
    value: 'MY PROPS'
  }
});
Object.seal(ReactDOM)

现在，props可以更改，但不能更改type。

ReactDOM.props = 'will be updated'
ReactDOM.type = 'will not be updated'
console.log(ReactDOM.type) // 'h1'
console.log(ReactDOM.props) // 'will be updated'

我希望这可以弄清React的元素是不可变的。

2020-07-22