Question

反应元素是不可变的。创建元素后，您将无法更改其子级或属性。元素就像电影中的单个帧：它表示特定时间点的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如何更改他们提到的Immutable对象

反应元素是不可变的。创建元素后，您将无法更改其子级或属性。

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

Answer 1

它不会在React Element Tree（“不可变对象”）上进行更新。它将先前的树与当前的树进行比较，并对DOM进行必要的更新。

反应元素树是DOM的简化形式。就像快照一样。 React具有当前快照，并且当应用程序状态更改时，它会创建一个新状态，以反映DOM的外观。 React比较这两个快照，并对DOM进行必要的更改，以使其镜像新快照。之后，旧的，过时的快照将被删除，新的快照将成为DOM的当前快照。

基本上，您有：

应用程序状态
描述应用在给定状态（您编写的React代码）下的外观
快照（反应元素树）
差异化和更新机制（反应库）</ li>
DOM

DOM或外部环境（即服务器）会产生更改状态的事件。根据说明为该状态创建一个新的快照。比较旧快照和新快照，并将更改引入DOM。这个过程一遍又一遍地重复。

您可以在以下精彩的博客文章中查看并了解有关React元素的更多信息：https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html

Answer 2

反应组件是内部使用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(...)
)

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

为什么只更新道具，却不输入ie。元素？

这是因为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的元素是不可变的。

更新渲染元素（不可变）

2 个答案: