React生命周期

最新推荐文章于 2024-10-13 19:05:48 发布
最新推荐文章于 2024-10-13 19:05:48 发布
阅读量48 收藏
点赞数
分类专栏： # 前端 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_ausb/article/details/131984452
版权

生命周期钩子

生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子

  1. 组件从创建到死亡它会经历一些特定的阶段
  2. React组件中包含一系列钩子函数（生命周期回调函数），会再特定时刻调用。
  3. 我们再定义组件时，会在特定的生命周期回调函数中，做特定的工作。

生命周期流程图（旧v16.8.4）

生命周期

挂载时的生命周期

    <script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log("componentWillMount");
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("componentDidMount");
        }
        add = () => {
          let { count } = this.state;
          count += 1;
          this.setState({ count: count });
        };
        render() {
          console.log("render");
          return (
            <div>
              <h2>`当前求和为{this.state.count}`</h2>
              <button onClick={this.add}>点我加一</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>

更新时的生命周期 —— setState()

  • shouldComponentUpdate(){ return true;}
    如果写了，就必须有返回值，如果没写，React会自动给补上一个返回值为true的。
    <script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log("componentWillMount");
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("componentDidMount");
        }
        // 组件将要被卸载
        componentWillUnmount() {
          console.log("componentWillUnmount");
        }
        //卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("shouldComponentUpdate");
          return true;
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log("componentWillUpdate");
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log("componentDidUpdate");
        }
        add = () => {
          let { count } = this.state;
          count += 1;
          this.setState({ count: count });
        };
        render() {
          console.log("render");
          return (
            <div>
              <h2>`当前求和为{this.state.count}`</h2>
              <button onClick={this.add}>点我加一</button>
              <button onClick={this.death}>点我消失</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>

更新时的生命周期 —— forceUpdate()

  • 不对状态进行任何修改，调用forceUpdate()也可以更新。不受到shouldComponentUpdate()的限制
    <script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log("componentWillMount");
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("componentDidMount");
        }
        // 组件将要被卸载
        componentWillUnmount() {
          console.log("componentWillUnmount");
        }
        //卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("shouldComponentUpdate");
          return true;
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log("componentWillUpdate");
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log("componentDidUpdate");
        }

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

        add = () => {
          let { count } = this.state;
          count += 1;
          this.setState({ count: count });
        };
        render() {
          console.log("render");
          return (
            <div>
              <h2>`当前求和为{this.state.count}`</h2>
              <button onClick={this.add}>点我加一</button>
              <button onClick={this.death}>点我消失</button>
              <button onClick={this.force}>点我强制刷新</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>

父组件的更新流程

  • 父组件一旦重新render，子组件就会响应componentWillReceiveProps()。【第一次传的不算】
      class A extends React.Component {
        // 初始化状态
        state = {
          car: "奔驰",
        };
        changeCar = () => {
          this.setState({ car: "奥拓" });
        };
        render() {
          return (
            <div>
              <div>我是A组件</div>
              <button onClick={this.changeCar}>换车</button>
              <B carName={this.state.car} />
            </div>
          );
        }
      }
      class B extends React.Component {
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("shouldComponentUpdate");
          return true;
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log("componentWillUpdate");
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log("componentDidUpdate");
        }

        // 组件将要接收新的props的钩子
        componentWillReceiveProps(props) {
          console.log("componentWillReceiveProps", props);
        }
        render() {
          console.log("render");
          return <div>我是B组件，接收到的车是{this.props.carName}</div>;
        }
      }
      ReactDOM.render(<A />, document.getElementById("test"));

总结

  1. 初始化阶段：由React.DOM.render()出发——初次渲染
  • constructor()
  • componentWillMount()
  • render
  • componentDidMount() —— 常用
    一般在这个钩子中做一些初始化的事，例如：烤漆定时器，发送网络请求，订阅消息
  1. 更新阶段：由组件内部this.setState()或父组件重新render触发
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
  1. 卸载组件：由React.unmountComponentAtNode()出发
  • componentWillUnmount() —— 常用
    一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

生命周期（新v17.0.1）

新版本中可以用旧的钩子，但是会有警告
新的生命周期

  1. 新版本中，三个方法必须加上前缀UNSAFE_
  • componentWillMount() => UNSAFE_componentWillMount()
  • componentWillUpdate() => UNSAFE_componentWillUpdate()
  • componentWillReceiveProps() => UNSAFE_componentWillReceiveProps()
  1. 新提出两个钩子：
  • getDerivedStateFromProps()
  • getSnapshotBeforeUpdate()
    但是用的地方十分罕见
    <script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        // 组件将要挂载的钩子
        UNSAFE_componentWillMount() {
          console.log("componentWillMount");
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("componentDidMount");
        }
        // 组件将要被卸载
        componentWillUnmount() {
          console.log("componentWillUnmount");
        }
        //卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("shouldComponentUpdate");
          return true;
        }
        // 组件将要更新的钩子
        UNSAFE_componentWillUpdate() {
          console.log("componentWillUpdate");
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log("componentDidUpdate");
        }

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

        add = () => {
          let { count } = this.state;
          count += 1;
          this.setState({ count: count });
        };
        render() {
          console.log("render");
          return (
            <div>
              <h2>`当前求和为{this.state.count}`</h2>
              <button onClick={this.add}>点我加一</button>
              <button onClick={this.death}>点我消失</button>
              <button onClick={this.force}>点我强制刷新</button>
            </div>
          );
        }
      }
//父组件A
      class A extends React.Component {
        // 初始化状态
        state = {
          car: "奔驰",
        };
        changeCar = () => {
          this.setState({ car: "奥拓" });
        };
        render() {
          return (
            <div>
              <div>我是A组件</div>
              <button onClick={this.changeCar}>换车</button>
              <B carName={this.state.car} />
            </div>
          );
        }
      }
      //子组件B
      class B extends React.Component {]
      	UNSAFE_componentWillReceiveProps(){
      	}
        render() {
          console.log("render");
          return <div>我是B组件，接收到的车是{this.props.carName}</div>;
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>

getDerivedStateFromProps()

  • 不是给实例调用，在定义前要加static，加在类自身上，并且必须返回一个状态对象或者null
  • 从props获得派生的状态，这个状态无法被改变
  • 此方法适用于十分罕见的用例，即state的值在任何时候都取决于props
  • 派生状态会导致代码冗余，并使组件难以维护
<script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        //若任何时候state的值在任何时候都取决于props，则可以用getDerivedStateFromProps
        static getDerivedStateFromProps(props) {
          console.log("getDerivedStateFromProps");
          return props;
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("componentDidMount");
        }
        // 组件将要被卸载
        componentWillUnmount() {
          console.log("componentWillUnmount");
        }
        //卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("shouldComponentUpdate");
          return true;
        }

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

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

        add = () => {
          let { count } = this.state;
          count += 1;
          this.setState({ count: count });
        };
        render() {
          console.log("render");
          return (
            <div>
              <h2>`当前求和为{this.state.count}`</h2>
              <button onClick={this.add}>点我加一</button>
              <button onClick={this.death}>点我消失</button>
              <button onClick={this.force}>点我强制刷新</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count count="199" />, document.getElementById("test"));
    </script>

getSnapshotBeforeUpdate()

  • 在最近一次渲染输出（提交到DOM节点）之前调用，它使得组件能在发生更改之前从DOM中捕获一些信息（例如：滚动位置）。此声明周期的任何返回值将作为参数传递给componentDidUpdate()
  • 必须有返回值，要么一个快照，要么一个null
  • 任何值都可以作为快照值
  • componentDidUpdate(preProps,preState,snapShot)可以接受三个参数，一个是之前传递的props，一个是之前的state，还有快照值
  • getDerivedStateFromProps(props,state)接收当前的props和state
    <script type="text/babel">
      class NewsList extends React.Component {
        state = {
          newsArr: [],
        };
        componentDidMount() {
          setInterval(() => {
            //获取原状态
            const { newsArr } = this.state;
            //模拟一条新闻
            const news = "新闻" + (newsArr.length + 1);
            //更新状态
            this.setState({ newsArr: [news, ...newsArr] });
          }, 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.newsArr.map((n, index) => {
                return (
                  <div key={index} className="news">
                    {n}
                  </div>
                );
              })}
            </div>
          );
        }
      }
      ReactDOM.render(<NewsList />, document.getElementById("test"));
    </script>

总结

  1. 初始化阶段：由ReactDOM.render()触发——初次渲染
  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount() —— 常用
    一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
  1. 更新阶段：由组件内部this.setState()或父组件重新render触发
  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
  1. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
  • componentWillUnmount() —— 常用
    一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
a_ausb
关注
专栏目录
react生命周期详细介绍
luobo2345的博客
02-10 2万+
react生命周期详解，挂载渲染，卸载和错误捕获
react 生命周期实例分析
10-15
React生命周期是指React组件在其创建、渲染、更新和销毁过程中经历的一系列方法调用。这些方法提供了在特定阶段插入自定义逻辑的机会，使得我们可以更好地控制组件的行为。本文将深入探讨React组件的生命周期，通过...
React 生命周期详解与示例
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
04-07 8万+
了解并正确使用React的生命周期，对于构建稳定、可维护的React应用具有重要意义。在实际开发中，我们需要根据需求合理选择生命周期方法，并在合适的时机执行相应的操作。同时，我们还需要注意React版本的变化，因为不同版本的React可能会对生命周期方法进行一些调整。
React 生命周期
嗯...
08-25 1380
在 React 中，组件的声明周期是指组件在被创建、更新和销毁的过程中所经历的一系列阶段。这些阶段允许你在不同的时间点执行特定的代码，以便管理组件的状态、数据和用户界面。在早期版本的 React 中，存在三个主要的声明周期阶段：Mounting（挂载）、Updating（更新）和Unmounting（卸载）。然而，随着 React 的发展，声明周期方法已经逐渐被推荐为不建议使用，取而代之的是使用 React Hooks。不过，了解声明周期方法仍然有助于理解 React 组件的工作原理。
react 生命周期
zep
09-22 3081
1.组件从创建到死亡它会经历一些特定的阶段。 2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。 3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。 一、react生命周期（旧的） 生命周期的三个阶段（旧） 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 常用 一.
React生命周期详解
Amelian的博客
08-31 1万+
前言 react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......
React生命周期钩子函数
越努力，越幸运！
01-28 8239
前言 所谓的生命周期就是指某个事物从开始到结束的各个阶段，就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程，React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是React 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，所以一般特定的钩子做特定的事。 一、React生命周期..
react生命周期
weixin_56548455的博客
08-18 752
生命周期概念广义来说生命周期泛指自然界和人类社会中各种客观事物的阶段性变化及其规律在 React 框架中则用来描述组件挂载更新卸载三个阶段。
React生命周期以及Hook
警警的博客
10-02 1160
副作用处理：useEffect Hook 用于在函数组件中执行副作用操作，如数据获取、订阅和手动更改 React 组件的 DOM 输出等。下面我将给出一个React Hooks的应用实例，该实例将演示如何在函数组件中使用useState和useEffect Hooks来创建一个简单的计数器组件，该组件会在组件挂载后每秒自动增加计数，并允许用户通过按钮手动增加计数。减少类组件的使用：随着 Hook 的引入，函数组件变得更加强大，减少了对类组件的需求，使得 React 组件的编写更加灵活和简洁。
React生命周期函数
weixin_42447364的博客
06-21 4825
React生命周期函数
vue生命周期和react生命周期对比【推荐】
10-18
本文将深入探讨Vue和React的生命周期函数，并进行对比分析。 首先，Vue.js的生命周期可以分为八个阶段：创建前beforeCreate、创建created、载入前beforeMount、载入mounted、更新前beforeUpdate、更新***d、销毁前...
react-交互式React生命周期方法图
08-14
"交互式React生命周期方法图"是一种可视化工具，它帮助开发者直观地了解React组件在不同阶段调用的方法。这个图通常包含从挂载（Mounting）、更新（Updating）到卸载（Unmounting）各个阶段的所有生命周期方法，以及...
React(一) 认识React、熟悉类组件、JSX书写规范、嵌入变量表达式、绑定属性
lxh的博客
10-10 927
认识React，JSX规范及注释，JSX嵌入变量作为子元素、JSX嵌入表达式、JSX绑定属性，class样式、style样式
React.createRef()，React.forwardRef()，forwardRef()结合next.js的link进行路由跳转
qq_24428851的博客
10-13 674
import React from 'react'//funciton component是没有dom实例的，因为它是PureComponent，所以没有this，// 所以不能通过createRef()来拿到实例//将Father的father传给子组件，并绑定子组件的DOM实例，从而能在父组件拿到子组件的DOM实例const Child=React.forwardRef((props,ref)=>{码云https://gitee.com/skyvilm/react-next.js。
react理念(一)
m0_73280507的博客
10-11 1359
当遇到大计算量的操作或者设备性能不足的页面掉帧，会导致卡顿，发送网路请求的时候，需要等待数据返回才能进一步操作导致不能快速响应。叫做cpu的瓶颈和io的瓶颈。
react hooks中在setState后输出state为啥没有变化，如何解决
最新发布
m0_47999208的博客
10-13 401
使用useEffect：通过useEffect钩子监听状态变化，并在状态更新后执行一些操作。在回调函数中访问新状态：在setXXX的回调函数中直接处理新的状态值。这两种方法都可以帮助你在状态更新后正确地访问到最新的状态值。选择哪种方法取决于你的具体需求和代码结构。对于大多数情况，使用useEffect是更常见和推荐的做法。
使用 Docker 部署前端项目：Vue 和 React 结合 Nginx 实现静态文件托管
IT小辉同学
10-10 1365
Web 开发中，将前端项目（例如 Vue 或 React 应用）打包后通过 Docker 容器和 Nginx 部署是非常常见的方式。它不仅简化了部署流程，还能确保在不同环境中一致的运行效果。本文将介绍如何使用 Docker 将打包生成的 `dist` 文件夹结合 Nginx 来实现前端项目的静态文件托管与访问。
React入门 9：React Router
pingguocu3的博客
10-13 496
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
深入理解React生命周期与优化
"React生命周期的理解" React作为一款流行的JavaScript库，用于构建用户界面，其核心概念之一就是组件的生命周期。生命周期方法允许开发者在组件的不同阶段执行特定的操作，从而实现对组件行为的精确控制。本文将...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值