React---状态和生命周期

概述React利用状态来更新UI

1.还记得前一章讲过利用setInterval函数实现实时钟效果

function tick(){  const element=(    <div>      <h1>时间：{new Date().toLocaleTimeString()}</h1>    </div>  );  ReactDOM.render(   element,   document.getElementById('root')  );}setInterval(tick,1000);

总结:需要借助setInterval实现，如果利用自身的状态实现这个效果
2.将上面进行拆分，功能

function Clock(props){  return(    <div>      <h1>时间：{props.date.toLocaleTimeString()}</h1>    </div>    );  }function tick(){  ReactDOM.render(   <Clock date={new Date()}/>,   document.getElementById('root')  );}setInterval(tick,1000);

3.转换成ES6 class，因为只有在class才用新的特性

class Clock extends React.Component{  render(){   return (    <div>      <h1>时间：{this.props.date.toLocaleTimeString()}</h1>    </div>     );  }}

4.增加一个constructor（）构造方法 用来初始化一些参数，例如这里时间

class Clock extends React.Component{  //增加一个构造方法，这里就是传入的props对象  constructor(props){    //调用父的构造方法，这说明它还有父进行封装 与java类似    super(props);    //发现state没有声明也可以用，而且数据json格式    this.state={date:new Date()};  }  render(){   return (    <div>      <h1>时间：{this.state.date.toLocaleTimeString()}</h1>    </div>     );  }}function tick(){  ReactDOM.render(   <Clock/>,   document.getElementById('root')  );}setInterval(tick,1000);

5.为Clock增加生命周期

class Clock extends React.Component{  //增加一个构造方法，这里就是传入的props对象  constructor(props){    //调用父的构造方法，这说明它还有父进行封装 与java类似    super(props);    //发现state没有声明（说明内置声明）也可以用，而且数据json格式,state不能写其他单词    this.state={date:new Date()};  }    render(){   return (    <div>      <h1>时间：{this.state.date.toLocaleTimeString()}</h1>    </div>     );  }  //渲染到界面后调用，装载  componentDidMount (){

    this.threadId=setInterval(      //()=>是箭头函数表示调用tick()方法，如果直接写tick()没有作用      ()=>this.tick(),1000    );    }  //Clock被移除时候，去掉定时器，卸载  componentWillUnmount(){    clearInterval(this.threadId);  }  tick(){    //类似java生成set方法set+字段首字母大写    this.setState({date:new Date()});  }};ReactDOM.render(   <Clock/>,   document.getElementById('root'));

总结调用过程：

1.<Clock/>通过ReactDOM.render()去掉用 constructor（） 初始化date字段的值为当前时间

2.调用render()方法进行渲染展示

3.调用componentDidMount()表示设置定时器，每一秒调用本方法tick()

4.tick()有设置（state）状态改变，只要state改变，它会自动调用render()方法再次渲染展示

5.如果Clock组件被移除了，定时任务也需要卸载，也就调用componentWillUnmount()方法

6.正确使用state（状态）（必知三件事情）

   1.不要直接修改状态

   举例子：这将不会重新渲染

    // 错误的写法

this.state.comment='Hello';

//正确写法 使用setState()

this.setState({comment:'Hello'});

注意：（=）赋值只有在constructor进行

2.状态更新可能异步的

// 错误写法，this.state 和 this.props 是异步的

this.setState({counter:this.state.counter+this.props.increment,});

//正确的方法就是通过函数控制，这里使用箭头函数

this.setState((prevState,props)=>({counter:prevState.counter+props.increment}));

//如果使用一般函数写法

this.setState(function(prevState,props){return{counter:prevState.counter+props.increment};});

3.状态更新是混合的，可以单独更新某个变量而不影响其他变量

constructor(props){super(props);this.state={posts:[],comments:[]};}

 

componentDidMount(){fetchPosts().then(response=>{this.setState({posts:response.posts});});  

fetchComments().then(response=>{this.setState({comments:response.comments});});}

可以看出可以单独更新posts和comments的值

总结：

  主要是state和class的特性constructor()、componentDidMount()、componentWillUmount()

  state注意三件事情。