03. react 初次见面 - HelloWorld开发者社区

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

1、将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="root" 的

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

在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称之为 “根” DOM 节点。

我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

Tips：

    新建 React 项目后，在 public 文件夹下面的 index 中有一个
。

同时，还看到  ，查阅了一下 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')

);

2、更新元素渲染

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);

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