元素渲染

元素渲染

  • 元素是构成React应用的最小砖块
    const element = <h1>Hello, world</h1>;
    
  • 与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

将一个元素渲染为DOM

  • 该结点内的所有内容都将由React DOM管理
  • 仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用,那么你可以在应用中包含任意多的独立根 DOM 节点。
    <div id="root"></div>
    

  • 使用render()进行渲染
    const element = <h1>Hello, world</h1>;
    ReactDOM.render(element, document.getElementById('root'));
    

更新已渲染的元素

  • React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性
  • 更新 UI 唯一的方式是创建一个全新的元素,并将其传入 ReactDOM.render()。
  • 计时器案例:
    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只更新它需要更新的部分
    在这里插入图片描述
    尽管每一秒我们都会新建一个描述整个 UI 树的元素,React DOM 只会更新实际改变了的内容,也就是例子中的文本节点。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页