第二章 react前端开发-元素渲染

元素是React 应用的最小单位，用于描述屏幕上输出的内容

如下就是一个元素

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

你可以把它放在页面的任意位置，接下来演示如何进行元素渲染。

2.1 元素渲染

第一步. 在index.html页面添加一个div标签

<div id="example1"></div>

如下图所示：

第二步. 在index.js中添加下面的代码

import React from "react"
import ReactDom from "react-dom"

function Hello(props) {
    return <h1>这次不用Hello world</h1>
}

ReactDom.render(<Hello />, document.getElementById("example1"))

如下图所示：

第三步. 查看结果

代码保存后浏览器会自动刷新，如下所示：

  

这样第一个元素渲染的例子就演示完了，通过上面的例子可以发现：

用 React 开发应用时一般只会定义一个根节点

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

2.2 更新元素渲染

React 元素都是不可变的。当元素被创建之后，是无法改变其内容或属性的。

更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法

如下所示是一个计时器的例子

代码：

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

 查看浏览器，可以发现页面上的时间会动态变化

以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

也可以将要展示的部分封装起来，如下所示：

import React from "react"
import ReactDOM from "react-dom"

function Clock(props) {
    return (
        <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
        </div>
    );
}

function tick() {
    ReactDOM.render(
        //date当做参数传递到了Clock函数中
        <Clock date={new Date()} />,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);

除了函数外还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，要使用 this.props 替换 props，如下所示：

import React from "react"
import ReactDOM from "react-dom"
class Clock extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

function tick() {
    ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);