[标准]再谈生命周期与自动化多次渲染

zhuanbike 2022-1-6 736

避免遗忘再添加一个生命周期样本:

import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component{
    constructor(props){
        super(props)
        //状态(数据)--》view
        //构造函数初始化数据,将需要改变的数据初始化到state中
        this.state = {
            time:new Date().toLocaleTimeString()
        }
        //console.log(this.state.time)
    }
    render(){
        //console.log("这是渲染函数")
        //this.state.time = new Date().toLocaleTimeString();
        return (
            <div>
                <h1>当前时间:{this.state.time}</h1>
            </div>
        )
    }
    //生命周期函数,组件渲染完成时的函数
    componentDidMount(){
        setInterval(()=>{
            console.log(this.state.time)
            //this.state.time = new Date().toLocaleTimeString(); //错误的方式
            //切勿直接修改state数据,直接state重新渲染内容,需要使用setState
            //通过this.setState修改完数据后,并不会立即修改DOM里面的内容,react会在,
            //这个函数内容所有设置状态改变后,统一对比虚拟DOM对象,然后在统一修改,提升性能。
            //小程序也是也是借鉴REACT状态管理操作
            this.setState({
                time:new Date().toLocaleTimeString()
            })
            
        },1000)
    }
}
ReactDOM.render(
    <Clock />,
    document.querySelector('#root')
)


最新回复 (0)
发新帖