< 关於 React: 开始打地基| 建立一个最小的单位 “Element” >

09-04-2021

避免与component混淆的最小单位

在建立element时，与DOM element 不同的是，React element是一个object（物件）
而当React DOM在更新时，就是在更新DOM来符合我们所写的React element。

const element = <p>这是一个element!</p>

Render Element到DOM内

首先必须先确认好，我们目前是否已经将需要使用到React 显示的位置在HTML中定义好了

<div id="root"></div>

root 是一个DOM node，因为所有的在root之内的element都会透过==React DOM==做管理。

• 依照不同的需求可以建立多个root DOM node，分别管理。

const element = <p>这是第一个显示的文字</p>
ReactDOM.render(element, document.getElementById('root'));

解释：

建立的一个新的变数我们称为element，我们需要显示的内容文字为这是第一个显示的文字
再来我们需要让他在ReactDOM管理的位置render(显示)内容，我要显示的内容是element,位置在document.getElementById('root')这里

更新被Render的 Element

当我们建立好一个element後他是==不可变的变数==，也就是不能改变他的attribute（属性）、与children(内容），element 所代表的是一个UI(固定的存在)。

• 所以若要在Render时更新，只能另外在建立一个新的element，并传入 ReacDOM.render()

React 只会更新必要的Element。
即便我们每秒建立一个element内容，但只有内容有更改的text node才会被React DOM更新。