(React入门)生命周期

哚啦A孟

已于 2022-09-22 17:31:22 修改

阅读量315

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-09-21 16:00:10 首次发布

本文链接：https://blog.youkuaiyun.com/linfeng_meng/article/details/126957257

版权

React 专栏收录该内容

15 篇文章

订阅专栏

不建议使用的

UNSAFE_componentWillReceiveProps(nextProps)
UNSAFE_componentWillMount()
UNSAFE_componentWillUpdate(nextProps, nextState)

初始化

初始化阶段生命周期执行顺序

componentWillMount
render
componentDidMount

import React, { Component } from 'react'
export default class App extends Component {
    componentWillMount(){
        console.log("will mount")
    }
    componentDidMount(){
        console.log("did mount")
        // 数据请求axios
        // 订阅函数调用
        // setInterval
        // 基于创建的完的dom进行 初始化，，，，，，BetterScroll
    }
    render() {
        console.log("render")
        return (
            <div></div>
        )
    }
}
//打印结果
//will mount
//render
//did mount

componentWillMount

注意：16.2版本之后使用UNSAFE_componentWillMount
componentWillMount 函数将会在未来 v17.0 版本中被移除

此阶段只会执行一次,代表组件即将要挂载，但是还没有挂载，在组件render之前调用。此时可以操作this.state,但是不可以获取到dom

render

自动执行，只能访问this.props和this.state,不允许修改state和DOM输出

componentDidMount

只会执行一次，成功render渲染完成真是DOM之后出发，可以执行DOM操作
一般为了提前 setState ，防止二次渲染（第一次是空state渲染，第二次外部数据渲染），经常在 componentWillMount 生命周期请求数据。
事件监听最好在 componentDidMount 来实现，因为只有在调用 componentDidMount 的时候，React才会确保 componentWillUnmount 回调能顺利执行，防止内存泄漏。

运行中

运行中化阶段生命周期执行顺序

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        name: "react"
    }
    handleClick(){
        this.setState({
            name:"vue"
        })
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log("should update",nextProps,nextState);
        return true
    }
    componentWillUpdate(nextProps, nextState) {
        console.log("will update", nextProps, nextState);
    }
    componentDidUpdate(preProps,preState) {
        console.log("did update",preProps, preState,);
    }
    render() {
        console.log("render");
        return (
            <div>
                <div name={this.state.name}>{this.state.name}</div>
                <button onClick={()=>{this.handleClick()}}>click</button>
            </div>
        )
    }
}
//打印结果
//should update
//will update
//render
//did update

componentWillReceiveProps

注意：16.2版本之后使用UNSAFE_componentWillReceiveProps
componentWillReceiveProps 函数将会在未来版本中被移除

class Child extends Component {
    state = {
        title: ""
    }
    componentWillReceiveProps(nextProps) {
        console.log("componentWillReceiveProps", nextProps)

        // 最先获得父组件传来的属性， 可以利用属性进行ajax或者逻辑处理。
        // 把属性转化成孩子自己的状态。

        this.setState({
            title: nextProps.text
        })
    }
}

export default class App extends Component {
    state = {
        text: "react"
    }
    render() {
        return (
            <div>
                {
                    this.state.text
                }
                <button onClick={() => {
                    this.setState({
                        text: "vue"
                    })
                }}>click</button>
                <Child text={this.state.text} />
            </div>
        )
    }
}

使用场景

在这个生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。
可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。
componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染

shouldComponentUpdate

在react开发中，经常要对数据state状态进行改变，但是这种方式每当setState的时候都会将所有的组件重新渲染一遍，这样就会有重复渲染render的问题，会造成不必要的性能开销
shouldComponentUpdate(nextProps,nextState)

nextProps: 表示下一个props。
nextState: 表示下一个state的值。

使用shouldComponentUpdate就是为了减少render不必要的渲染。返回布尔值，然后做Virtual DOM比较，并得出是否需要做真实DOM更新。

应用场景

我们可以通过shouldComponentUpdate生命周期函数来来判断当前组件所在的props、state和context发生改变时，当前组件还是否需要进行更新操作(可以认为为当前组件自定义一个diff算法)，以达到性能的最大优化。

import React, { Component } from 'react'
export default class App extends Component {
    state = {
        name: "react"
    }
    handleClick(){
        this.setState({
            name:"vue"
        })
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log("should update",nextProps,nextState);
        if(JSON.stringify(this.state)!== JSON.stringify(nextState)){
            return true
        }
        return false
    }
    render() {
        console.log("render");
        return (
            <div>
                <div name={this.state.name}>{this.state.name}</div>
                <button onClick={()=>{this.handleClick()}}>click</button>
            </div>
        )
    }
}

大部分情况下，你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较，所以当 props 或者 state 某种程度是可变的话（如数组元素、对象属性），浅比较会有遗漏，那你就不能使用它了。当数据结构很复杂时，情况会变得麻烦。

示例

1.输入框change时，current属性更新
2.生命周期函数shouldComponentUpdate触发
3.比较current和index
4.返回true或者false是否执行render重新渲染dom

class Box extends Component {
    shouldComponentUpdate(nextProps) {
        if (this.props.current === this.props.index || nextProps.current === nextProps.index) {
            return true
        }
        return false
    }
    render() {
        console.log("render")
        return <div style={{
            width: "100px",
            height: "100px",
            border: this.props.current === this.props.index ? '1px solid red' : '1px solid gray',
            margin: "10px",
            float: 'left'
        }}>
        </div>
    }
}
export default class App extends Component {
    state = {
        list: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
        current: 0
    }
    render() {
        return (
            <div>
                <input type="number" onChange={(evt) => {
                    console.log(evt.target.value)
                    this.setState({
                        current: Number(evt.target.value)
                    })
                }} value={this.state.current} />

                <div style={{ overflow: "hidden" }}>
                    {
                        this.state.list.map((item, index) =>
                            <Box key={item} current={this.state.current} index={index} />
                        )
                    }
                </div>
            </div>
        )
    }
}

componentWillUpdate

注意：16.2版本之后使用UNSAFE_componentWillUpdate
componentWillUpdate 函数将会在未来版本中被移除

componentWillUpdate(nextProps,nextState)

nextProps: 表示下一个props。
nextState: 表示下一个state的值。

在这个方法中你不可以使用setState，否则会立即触发另一轮的渲染并且又再一次调用componentWillUpdate，陷入无限循环中。

render

自动执行，只能访问this.props和this.state,不允许修改state和DOM输出

componentDidUpdate

componentDidUpdate会在render执行完成之后执行，当我们遇到需要在页面加载完成之后，执行的方法就可以使用componentDidUpdate

使用场景

比如说我们实现将tree组件加载完成后自动全部展开的功能，这个时候我们就会考虑到这个全部展开的逻辑写在什么地方，如果我们在tree没有加载完成的时候，去操作他，页面肯定会找不到相应的数据报错，这个时候我们就可以使用componentDidUpdate
componentDidUpdate(prevProps, prevState)

nextProps: 表示上一个props。
nextState: 表示上一个state的值。

constructor(props) {
    super(props);
    this.state = {
      default: true,
    }
  }
componentDidUpdate() {
    if (this.state.default) {
      this.onAllExpand('全部展开') // 展开tree逻辑
      this.setState({ default: false })
    }
  }