03. react 初次见面

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

1、将元素渲染到 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( ) 的方法来将其渲染到页面上：

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

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

Tips:

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

1import React from 'react';
2
3import ReactDOM from 'react-dom';
4
5const element = (<h1>Hello,world</h1>);
6
7ReactDOM.render(
8
9element,
10
11document.getElementById('root')
12
13);

 2、更新元素渲染

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

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

    将前面写的 Hello world 中的 index.js的代码改为如下

1import React from 'react';
2import ReactDOM from 'react-dom';
3
4function tick(){
5  const element = (
6    <div>
7      <h1>Hello,world</h1>
8      <h2>现在北京时间：{new Date().toLocaleTimeString()} </h2>
9    </div>
10  );
11  ReactDOM.render(
12    element,
13    document.getElementById('root')
14  );
15}
16
17setInterval(tick, 1000);

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