React学习笔记【6】（React生命周期）

最新推荐文章于 2024-06-15 19:02:23 发布
最新推荐文章于 2024-06-15 19:02:23 发布
阅读量60 收藏
点赞数
分类专栏： # React 文章标签： react.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50378623/article/details/130507852
版权

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

生命周期理解

  • 组件从创建到注销经历的一些特定阶段。
  • React组件包含一系列钩子函数（生命周期回调函数），在特定的时刻调用。
  • 在定义组件时会在特定的生命周期回调函数中做特定的工作。

生命周期流程图（旧）【注意引入库的版本号】
生命周期流程图（旧）
生命周期流程图（新）【注意引入库的版本号】
生命周期流程图（新）
重要的钩子

  1. render()：初始化渲染或更新渲染时调用
  2. componentDidMount()：组件挂载完毕，开启监听，发送请求
  3. componentWillUnmount()：组件将要卸载的钩子，做一些收尾工作如清除定时器

即将废弃的钩子
此三个钩子函数在新版本中会在控制台显示警告，需添加‘UNSAFF_’前缀方可使用,以后可能会彻底废弃，不建议使用

  1. componentWillMount()：组件将要挂载的钩子
  2. componentWillReveiceProps()：组件将要接收新的props的钩子
  3. componentWillUpdate()：组件将要更新的钩子

生命周期的三个阶段（旧版本）

  1. 初始化阶段：由ReactDOM.render()触发----初次渲染
    • constructor() 构造器
    • componentWillMount() 组件将要挂载
    • render()
    • componentDidMount() 组件挂载完毕
  2. 更新阶段：由组件内部this.setState()或父组件重新render()触发，this.forceUpdate()强制更新
    • componentWillReveiceProps() 组件将要接受新的props的钩子，父组件重新render时触发
    • shouldComponentUpdate() 控制组件更新的‘阀门’，返回一个布尔值，true表示可更新，false表示不可更新。强制更新不受此返回值的影响，即使返回false依然更新。
    • componentWillUpdate() 组件将要更新
    • render()
    • componentDidUpdate() 组件更新完毕
  3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
    • componentWillUnmount() 组件将要卸载

运行测试（旧版本生命周期）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>

    <div id="test2"></div>

    <!-- react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- react-dom用于支持react操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            // 构造器
            constructor(props) {
                console.log('count--constructor')
                super(props);
                // 初始化状态
                this.state = { count: 0 }
            }

            // +1按钮的回调
            add = () => {
                let { count } = this.state;
                this.setState({ count: count + 1 })
            }
            // 卸载按钮的回调
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }
            // 强制更新的回调
            force = () => {
                this.forceUpdate()
            }

            // 组件将要挂载
            componentWillMount() {
                console.log('count--componentWillMount')
            }

            // 组件挂载完毕
            componentDidMount() {
                console.log('count--componentDidMount')
            }
            // 组件将要卸载的钩子
            componentWillUnmount() {
                console.log('count--componentWillUnmount');
            }
            // 控制组件更新的‘阀门’，返回一个布尔值，true表示可更新，false表示不可更新
            shouldComponentUpdate() {
                console.log('count--shouldComponentUpdate');
                return true;
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log('count--componentWillUpdate');
            }

            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('count--componentDidUpdate');
            }

            render() {
                console.log('count--render')
                return (
                    <div>
                        <h2>当前求和为{this.state.count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>点击按钮强制更新，不修改状态</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count />, document.getElementById('test'));


        class A extends React.Component {
            state={carName:'aaa'}
            change=()=>{
                this.setState({carName:'bbb'})
            }
            render() {
                return (
                    <div>
                        <div>
                            组件A
                        </div>
                        <button onClick={this.change}>改变</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }

        class B extends React.Component {
            componentWillReceiveProps(props){
                console.log('B--componentWillReceiveProps',props)
            }
            render() {
                return (
                    <div>
                        组件B,接收到的参数：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test2'))
    </script>
</body>

</html>

生命周期的三个阶段（新版本）

  1. 初始化阶段：由ReactDOM.render()触发----初次渲染
    • constructor() 构造器
    • static getDerivedStateFromProps()
    • render()
    • componentDidMount() 组件挂载完毕
  2. 更新阶段：由组件内部this.setState()或父组件重新render()触发，this.forceUpdate()强制更新
    • static getDerivedStateFromProps()
    • shouldComponentUpdate() 控制组件更新的‘阀门’，返回一个布尔值，true表示可更新，false表示不可更新。强制更新不受此返回值的影响，即使返回false依然更新。
    • render()
    • getSnapshotBeforUpdate() 使组件在可能发生更改之前获取一些信息（如滚动位置），此生命周期返回的任何值豆浆作为参数传递给componentDidUpdate()。
    • componentDidUpdate() 组件更新完毕
  3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
    • componentWillUnmount() 组件将要卸载

测试代码（新版本）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>

    <div id="test2"></div>

    <!-- react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- react-dom用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            // 构造器
            constructor(props) {
                console.log('count--constructor')
                super(props);
                // 初始化状态
                this.state = { count: 0 }
            }

            // +1按钮的回调
            add = () => {
                let { count } = this.state;
                this.setState({ count: count + 1 })
            }
            // 卸载按钮的回调
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }
            // 强制更新的回调
            force = () => {
                this.forceUpdate()
            }

            // 从props中得到一个派生状态 及当state中的值在任何时候都取决于props的时候，可以使用此钩子
            //派生状态会导致代码冗余,并使组件难以维护
            static getDerivedStateFromProps(props,state){
                console.log('count--getDerivedStateFromProps',props,state);
                return props
            }

            // 组件将要挂载
            // UNSAFF_componentWillMount() {
            //     console.log('count--componentWillMount')
            // }

            // 组件挂载完毕
            componentDidMount() {
                console.log('count--componentDidMount')
            }
            // 组件将要卸载的钩子
            componentWillUnmount() {
                console.log('count--componentWillUnmount');
            }
            // 控制组件更新的‘阀门’，返回一个布尔值，true表示可更新，false表示不可更新
            shouldComponentUpdate() {
                console.log('count--shouldComponentUpdate');
                return true;
            }
            // 组件将要更新的钩子
            // UNSAFF_componentWillUpdate() {
            //     console.log('count--componentWillUpdate');
            // }

            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('count--componentDidUpdate');
            }

            render() {
                console.log('count--render')
                return (
                    <div>
                        <h2>当前求和为{this.state.count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>点击按钮强制更新，不修改状态</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count />, document.getElementById('test'));


        class A extends React.Component {
            state = { carName: 'aaa' }
            change = () => {
                this.setState({ carName: 'bbb' })
            }
            render() {
                return (
                    <div>
                        <div>
                            组件A
                        </div>
                        <button onClick={this.change}>改变</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }

        class B extends React.Component {
            // UNSAFF_componentWillReceiveProps(props) {
            //     console.log('B--componentWillReceiveProps', props)
            // }
            render() {
                return (
                    <div>
                        组件B,接收到的参数：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />, document.getElementById('test2'))
    </script>
</body>

</html>

getSnapshotBeforeUpdate钩子测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            height: 180px;
            background: skyblue;
            width: 200px;
            overflow: auto;
        }
        .news{
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="test">

    </div>



    <!-- react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- react-dom用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>

    <script type="text/babel">
        class NewsList extends React.Component {
            state = { newsList: [] }

            componentDidMount(){
                setInterval(() => {
                    let {newsList} = this.state;
                    let news = `新闻${newsList.length + 1}`;
                    this.setState({newsList:[news,...newsList]});
                }, 1000);
            }

            getSnapshotBeforeUpdate(){
                return this.refs.list.scrollHeight
            }

            componentDidUpdate(preProps,preState,height){
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height;
            }

            render() {
                return (
                    <div className="list" ref="list">
                        {this.state.newsList.map((item, index) => {
                            return <div key={index} className="news">{item}</div>
                        })}
                    </div>
                )
            }
        }
        ReactDOM.render(<NewsList />, document.getElementById('test'));
    </script>
</body>

</html>
⁡⁡小黑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ReactNative学习笔记
weixin_68658847的博客
10-04 938
ReactNative学习笔记
React生命周期
fang.lovest.yang的博客
10-17 220
1.react项目搭建 1）搭建react项目有两种：html中引入react和脚手架搭建react 2）react组件分为两种，函数式组件和类式组件 3）参考：React.js下载与使用 react JS文件CDN地址 React官网找到CDN连接React 官方中文文档 – 用于构建用户界面的 JavaScript 库或者bootcdn查找cdn地址 引入react可以直接指定cdn地址，也可以在浏览器输入下面地址下载保存为本地js然后html中引入。 <scri...
【react学习笔记】生命周期函数学习
Kamen_Yip的博客
11-17 365
学习视频地址：https://www.bilibili.com/video/BV1wy4y1D7JT?p=42 理解： 组件从创建到死亡会经历一些特定的阶段 React组件仲包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用 定义组件时会在特定的生命周期回调函数中做特定的工作 生命周期函数 描述 constructor 构造器 componentWillMount（已更名） 组件将要挂载（后续版本使用须加前缀UNSAFE_） componentDidMount（常用）.
React学习笔记之组件的生命周期
HJHAlone的博客
03-23 845
一、生命周期 1.生命周期的三个阶段 1）创建时 componentDidMount在render渲染完成之后就立即执行，可以执行DOM操作和发送网络请求 2）更新时 先执行render()再执行componentDidUpdate() 3）卸载时 开了定时器，要在componentWillUnMount清除；在组件消失时调用componentWillUnMount 二、render props 1.首先Mouse定义操作方法，rende...
React 学习笔记：组件生命周期
weixin_46015333的博客
12-08 617
生命周期一个事物从创建到最后消亡经历的过程，在这个过程中会有不同的状态（新生儿、少年···），所以在 16.8 版本以前生命周期只有类组件才有，函数组件是没有这个概念的，因为它没有状态，本文就是总结类组件生命周期。了解生命周期有助于我们理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因。
React学习笔记02---生命周期函数
m0_55842907的博客
05-26 230
前言:在学习完了React中基础的JSX语法、基本的函数式组件和类式组件、三大属性state,props,refs之后。这次的博客内容主要是记录一下学习生命周期函数的相关内容，主要强调各生命周期函数的使用阶段和使用频率高低。React中的很多行为比如消息订阅与发布，异步ajax请求，设置定时等都需要在生命周期函数中进行。虽然React的生命周期函数众多，但是我们在日常开发中所用到的只有少数几个，掌握好常用的几个生命周期函数就足够了。 整体概括图 在React中的每一个组件实例的生命周期包括了初始化阶.
React学习笔记-组件生命周期
weixin_51583081的博客
01-05 115
意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
学习react笔记（生命周期）
qq_47997447的博客
07-20 209
react 生命周期
React学习笔记
EUEY的博客
03-26 1785
React学习笔记（持续更新） 一、基础 1.概念 React是用于构建用户界面的JavaScript库（只关注视） 2.特点 声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。 3.高效原因 使用虚拟(virtual)DOM,不总是直接操作页面真
React学习笔记之九:生命周期
qq_24724109的博客
07-21 309
9. React的生命周期 具体的代码可以参考我的github 现在我们已经可以使用React实现一些东西了: 这里提供两个例子: todoList 评论功能 来谈谈JSX和React的生命周期 JSX React生命周期 1. 一个简单的React组件的JSX原理 // 简单的Header class Header extends Component { render() { ...
react 学习笔记
11-16
react 学习笔记， 自己学习过程中记录的内容。react component 生命周期，整合eslint插件
React生命周期原理与用法踩坑笔记
11-21
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考，具体如下： React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲 ...
React读书笔记-组件的生命周期1
08-08
React读书笔记-组件的生命周期在我们的React中all is component，我们通过调用React的createClass方法（）或者ES6的cla
ReactNative中组件的生命周期
02-25
就像Android开发中的View一样，ReactNative（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN组件的生命周期整理如下图...
React@16.x（28）useMemo
qq_40147756的博客
06-13 353
useMemo
React如何配置路由
最新发布
weixin_47121832的博客
06-15 192
react配置路由方法
React中数据响应式原理
linzhongshu的专栏
06-10 380
在React中，数据响应式是通过组件的状态（State）和属性（Props）来实现的。当状态或属性发生变化时，React会自动重新渲染组件，以确保UI与数据保持同步。这种机制背后的原理是React的虚拟DOM（Virtual DOM）。虚拟DOM是一个轻量级的JavaScript对象，它是实际DOM的抽象。React通过比较新旧虚拟DOM的差异，计算出最小的更新操作，然后应用到实际DOM上。这大大减少了直接操作DOM的次数，提高了性能。
react 0至1 案例
m0_60559048的博客
06-14 199
2.通过记录type和当前list中的type 匹配。* 1. 渲染导航 Tab 和高亮。* 导航 Tab 的渲染和操作。* 最热 => 喜欢数量降序。* 最新 => 创建时间降序。* 1.点击记录当前type。* 2. 评论列表排序。
SortTable.js + vxe-table 实现多条批量排序
小先生编程
06-12 608
环境: 功能: 实现表格拖动排序，支持单条排序，多条排序 实现思路: 官网只有单条排序的例子，网上也都是简单的使用，想要实现多条排序，就要结合着表格的复选框功能，在对其勾选的行统一计算！ 最终效果: 实现代码
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值