React 元素渲染

React 学习：元素渲染

• 元素是构成 React 应用的最小砖块，它描述了你在屏幕上想看到的内容。const element =

  Hello, world

  ;
• 与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
• React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。但是将元素或属性封装到有状态组件中，就可以实现更新渲染。
• React 只更新它需要更新的部分，即 React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
• 注意：你可能会将元素与另一个被熟知的概念——“组件”混淆起来，组件是由元素构成的。

<div id="root">div>

// 定义元素
const element = <h1>Hello, world</h1>;
// 渲染元素 --> 将 element 渲染到 id为root 的根节点里去
// 将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()
ReactDOM.render(element, document.getElementById('root'));

// 将多个元素包裹，可以实现同时渲染多个元素
const more = (
  <div>
    <h1>Hello,Peppa</h1>
    <h2>Hello,George</h2>
  </div>
);
ReactDOM.render(more, document.getElementById('root'));