react笔记-02生命周期篇

最新推荐文章于 2024-08-30 15:48:49 发布
最新推荐文章于 2024-08-30 15:48:49 发布
阅读量847 收藏 8
点赞数 24
文章标签： react.js 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65519288/article/details/138478145
版权

react生命周期笔记

1. 旧版生命周期

在这里插入图片描述

  • constructor：构造器
  • componentWillMount：组件将要挂载的钩子
  • render：初始化渲染或更新渲染调用
  • componentDidMount：组件挂载完成的钩子
  • componentWillUnmount：组件将要卸载的钩子
  • componentWillReceiveProps：
  • shouldComponentUpdate：组件状态将要更新的钩子

返回值：true-更新，false-不更新（如果不写，react默认为true，为false底下的所以钩子都不会执行）

  • componentWillUpdate：组件将要更新的钩子
  • componentDidUpdate：组件更新完成的钩子
// 挂载组件
ReactDOM.render(<MyCompontent />, document.querySelector('#app'))
// 卸载组件
ReactDOM.unmountComponentAtNode(document.querySelector('#app'))

下面是具体使用：

class MyCompontent extends React.Component {
    // 构造器
    constructor(props) {
        console.log('constructor')
        super(props)
        // 初始化状态
        this.state = {
            count: 0
        }
    }

    death = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
    }

    // 组件将要挂载的钩子
    componentWillMount() {
        console.log('componentWillMount')
    }

    // 组件挂载完成的钩子
    componentDidMount() {
        console.log('componentDidMount')
    }

    // 组件将要卸载的钩子
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

    // 渲染
    render() {
        console.log('render')
        return (
            <div>
                <button onClick={ this.death }>卸载组件</button>
            </div>
        )
    }
}

ReactDOM.render(<MyCompontent />, document.querySelector('#app'))

控制台打印的结果：

在这里插入图片描述

在数据更新时有其他的生命周期：

在这里插入图片描述

路线2：setState()

class MyCompontent extends React.Component {
    // 构造器
    constructor(props) {
        console.log('constructor')
        super(props)
        // 初始化状态
        this.state = {
            count: 0
        }
    }

    add = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    death = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
    }

    // 组件将要挂载的钩子
    componentWillMount() {
        console.log('componentWillMount')
    }

    // 组件挂载完成的钩子
    componentDidMount() {
        console.log('componentDidMount')
    }

    // 组件将要卸载的钩子
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

    // 组件将要接受新的属性的钩子
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps')
    }

    // 组件状态将要更新的钩子
    // 返回值：true-更新，false-不更新（如果不写，react默认为true，为false底下的所以钩子都不会执行）
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate')
        return true
    }

    // 组件将要更新的钩子
    componentWillUpdate(nextProps, nextState) {
        console.log('componentWillUpdate')
    }

    // 组件更新完成的钩子
    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate')
    }

    // 渲染
    render() {
        console.log('render')
        const { count } = this.state
        return (
            <div>
                <h1>当前求和为：{ count }</h1>
                <button onClick={ this.add }>点击+1</button>
                <button onClick={ this.death }>卸载组件</button>
            </div>
        )
    }
}

ReactDOM.render(<MyCompontent />, document.querySelector('#app'))

当点击按钮+1时候，控制台会输出下面内容：

在这里插入图片描述

⚠️注意：但如果shouldComponentUpdate这个钩子的返回值为false旧不会进行下面的其他生命周期，类似于“阀门”一样

线路3：forceUpdate()强制更新

强制更新会绕过shouldComponentUpdate这个过程，进行页面更新

class MyCompontent extends React.Component {
    // 构造器
    constructor(props) {
        console.log('constructor')
        super(props)
        // 初始化状态
        this.state = {
            count: 0
        }
    }

    force = () => {
        this.forceUpdate()
    }

    // 组件状态将要更新的钩子
    // 返回值：true-更新，false-不更新（如果不写，react默认为true，为false底下的所以钩子都不会执行）
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate')
        return false
    }

    // 组件将要更新的钩子
    componentWillUpdate(nextProps, nextState) {
        console.log('componentWillUpdate')
    }

    // 组件更新完成的钩子
    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate')
    }

    // 渲染
    render() {
        console.log('render')
        const { count } = this.state
        return (
            <div>
                <h1>当前求和为：{ count }</h1>
                <button onClick={ this.force }>强制更新</button>
            </div>
        )
    }
}

ReactDOM.render(<MyCompontent />, document.querySelector('#app'))

即使shouldComponentUpdate为false，在force方法中this.forceUpdate()的会强制更新页面，控制台打印结果如下：

在这里插入图片描述

线路1：父子组件

其余钩子触发与线路2相同

class Father extends React.Component {
    state = {
        carName: '奔驰'
    }

    changeCar = () => {
        this.setState({
            carName: '宝马'
        })
    }

    render() {
        return (
            <div>
                <p>我是父组件</p>
                <button onClick={this.changeCar}>点击换车</button>
                <hr />
                <Son carName={this.state.carName} />
            </div>
        )
    }
}

class Son extends React.Component {
    // 组件将要接收新的props的钩子（第一次不算，需要props发生变化才会触发）
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps')
        console.log('父组件传过来的车是：', nextProps)
    }

    render() {
        return (
            <div>
                <p>我是子组件</p>
                <p>父组件传来的车是：{this.props.carName}</p>
            </div>
        )
    }
}

ReactDOM.render(<Father />, document.querySelector('#app'))

点击父组件按钮后，控制台打印结果为：

在这里插入图片描述

总结：

  1. 初始化阶段：由ReactDOM.render()触发（初次渲染）
    1. constructor()
    2. componentWillMount()
    3. render()
    4. componentDidMount() 常用，一般在这个钩子中做一些初始化的工作，例如：开启定时器，发送请求，订阅消息，类似于vue中的mounted
  2. 更新阶段：由组件内部this.setState()或父组件重新render触发
    1. shouldComponentUpdate() （强制更新不触发）
    2. componentWillUpdate()
    3. render()
    4. componentDidUpdate()
  3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount() 常用，一般在这个钩子中做一些收尾的事

2. 新版生命周期

在这里插入图片描述

区别：废弃了3个钩子，新增了两个钩子

1. 废弃：

有三个钩子改名了：（都加上UNSAFE_这个前缀），原来的这个三个被废弃了

  • componentWillMount => UNSAFE_componentWillMount
  • componentWillReceiveProps => UNSAFE_componentWillReceiveProps
  • componentWillUpdate => UNSAFE_componentWillUpdate

如何记忆：带有will的生命周期钩子，前面都要加UNSAFE_，除了componentWillUnmount这个最重要的不变

2. 新增：

  • getDerivedStateFromProps：（用的很少）

该钩子前面要加上static关键字，会有两个参数：参数1是组件传递的props，参数2是state的值（当state的值在任何时候都取决于props时候会用到这个钩子）

class MyCompontent extends React.Component {
    state = {
        count: 0
    }

    add = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    static getDerivedStateFromProps(props, state) {
        console.log(props, state);
        console.log('getDerivedStateFromProps')
        // 返回一个状态(state)或null
        return null
        // return props
    }

    render() {
        console.log('render')
        const { count } = this.state
        return (
            <div>
                <h1>当前求和为：{ count }</h1>
                <button onClick={ this.add }>点击+1</button>
            </div>
        )
    }
}

ReactDOM.render(<MyCompontent count={199} />, document.querySelector('#app'))
  1. 当return props点击按钮后，控制台输出的结果为：count值被冻结（因为该状态横跨挂载和更新）

在这里插入图片描述

  1. 当return null或return state点击按钮后，count会正常+1
  • getSnapshotBeforeUpdate：在更新之前获取快照，处于更新时render和componentDidUpdate之间

数据更新前调用该钩子，返回一个快照值，返回的任何值会作为参数传递给componentDidUpdate

class MyCompontent extends React.Component {
    state = {
        count: 0
    }

    add = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    // 返回一个快照值，返回的任何值会作为参数传递给componentDidUpdate
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate', prevProps, prevState)
        return prevState.count
        // return 100 如果返回100，那么componentDidUpdate的snapshot参数就一直是00
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        // prevProps 之前传递的props值
        // prevState 更新前的state值
        // snapshot 更新前的getSnapshotBeforeUpdate返回值
        console.log('componentDidUpdate', prevProps, prevState, snapshot)
    }

    render() {
        const { count } = this.state
        console.log('render')
        return (
            <div>
                <h1>当前求和为：{ count }</h1>
                <button onClick={ this.add }>点击+1</button>
            </div>
        )
    }
}

ReactDOM.render(<MyCompontent count={199} />, document.querySelector('#app'))

控制台打印结果如下：

在这里插入图片描述

小天呐
关注
  • 24
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习笔记02---生命周期函数
m0_55842907的博客
05-26 246
前言:在学习完了React中基础的JSX语法、基本的函数式组件和类式组件、三大属性state,props,refs之后。这次的博客内容主要是记录一下学习生命周期函数的相关内容，主要强调各生命周期函数的使用阶段和使用频率高低。React中的很多行为比如消息订阅与发布，异步ajax请求，设置定时等都需要在生命周期函数中进行。虽然React的生命周期函数众多，但是我们在日常开发中所用到的只有少数几个，掌握好常用的几个生命周期函数就足够了。 整体概括图 在React中的每一个组件实例的生命周期包括了初始化阶.
react笔记-05react扩展篇
m0_65519288的博客
06-20 759
对象式的setState是函数式的setState方式的简写方式（语法糖）。hooks
React学习笔记十-生命周期（旧）
zhangawei123的博客
06-14 965
此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第十篇，主要介绍React非常重要的组件的生命周期(旧)。
react-生命周期
weixin_57218747的博客
06-01 169
生命周期-核心 一 引出生命周期 需要理解的概念有： React生命周期的版本 React新旧生命周期的主要内容大体印象 生命周期钩子函数 一定执行的生命周期钩子函数 render生命周期钩子函数的必须调用与执行1次 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjNx3MAR-1622556427205)(http://qn.chinavanes.com/qiniu_picGo/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9
React读书笔记-组件的生命周期1
08-08
组件的生命周期方法是React提供的一系列特殊方法，用于在组件的不同阶段执行特定的操作。了解并熟练掌握这些生命周期方法对于优化性能和处理复杂逻辑至关重要。 首先，我们可以从组件的创建开始。在ES5语法中，我们...
React学习笔记---组件的生命周期
丑小鸭变黑天鹅的博客
12-20 215
组件的生命周期
React生命周期原理与用法踩坑笔记
11-21
然而，React 16.8引入了Hooks，如`useState`、`useEffect`等，它们提供了一种更简洁的方式来处理状态和副作用，减少了对生命周期方法的依赖。尽管如此，了解生命周期仍然有助于理解旧代码和在不支持Hooks的环境中...
React 笔记--API REFERENCE
xiangxiang07的博客
06-07 274
React 笔记--API REFERENCE
Netty Reactor面试连环问
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
08-27 662
笔者分别带入索引0、5、8，进行与运算时，真正参与的二进制永远是和永远是7以内的进制，得出的结果分别是0、5、0，永远不会越界，并且运算性能还能得到保证。中查看是否有继续的任务，如果有则查看它的到期时间，并基于这个时长查询是否存在就绪的任务。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。因为近期收到很多读者的私信，所以也专门创建了一个交流群，感兴趣的读者可以通过上方的公众号获取笔者的联系方式完成好友添加，点击备注。
React 入门第七天：探索状态管理与Context API
Caleb的博客
08-27 391
在React学习的第七天，我深入了解了React的状态管理机制，特别是如何通过来实现跨组件的状态共享。React的状态管理是组件交互的核心，而则为全局状态的共享提供了一个简洁而强大的解决方案。
vue ref和reactive区别
灰海
08-25 4455
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
【React】从零开始搭建 react 项目（初始化+路由）
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-30 454
CRACO（Create React App Configuration Override）是一个易于理解且强大的工具，它提供了一种简单的方法来覆盖和自定义 Create React App 的配置，而无需执行“eject”操作。这种方法让你能够保留 Create React App 提供的所有优势，同时还能根据需要修改配置。清理 react 脚手架默认创建的文件，重新创建符合个人项目开发的文件夹结构（参考如下）如果没有安装 react 脚手架，请先安装。安装成功后，开始配置项目。index.js 导入。
React基础面试题
只会写bug
08-30 621
Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。这可以提高应用程序的性能。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。状态是 React 组件的核心，是数据的来源，必须尽可能简单。
WHAT - 通过 react-use 源码学习 React（Animations 篇）
weixin_58540586的博客
08-30 665
Github 地址react-use 是一个流行的 React 自定义 Hook 库，提供了一组常用的 Hook，以帮助开发者在 React 应用程序中更方便地处理常见的任务和功能。官方将react-use的 Hook 分成了以下几个主要类别，以便更好地组织和查找常用的功能。每个类别涵盖了不同类型的 Hook，满足各种开发需求。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 467
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
React 入门第六天：理解组件生命周期与效果
Caleb的博客
08-26 1058
React组件的生命周期指的是从组件创建到销毁的全过程。理解组件的生命周期对高效管理组件的状态和副作用至关重要。虽然函数组件主要依赖于Hooks来处理生命周期和副作用，类组件依然是学习生命周期的基础。
在React中使用TypeScript和Material-UI v5时，要为单个.tsx文件创建一个局部作用域的.scss文件如何做? 另外主题如何获取呢?
qq_42391246的博客
08-30 367
使用CSS模块的好处是你可以编写普通的CSS（或SCSS），并且所有类名都会自动转换为唯一的局部作用域名。这意味着你可以在不同的组件中自由地使用相同的类名，而不用担心它们之间的样式冲突。使用CSS变量的好处是你可以在SCSS文件中保持样式的封装，同时能够利用React的上下文来动态地更改这些值。文件中使用MUI的主题，你需要采取不同的方法，因为SCSS文件不直接访问到React的上下文中的主题对象。另一种方法是在你的JSX中定义CSS变量，并在SCSS文件中使用这些变量。文件中，编写你的样式。
React antd 表格嵌套表格（可展开）
m0_63788547的博客
08-27 426
React antd 表格嵌套表格（可展开）
深入理解React组件生命周期
理解并掌握React的组件生命周期对于编写高性能的React应用至关重要，因为这能帮助开发者在正确的时间执行正确的操作，同时避免不必要的性能开销。在开发过程中，合理利用生命周期方法可以实现更精细的控制，优化用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值