react学习第三天（一）

react状态管理

• react中的 state 相当于vue中的 data ，但是使用方式和vue不一致。
• 修改state的正确方式，调用setState,切勿重新修改数据

例： 每隔1行输出当前时间

import React from 'react';
import ReactDOM from 'react-dom';
import'./App.css';

class Clock extends React.Component{
  constructor(props){
    super(props)
    //状态（数据）
    this.state = {  //构造函数初始化数据，将需要改变的数据初始化到state中
      time:new Date().toLocaleTimeString()
    }
  }
  render(){
    return (
      <div>
        <h1>当前时间：{this.state.time}</h1>
      </div>
    )
  }
  //生命周期函数,渲染组件完成时的函数
  componentDidMount(){
    setInterval(()=>{
      //this.state.time = new Date().toLocaleTimeString();//错误的方式
      this.setState({  //修改state的正确方式，调用setState,切勿重新修改数据，
        time: new Date().toLocaleTimeString()
      })
    },1000)
  }
}
ReactDOM.render(
  <Clock/>,
  document.querySelector('#root')
)

注意： 通过 this.setState 修改完数据后，并不会立即修改dom里面的内容，react会在这个函数内容所有设置状态改变后，统一对比虚拟dom对象，然后在统一修改，提升性能。