React---状态和生命周期

最新推荐文章于 2025-07-19 20:00:00 发布

原创最新推荐文章于 2025-07-19 20:00:00 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #React #React 前端框架 JSX #state #生命周期

React 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何在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()