React中的state和生命周期——知识梳理

《React中的state和生命周期——知识梳理》

我们来看一个例子:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';


function App() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  return (
    ReactDOM.render(
      element,
      document.getElementById('root')
    )
  )
}
setInterval(App, 1000); // 设置自己的计时器并每秒更新一次。

export default App;


setInterval(App, 1000);设置自己的计时器并每秒更新一次。

封装组件

封装真正可复用的 Clock 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  )

}

function App() {

  return (
    ReactDOM.render(
      <Clock date={new Date()} />, // date是props的属性
      document.getElementById('root')
    )
  )
}
setInterval(App, 1000);

export default App;


把计时器写到组件里面

我们需要,将函数组件转换成 class 组件,在 Clock 组件中添加 “state” 来实现这个功能。

State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件。

以下是Clock类,而不是函数。

class Clock extends React.Component{
  render(){
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

向 class 组件中添加局部的 state

把把 render() 方法中的 this.props.date 替换成 this.state.date ,然后添加一个 class 构造函数,然后在该函数中为 this.state 赋初值,将 props 传递到父类的构造函数中。

例如:

将生命周期方法添加到 Class 中

生命周期就是上面例子中的每个一秒种刷新的功能。上面例子的生命周期就是一秒钟。把一秒钟也写到组件里面去。

我们可以为 class 组件声明一些特殊的方法,当组件挂载或卸载时就会去执行这些方法,这些方法叫做“生命周期方法”。

例如:

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行,所以,最好在这里设置计时器:

我们会在 componentWillUnmount() 生命周期方法中清除计时器:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => { // 定义一个计时器
      this.tick();
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID) // 清除计时器
  }
  tick() {
    this.setState({
      data: new Date()
    })
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }

}

function App() {
  return (
    ReactDOM.render(
      <Clock />, 
      document.getElementById('root')
    )
  )
}

export default App;


点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注