react02_元素渲染

react元素渲染

一、更新元素渲染

react元素都是不可变的，当元素被创建渲染后，就无法改变它的属性或内容，更新的唯一方法就是创建一个新的元素，将其传入**ReactDOM.render()**方法，将内容再次渲染。

例如网页中的计时器，每秒更新一次当前时间：

function timer() {
    const ele = (
        <div>
            <h2>当前时间：{new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        ele,
        document.getElementById('react_test')
    );
}
setInterval(timer, 1000);

1.函数组件

在上面的代码中，将所有的内容都写在timer函数中，每次渲染都要将其全部组合在一起

可以将要更新的部分封装起来，形成一个**函数组件**，每次更新时去渲染这个组件就行

//函数组件，函数名首字母必须大写
//props为参数
function Clock(props) {

    //return的内容即为要渲染的内容
    return (
        
        //从props中的date属性中获取并转换为当地时间
        <h2>当前时间：{props.date.toLocaleTimeString()}.</h2>
    );    
}

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

setInterval(timer, 1000);

2.类组件

也可以创建一个继承了**React.Component的es6类，作为类组件**，封装要更新的内容，每次更新都渲染这个组件

爸爸把数据给儿子：此时类名为一个组件，而

标签相当于该组件的子组件，所以此时

中的props要变为this.props，因为props的来源是父组件，

//类组件，类名首字母必须大写
class Clock extends React.Component {
    //render渲染方法
    render() {

        //return的内容即为要渲染的内容
        return (
            
            //从父组件传来的props中的date属性中获取并转换为当地时间
            <h2>当前时间：{this.props.date.toLocaleTimeString()}.</h2>
        );
    }
}

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

setInterval(timer, 1000);

注意：React只会更新必要的部分

每次渲染之前，ReactDOM会先比较元素内容先后的不同，渲染时只改变更新的部分