03. react 初次见面---元素渲染

    与浏览器的 DOM 元素不一样，React 当中的元素事实上是普通的对象，React DOM 能够确保 浏览器 DOM 的数据内容与 React 元素保持一致。

一、将元素渲染到 DOM 中

    首先咱们在一个 HTML 页面中添加一个 id="root" 的 <div>:

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

    在此 div 中的全部内容都将由 React DOM 来管理，因此咱们将其称之为 “根” DOM 节点。

    咱们用React 开发应用时通常只会定义一个根节点。但若是你是在一个已有的项目当中引入 React 的话，你可能会须要在不一样的部分单独定义 React 根节点。

Tips：

    新建 React 项目后，在 public 文件夹下面的 index 中有一个 <div id="root"></div> 。

    同时，还看到 <noscript>You need to enable JavaScript to run this app.</noscript> ，查阅了一下 noscript 标签，大有收获：

    nosecrpt 标签是一个至关古老的标签，其被引入的最初目的是帮助老旧浏览器的平滑升级更替，由于早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素能够包含任何 HTML 元素。不过到了如今，浏览器不支持 Javascript 的事情应该已经不会出现了，可是用户也可能由于各类缘由而禁用了 Javascript。如节省流量，延长电池使用时间，或者是不但愿本身的隐私被各种统计/追踪脚本泄露等。

    要将 React 元素渲染到根 DOM 节点中，咱们经过把它们都传递给 ReactDom.render( ) 的方法来将其渲染到页面上：

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

页面上会展现出 “Hello World” 字样。

Tips:

    新建 React 项目后，删除 src 下面的全部文件。而后，新建 index.js 和 index.css。在 index.js 中写入以下代码，跑起项目后刷新页面 会出现 Hello world :

import React from 'react';

import ReactDOM from 'react-dom';

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

ReactDOM.render(

element,

document.getElementById('root')

);

 

 二、更新元素渲染

    React 元素都是immutable 不可变的。当元素被建立以后，你是没法改变其内容或属性的。一个元素就好像是动画里的一帧，它表明应用界面在某一时间点的样子。

    根据咱们现阶段了解的有关 React 知识，更新界面的惟一办法是建立一个新的元素，而后将它传入 RreactDOM.render( )  方法：

    将前面写的 Hello world 中的 index.js的代码改成以下

import React from 'react';
import ReactDOM from 'react-dom';

function tick(){
  const element = (
    <div>
      <h1>Hello,world</h1>
      <h2>如今北京时间：{new Date().toLocaleTimeString()} </h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

    这就实现了页面时钟计时。