react---生命周期

这篇具有很好参考价值的文章主要介绍了react---生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.新旧生命周期对比

2.常用的3个钩子函数

3.生命周期(旧)

4.生命周期(新)


React 中为我们提供了一些生命周期钩子函数,让我们能在 React 执行的重要阶段,在钩子函数中做一些事情。

1.新旧生命周期对比

新的生命周期 对于 旧的生命周期 ,废弃(即将废弃)了 三个 生命钩子: componentWillMount、componentWillReceiveProps、componentWillUpdate

新提出了两个生命钩子:getDerivedStateFromProps(获取派生状态)、getSnapshotBeforeUpdate(存快照,比如用于存放滚动条更新前位置)

阶段 旧生命周期 新生命周期
初始化阶段:由ReactDOM.render() 触发 -----初次渲染

1. constructor()

2. componentWillMount()

3. render()

4. componentDidMount()  

1. constructor()

2. getDerivedStateFromProps()

 3. render()

 4. componentDidMount()

更新阶段

由组件内部this.setState() 或父组件render()触发

1. shouldComponentUpdate()----更新的阀门,要有return值,true或false

2. componentWillUpdate()

3. render()  

4. componentDidUpdate()

1. getDerivedStateFromProps()

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate()

5. componentDidUpdate()

卸载组件:由ReactDOM.unmount

ComponentAtNode()

触发

componentWillUnmount()

2.常用的3个钩子函数

  •  render(): 初始化渲染或更新渲染调用
  •  componentDidMount():一般在这做一些初始化的事,例如:开启定时器、发送ajax请求、订阅消息
  • componentWillUnmount():一般在这做一些收尾的事,例如:清理定时器、取消订阅消息

3.生命周期(旧)

  • componentWillMount()---组件将要挂载
  •  componentDidMount()---组件已经挂载
  • componentWillUnmount() ---组件将要卸载
  • shouldComponentUpdate()---组件是否应该更新--更新的阀门,必须return true/false.主要用于性能优化,会对 props 和 state 进行浅层比较,并减少了跳过必要更新的可能性。不建议深层比较,会影响性能。如果返回false,则不会调用componentWillUpdate、render和componentDidUpdate
  • componentWillUpdate()---组件将要更新
  • componentDidUpdate()---组件已经更新
  • componentWillReceiveProps(props)---组件将要接收props,当父组件改变的时候,子组件会调这个钩子,初次渲染是不会执行这个钩子的。

react---生命周期

componentWillMount、componentWillReceiveProps、componentWillUpdate生命周期方法经常被误解和滥用,新版本中并不推荐持有这三个函数,取而代之的是带有UNSAFE_ 前缀的三个函数,比如: UNSAFE_ componentWillMount。即便如此,其实React官方还是不推荐大家去使用,在以后版本中有可能会去除这几个函数。

【例子】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      class Count extends React.Component {
        constructor(props) {
          console.log("count--constructor--");
          super(props);
          this.state = { count: 0 };
        }
        // 组件将要挂载
        componentWillMount() {
          console.log("count--componentWillMount--");
        }
        // 组件已经挂载
        componentDidMount() {
          console.log("count--componentDidMount--");
        }
        // 组件将要卸载
        componentWillUnmount() {
          console.log("count--componentWillUnmount--");
        }
        // 组件是否应该更新--阀门
        shouldComponentUpdate() {
          console.log("count--shouldComponentUpdate--");
          return true;
        }
        // 组件将要更新
        componentWillUpdate() {
          console.log("count--componentWillUpdate--");
        }
        //组件已经更新
        componentDidUpdate() {
          console.log("count--componentDidUpdate--");
        }
        add = () => {
          let { count } = this.state;
          count++;
          this.setState({ count });
        };
        destroy = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("app"));
        };
        force = () => {
          this.forceUpdate();
        };
        render() {
          console.log("count--render--");
          let { count } = this.state;
          let { add, destroy, force } = this;
          return (
            <div>
              <h1>数据count:{count}</h1>
              <button onClick={add}>数据+1</button>
              <button onClick={destroy}>销毁组件</button>
              <button onClick={force}>强制更新</button>
            </div>
          );
        }
      }

      class A extends React.Component {
        state={carName:"奔驰"}
        changeCar=()=>{
          this.setState({carName:"奥拓"})
        }
        render() {
          let {carName}=this.state
          return (
            <div>
              <h1>我是A组件</h1>
              <button onClick={this.changeCar}>换车</button>
              <B carName={carName} />
            </div>
          );
        }
      }
      class B extends React.Component {
        //组件将要接收props
        componentWillReceiveProps(props){
          console.log("B--componentWillReceiveProps--",props);
        }
        shouldComponentUpdate(){
          console.log("B--shouldComponentUpdate--");
          return true
        }
        componentWillUpdate(){
          console.log("B--componentWillUpdate--");
        }
        componentDidUpdate(){
          console.log("B--componentDidUpdate-");
        }
        render() {
          console.log("B--render--");
          return (
            <div>
              <h1>我是B组件,接收的车是{this.props.carName}</h1>
            </div>
          );
        }
      }
      ReactDOM.render(<A/>, document.getElementById("app"));
    </script>
  </body>
</html>

4.生命周期(新)

react---生命周期

getDerivedStateFromProps

  • 首先,该函数会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用;
  • 该函数必须是静态的;
  • 给组件传递的数据(props)以及组件状态(state),会作为参数到这个函数中;
  • 该函数也必须有返回值,返回一个Null或者state对象。因为初始化和后续更新都会执行这个方法,因此在这个方法返回state对象,就相当于将原来的state进行了覆盖,所以倒是修改状态不起作用。
  • 注意:如下代码【return props】时,state的值在任何时候都取决于传入的props,不能被改变
 // 若state值在任何时候都取决于props,那么可以使用getDerivedStateFromProps
 static getDerivedStateFromProps(props, state) {
    console.log("count--getDerivedStateFromProps--", props, state);
    // return props;
    return null
  }
....

 ReactDOM.render(<Count count={199}/>, document.getElementById("app"));

getSnapshotBeforeUpdate

可以使组件在 DOM 真正更新之前捕获一些信息(例如滚动位置),此生命周期返回的任何值都会作为参数传递给componentDidUpdate()。如不需要传递任何值,那么请返回 null

getSnapshotBeforeUpdate() {
  return this.refs.list.scrollHeight;
}
 //组件已经更新
componentDidUpdate(prevProps, prevState, snapshotValue) {
    console.log(prevProps, prevState, snapshotValue);
    this.refs.list.scrollTop+=this.refs.list.scrollHeight-snapshotValue
}

【例子-getSnapshotBeforeUpdate()用于记录上次滚动的位置】文章来源地址https://www.toymoban.com/news/detail-481323.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .news-wrapper{
            background-color: aquamarine;
            height: 150px;
            overflow: auto;
        }
        .news{
            height: 30px;
        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      class NewList extends React.Component {
        state = { newArr: [] };
        componentDidMount(){
            // console.log("--componentDidMount--");
            setInterval(()=>{
                let {newArr}=this.state
                let news ='新闻'+(newArr.length+1)
                this.setState({newArr:[news,...newArr]})
            },1000)
        }
        getSnapshotBeforeUpdate() {
          return this.refs.list.scrollHeight;
        }

        //组件已经更新
        componentDidUpdate(prevProps, prevState, snapshotValue) {
           console.log(prevProps, prevState, snapshotValue);
           this.refs.list.scrollTop+=this.refs.list.scrollHeight-snapshotValue
        }
        render() {
        //   console.log("--render--");
          return (
            <div ref="list" className="news-wrapper">
              {this.state.newArr.map((item, index) => {
               return <li key={index} className="news">{item}</li>;
              })}
            </div>
          );
        }
      }
      ReactDOM.render(<NewList />, document.getElementById("app"));
    </script>
  </body>
</html>

到了这里,关于react---生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React生命周期(新-旧)

    ① 是什么? 组件 从创建 到挂载页面上运行,再到组件不用时 卸载 的过程,叫生命周期,只有 类组件才有生命周期 。 ②作用 学习组件的生命周期,有助于理解组件的运行方式,完成更复杂的组件更能、分析组件错误原因等。 ① 是什么? 生命周期的每个阶段总是伴随着一

    2024年02月11日
    浏览(39)
  • react 生命周期讲解

    当涉及到React组件的创建、更新和销毁过程时,React的生命周期方法起到了至关重要的作用。正确地理解和使用这些生命周期方法可以帮助我们在不同的阶段执行特定的操作,从而实现更好的组件控制和优化。 1. 挂载阶段(Mounting) 在组件被创建并添加到DOM中时,以下生命周

    2024年02月07日
    浏览(77)
  • react---生命周期

    目录 1.新旧生命周期对比 2.常用的3个钩子函数 3.生命周期(旧) 4.生命周期(新) React 中为我们提供了一些生命周期钩子函数,让我们能在 React 执行的重要阶段,在钩子函数中做一些事情。 1.新旧生命周期对比 新的生命周期 对于 旧的生命周期 ,废弃(即将废弃)了 三个

    2024年02月08日
    浏览(49)
  • react 生命周期方法

    每个组件都包含 “生命周期方法”,你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。你可以使用此生命周期图谱作为速查表。在下述列表中,常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见。 挂载 当组件实例被创建并插入 DOM 中时

    2024年02月13日
    浏览(84)
  • 浅谈React生命周期

    在React中,组件的生命周期是指组件从创建到销毁的整个过程中所经历的一系列阶段。React 16.3版本之前,组件的生命周期可以分为三个阶段:挂载阶段(Mounting)、更新阶段(Updating)和卸载阶段(Unmounting)。但是自React 16.3版本起,官方推出了新的生命周期方法,将原有的一

    2024年02月10日
    浏览(48)
  • react17:生命周期函数

    挂载时 更新时 setState触发更新、父组件重新渲染时触发更新 forceUpdate触发更新 卸载时 react(v17.0.2)的生命周期图谱如下。  相较于16版本,17版本生命周期函数有如下变化: componentWillMount() componentWillUpdate() componentWillReceiveProps() +getDerivedStateFromProps(props,state) +getSnapshotBeforeUp

    2024年02月11日
    浏览(45)
  • React之组件的生命周期

    生命周期:一个事务从创建到最后消亡经历的整个过程 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程 意义:理解组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等 钩子函数的作用:为开发人员在不同

    2024年02月15日
    浏览(35)
  • React的生命周期详细讲解

    所谓的React生命周期,就是指组件从被创建出来,到被使用,最后被销毁的这么一个过程。而在这个过程中,React提供了我们会自动执行的不同的钩子函数,我们称之为生命周期函数。**组件的生命周期大致分为三个阶段:组件挂载阶段,组件更新阶段,组件销毁卸载阶段 **

    2024年02月03日
    浏览(47)
  • 10分钟理解React生命周期

    学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. React  /riˈækt /   组件的生命周期指的是 组件 从 创建 到 销毁 过程中所经历的一系列方法调用。这些方法可以让我们在不同的时刻执行特定的代码,以满足组件的需求。 React 的生

    2023年04月16日
    浏览(28)
  • 面试题-React(六):React组件和生命周期

    一、React组件 React组件简介: React组件是构建用户界面的基本单元。它们将界面拆分成独立、可重用的部分,使得代码更加模块化、可维护性更高。React组件可以是函数组件或类组件,它们接收输入的数据(称为props)并返回表示用户界面的React元素。 创建React组件: 在React中

    2024年02月11日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包