zoukankan      html  css  js  c++  java
  • 元素渲染

    元素是构成REACT应用的最小砖块

    元素描述了你在屏幕上想看到的内容。

    const element =<h1>Hello,world</h1>;

    与浏览器的DOM元素不同,REACT元素是创建开销极小的普通对象。REACT DOM会负责更新DOM来与REACT元素保持一致。

    注意:

    你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我们会在下一个章节介绍组件。组件是由元素构成的。我们强烈建议你不要觉得繁琐而跳过本章节,应当深入阅读这一章节。

    将一个元素感染为DOM

    假设你的HTML文件某处有一个<div>;

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

    我们将其称为“根”DOM节点,因为该节点内的所有内容都将由REACT DOM管理。

    仅使用REACT构建的应用通常只有单一的根DOM节点。如果你在将REACT集成进一个已有应用,那么你可以在应用中包含任意多的独立根DOM节点。

    想要将一个REACT元素渲染到根DOM节点中,只需要它们一起传入ReactDOm.render():

    const element =<h1>Hello,world</h1>;
    ReactDOM.render(element,document.getElementById('root'));

    页面上会展示出“Hello,world”

    更新已渲染的元素

    REACT元素是不可变对象。一旦被创建,你就无法更改它子元素或着属性。一个元素就像电影的单贞:它代表了某个特定时刻的UI。

    根据我们已有的只是,更新Ui唯一的方式是创建一个全新的元素,并将其传入REACTDOM.render()。

    考虑一个计时器的例子:

    function tick() {
        const element=(
            <div>
                <h1>Hello,world!</h1>
                <h2>It is {new Date().toLocaleDateString()}.</h2>
            </div>
        );
        ReactDOM.render(element,document.getElementById('root'));
    }
    
    setInterval(tick,1000);

    这个例子会在setInterval()回调函数,每秒都调用ReactDOM.render()。

    注意:
    
    在实践中,大多数 React 应用只会调用一次 ReactDOM.render()。在下一个章节,我们将学习如何将这些代码封装到有状态组件中。
    
    我们建议你不要跳跃着阅读,因为每个话题都是紧密联系的。

    React只更新它需要更新的部分

    REACT DOM会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使DOM达到预期的状态。

    你可以使用浏览器的检查元素工具查看上一个例子来确认这一点。

     尽管没一秒我们都会新建一个描述整个UI树的元素,REACT DOM只会更新实际改变了的内容,也就是例子中的文本节点。

    根据我们的经验,考虑UI在任意给定时刻的状态,而不是随时间变化的过程,能够消灭一整类的BUG。

  • 相关阅读:
    wpf学习笔记StackPanel
    wpf学习笔记DockPanel
    wpf学习笔记Viewbox
    C#.NET 中的类型转换
    超简单U盘PE启动完全攻略(U盘上仅四个文件)
    Web 应用的 UML 建模与 .NET 框架开发
    100多个很有用的JavaScript函数以及基础写法大集合
    Asp.net(C#)显示所有缓存 清除所有缓存
    grub引导U盘(集成常用工具/深山红叶PE工具箱V30/完美者U盘维护系统V8.1)
    GRUB启动命令详解
  • 原文地址:https://www.cnblogs.com/landv/p/12000573.html
Copyright © 2011-2022 走看看