React---状态和生命周期

概述React利用状态来更新UI

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

function tick(){
  const element=(
    

      
时间：{new Date().toLocaleTimeString()}
    
  );
  ReactDOM.render(
   element,
   document.getElementById('root')
  );
}
setInterval(tick,1000);

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

function Clock(props){
  return(
    

      
时间：{props.date.toLocaleTimeString()}
    
    );
  
}
function tick(){
  ReactDOM.render(
   ,
   document.getElementById('root')
  );
}
setInterval(tick,1000);

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

class Clock extends React.Component{
  render(){
   return (
    

      
时间：{this.props.date.toLocaleTimeString()}
    
     );
  }
}

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

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

      
时间：{this.state.date.toLocaleTimeString()}
    
     );
  }
}
function tick(){
  ReactDOM.render(
   ,
   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 (
    

      
时间：{this.state.date.toLocaleTimeString()}
    
     );
  }
  //渲染到界面后调用，装载
  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(
   ,
   document.getElementById('root')
);

总结调用过程：

1.通过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注意三件事情。