React---状态和生命周期

本文详细介绍了如何在React中使用状态(state)来更新UI,包括构造方法初始化状态、使用setState进行状态更新以及如何利用组件的生命周期方法实现定时更新。

概述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注意三件事情。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值