侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

react-常用生命周期

woku
2022-08-13 / 0 评论 / 0 点赞 / 58 阅读 / 3,156 字
  • 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
  • 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
  • 只有 类组件 才有生命周期。

整体的生命周期

具体链接可参考 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
image.png
组件的生命周期有3个主要的阶段

  1. 挂载阶段
  2. 更新阶段
  3. 销毁阶段

挂载阶段

执行时机:组件创建时(页面加载时)
执行顺序:

钩子 函数触发时机作用
constructor组件挂载前1. 初始化state  2. 事件处理函数绑定实例等
render每次组件渲染都会触发渲染UI(注意: 不能调用setState()
componentDidMount组件挂载(完成DOM渲染)后1. 发送网络请求   2.DOM操作

constructor

const { Component } = require("react");

class App extends Component {
  constructor(props) {
    super(props)
    console.log('我在组件挂载前执行')
    this.state = {
      name: 'wyg'
    }
    this.handleClick = this.handleClick.bind(this)
  }
  render() {
    return (
      <div>我是app组件
        <p>{ this.state.name }</p>
        <button onClick={this.handleClick}>点击</button>
      </div>
    )
  }
  handleClick() {
    console.log(this)
    console.log('我被点击了')
  }
}

export default App

在constructor中不要调用 setState() 方法。使用this.state来初始化数据。
要避免在构造函数中引入任何副作用或订阅
**避免将 props 的值复制给 state!比如在constructor中写 **this.state =
;

render

在组件挂载阶段和组件更新阶段视图都需要重新渲染,这意味着render函数在挂载阶段和更新阶段都会执行。

const { Component } = require("react");

class App extends Component {
  constructor(props) {
    super(props)
    console.log('我在组件挂载前执行')
  }
  render() {
    console.log('我在组件渲染时执行')
    return (
      <div>我是app组件
      </div>
    )
  }
}

export default App

render函数应该为一个纯函数,在不改变state的情况下,相同的输入有相同的输出。
render函数中不能操作DOM元素,应在componentDidMount()或其他生命周期方法中执行你的操作

componentDidMount

const { Component } = require("react");

class App extends Component {
  constructor(props) {
    super(props)
    console.log('我在组件挂载前执行')
  }
  render() {
    console.log('我在组件渲染时执行')
    return (
      <div>我是app组件
      </div>
    )
  }
  componentDidMount() {
    // 获取DOM
    // 发送网络请求
    console.log('我在组件挂载后立即执行')
  }
}

export default App

更新阶段

  • 执行时机:1. setState() 2. forceUpdate() 3. 组件接收到新的props
  • 说明:以上三者任意一种变化,组件就会重新渲染
  • 执行顺序
钩子函数触发时机作用
render每次组件渲染都会触发渲染UI(与 挂载阶段 是同一个render)
componentDidUpdate组件更新(完成DOM渲染)后DOM操作,可以获取到更新后的DOM内容,不要调用setState
const { Component } = require("react");

class App extends Component {
  state = {
    name: 'wyg'
  }
  render() {
    console.log('我在组件渲染时执行')
    return (
      <div>我是app组件
        <button onClick={this.handleClick}>改变数据</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      name: 'woku'
    })
  }
  componentDidUpdate() {
    console.log('我在组件更新后立即执行')
  }
}
// handleClick事件函数触发后依次打印
// 我在组件渲染时执行   我在组件更新后立即执行

export default App
const { Component } = require("react");

class App extends Component {
  state = {
    name: 'wyg'
  }
  render() {
    console.log('我在组件渲染时执行')
    return (
      <div>我是app组件
        <button onClick={this.handleClick}>改变数据</button>
      </div>
    )
  }
  handleClick = () => {
   this.state.name = 'woku'
   this.forceUpdate()
  }
  componentDidUpdate() {
    console.log('我在组件更新后立即执行')
  }
}

export default App

forceUpdate() 不建议使用,建议使用this.setState修改数据

import Son from "./components/Son";
const { Component } = require("react");
class App extends Component {
  state = {
    name: 'wyg'
  }
  render() {
    return (
      <div>我是app组件
        <Son name={this.state.name}></Son>
        <button onClick={this.handleClick}>改变数据</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      name: 'woku'
    })
  }
}

export default App
import { Component } from "react";
class Son extends Component {
    render() {
      console.log('我是子组件,我在组件渲染时执行')
        return (
          <div>我是子组件
            <p>{ this.props.name }</p>
          </div>
        )
    }
    componentDidUpdate() {
      console.log('我是子组件,我在组件更新后立即执行')
    }
}

export default Son

卸载阶段

  • 执行时机:组件从页面中消失
钩子函数触发时机作用
componentWillUnmount组件卸载(从页面中消失)执行清理工作(比如:清理定时器等)

image.png

0

评论区