React之渲染元素

时间 2019-11-06

标签 react 渲染元素栏目 React 繁體版

原文原文链接

React-渲染元素

开场白

接着上一节JSX的讲解后：咱们大概清楚了如下几个事儿:javascript

知道JSX是个什么东东php

为何React要推荐使用JSXcss

以及JSX的一些基本语法。html

本篇文章谈一下React是怎么渲染元素的。java

元素

元素是React应用中的最小部件，正是由一个或多个元素构建出来了组件。
一个元素用于描述你将在屏幕上看到的内容，好比：react

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

渲染元素到DOM

根DOM节点

假设咱们的HTML文件中有这样的一个<div>:jquery

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

咱们称这是一个根DOM节点，该节点内的全部内容都是有React DOM管理git

注意

一个用React构建的应用程序一般只有一个根DOM节点。github
可是若是把这些应用程序整合到现有的app当中去，那么该app中就可能会包含多个相互独立的根DOM节点。babel

更新已渲染的元素

React元素是不可变的，一旦你建立了一个元素，就不能再修改其子元素或任何属性。
更新UI的惟一方法是建立一个新的元素，并将其传入到ReactDOM.render()方法。
来思考下时钟的例子,完整代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rendering-elements</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
    <script type="text/babel">
      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);
    </script>
</head>
<body>
<div id="root"></div>
</body>
</html>

以上代码，每隔1秒，就会经过setInterval()回调ReactDOM.render()方法来从新渲染元素。

注意:

实际上，大多数 React 应用只会调用 ReactDOM.render() 一次。在接下来的章节中，咱们将学习如何将这些代码封装到有状态的组件中。

React 只更新必须要更新的部分

React DOM 会将元素及其子元素与以前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态。
咱们对上一个例子进行检查来验证这一点:

从上图中咱们能够看出，即便咱们咱们每隔 1 秒都重建了整个元素, 但实际上 React DOM 只更新了修改过的文本节点。
本文作为本身增强记忆之篇，均参考自：
http://www.css88.com/react/do...，在此列出，你们共同窗习。

欢迎你们访问个人blog，有更精彩的文章吆！