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()方法來從新渲染元素。