React元素渲染

2020-04-13

React元素渲染

元素是构成React应用得最小单位

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

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

将元素渲染到DOM中

首先我们在HTML页面中添加一个id="example"的<div>

1	<div id="example"></div>

在此div中的所有内容都将由React DOM来管理，所以我们将其成为”根“DOM节点
我们用React开发应用时一般只会定义一个根节点，但如果你是一个在已有的项目中引用React的话，你可能会需要在不同的部分单独定义React根节点。
要将React元素渲染到根DOM节点中，我们通过把他们都传递给ReactDOM.render()的方法来将其渲染到页面中：

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

更新元素渲染

React元素都是不可变的。当元素被创建之后，你是无法改变其内容或者属性的
目前更新界面的唯一办法激素hi创建一个新的元素，然后将他传入ReactDOM.render()方法：
来看一下这个计时器的例子：

function tick(){
    const element = (
        <div>
            <h1>Hello,world!</h1>
            <h2>现在时{new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
}
setInterval(tick,1000);

以上实例通过setinterval()方法。
我们可以将要展示的部分封装起来，以下实例用一个函数来表示：

function Clock(props){
    return (
        <div>
            <h1>Hello,world!</h1>
            <h2>现在时{props.date.toLocaleTimeString()}.</h2>
        </div>
    );
}
function tick(){
    ReactDOM.render(
        <Clock date={new Data()} />,
        document.getElementById('example')
    );
}

setInterval(tick,1000);

除了函数外我们还可以创建一个React.Component的ES6类，该类封装了要展示的元素,需要注意的是render()方法中，需要使用this.props替代props:
React只会更新必要的部分

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('example')
    );
}

setInterval(tick,1000);

指的主义的是React DOM首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。