类组件的数据来源有两个地方 父组件传过来的属性,自己内部的状态
属性和状态发生变化后组件都会更新,视图都会渲染
** 1 定义状态的第一种方式 在构造函数中**
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component{
constructor(props){
super(props);
this.state = {date:new Date()};//唯一可以给状态直接赋值的地方就是构造函数
}
//组件挂载完成
componentDidMount(){
this.timer = setInterval(this.tick,1000);
}
//组件将要卸载
componentWillUnmount(){
clearInterval(this.timer)
}
//类的属性 这样写法函数里的this永远指向组件的实例
tick = ()=>{
//Do not mutate state directly. Use setState().
//this.state = {date:new Date()};
//this.state.date = new Date();
//setState可以修改状态,另外可以让组件刷新
this.setState({date:new Date()});
//this.state.date = new Date();
//this.setState({});
}
render(){
return (
<div>
<h1>Hello World</h1>
<h2>现在时间是:{this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
ReactDOM.render(<Clock/>,document.getElementById('root'));
2 定义状态的第二种方式 事件处理函数中
state的更新可能是异步的 出于性能考虑react可能会把多个setstate合并成同一个调用
如何判断它是同步的还是异步的,是不是批量处理 一个原则就是React能管控的地方,批量的,异步的(事件处理函数,生命周期函数)。不能管控的地方就是同步的 非批量(setInterval setTimeout)
在事件处理函数中,setState的调用会批量执行
在事件处理函数,setState并不不会修改this.state,等事件处理函数结束后再进行更新
在其他react 不能管控的地方,就是同步执行的(如定时器内)