React从入门到架构（6）--基于Antd项目，熟悉React的生命周期

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在完成对React的生命周期的修改后，我们看一下React的主要生命周期：

1. 在用户输入URL后，系统从App.jsx第一次进行装载，在此过程中：

porps由父组件，传给子组件；
state在界面中显示的是默认值。

2. 在界面中，我们使用setState()函数进行更新时：

state更新为setState()中设置的值；
props通过父组件，把修改后的新值nextProps（如果修改了的话），传递给子组件。

在这些过程进行中，我们如果想加一些代码，如对新的数值进行过滤和判断，或者其他的一些处理，我们就要使用React提供的一些函数：

componentWillMount();
componentDidMount();
componentWillUpdate();
componentDidUpdate();
componentWillReceiveProps();

我们还是以计算器为例，通过console.log()函数的打印内容，看看这些函数的执行的时间。

TablePage.jsx

import React, { Component } from 'react'
import { Button, Row, Col } from 'antd'
export default class componentName extends Component {
  constructor() {
    super();
    this.state = {
      num: 0
    }
  }
  componentWillMount = () => {
    console.log("---componentWillMount---")
  }
  componentDidMount = () => {
    console.log("---componentDidMount---")
  }
  componentWillUpdate = (nextProps, nextState) => {
    console.log("---componentWillUpdate---, nextProps and nextState is ", nextProps, nextState)
  }
  componentDidUpdate = (prevProps, prevState) => {
   console.log("---componentDidUpdate---, prevProps and prevState is ", prevProps, prevState)
  }
  componentWillReceiveProps(nextProps) {
    console.log("---componentWillReceiveProps---", nextProps)
  }
  handleClick = () => {
    this.setState({
      num: this.state.num+1
    })
  }
  render() {
    console.log("---rendening---")
    return (
      <div>
        <Row>
          <Col span={24}>
          <p></p>
            <p>My num is {this.state.num}</p>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Button onClick={this.handleClick.bind(this)}>num++</Button>
          </Col>
        </Row>
      </div>
    )
  }
}

我们打开浏览器的开发者工具：

当界面加载时，我们看一下这个执行的顺序：

顺序如下：

componentWillMount();
componentDidMount();
componentWillReceiveProps();
componentWillUpdate();
componentDidUpdate();

当我们点击按钮时，函数的执行周期如下：

下面我们编写一个工资计算器，来仔细的查看一下这个过程：

  • 首先，我们在TablePage.jsx定义两个Input组件，分别为：月薪-monthlySalary和奖金-bonus输入内容后，实时更新state；

  • 其次，我们建立子组件TotalSalaryPage.jsx，将这两个值，作为props，传入子组件中，进行结果TotalSalary的计算：

TablePage.jsx

import React, { Component } from 'react'
import { Button, Row, Col, Input } from 'antd'
import TotalSalaryPage from './TotalSalaryPage'
export default class componentName extends Component {
  constructor() {
    super();
    this.state = {
      monthlySalary: 0,
      bonus: 0
    }
  }
  handleClick = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
  handleSalaryChange = (e) => {
    this.setState({ monthlySalary: e.target.value })
  }
  handleBonusChange = (e) => {
    this.setState({ bonus: e.target.value })
  }
  render() {
    return (
      <div>
        <Row>
          <Col span={12}>
            monthlySalary is : <Input value={this.state.monthlySalary} onChange={this.handleSalaryChange.bind(this)} />
          </Col>
          <Col span={12}>
            bonus is : <Input value={this.state.bonus} onChange={this.handleBonusChange.bind(this)} />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <TotalSalaryPage
              monthlySalary={this.state.monthlySalary}
              bonus={this.state.bonus}
            />
          </Col>
        </Row>
      </div>
    )
  }
}

TotalSalaryPage.jsx

import React, { Component } from 'react'
export default class TotalSalaryPage extends Component {
  render() {
    return (
      <div>
        TotalSalary is : {parseInt(this.props.monthlySalary) * 12 + parseInt(this.props.bonus) }
      </div>
    )
  }
}

感兴趣的同学，可以自己打印生命周期的几个函数，看看执行过程，在此就不多作讲解啦～

代码在GitHub上有：
https://github.com/Joker0219/Javascript/tree/master/React/demo06

以上是 React从入门到架构（6）--基于Antd项目，熟悉React的生命周期 的全部内容， 来源链接： utcz.com/z/383469.html

回到顶部