更新渲染元素（不可变） [英] Updating the Rendered Element(immutable)

问题描述

在反应教程中，它说

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

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. With our knowledge so far, the only way to update the UI is to create a new element and pass it to ReactDOM.render().

在下一个标题中，它表示

In the Next Heading, It says

仅响应更新必要的内容

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

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

他们采取的示例 -

Example took by them -

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>它是{new Date（）。toLocaleTimeString（）}。< / h2 >代码行。因为这只是必要的更改，但我无法理解React如何更改Immutable对象，因为他们已经提到了

In this example React Only updates the time - <h2>It is {new Date().toLocaleTimeString()}.</h2> line of the code. Because this is only necessary changes but I couldn't be able to understand how React changing the Immutable object as they have mentioned

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

React elements are immutable. Once you create an element, you can’t change its children or attributes.

因此，而不是只更改Just Time Part （上面的代码示例），它应该改变整个React元素。
我无法理解React如何在Immutable对象中进行必要的更新（在上面的例子中它是元素）或者我错过了什么？

So rather than only changing the "Just Time Part" (of above code example), It should change whole React Element. I couldn't be able to understand how could React does necessary updates inside the Immutable object (in above case it is the element) or I'm missing something?

推荐答案

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

React components are built with createElement internally:

React.createElement(type, props)

因此，当对其道具应用任何更改时，值会更新，但不会更新。

And thus, when any changes applied on its props the value gets updated but not its type.

例如：

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

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

Here the prop is not changed, and thus this element will not be updated.

该组件可以用createElement如：

The component could be written with createElement like:

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

因此，每当特定元素的任何道具获得时更改，该元素只会更新。

So, whenever any of the props of the particular element gets changes, that element will only be updated.

为什么只更新道具，而不是类型ie。 element？

Why only props are updated, but not type ie. element?

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

It's because React store them in ReactDOM object but not HTML DOM. And it carefully analyse what it needs to be updated. ReactDOM is simply an object with key:value pair.

例如，React初始化它的大小如下：

For example, React initialize it's dom like:

var ReactDOM = {}

现在，无论财产需要更新，可以处理。

Now, whatever the property need update, can be handled on that.

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

现在，道具可以更改但不能输入。

Now, the props can be changed but not 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的元素是不可变的。

I hope this makes clear up things that React's elements are immutable.

这篇关于更新渲染元素（不可变）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！