React——03——生命周期回调函数

最新推荐文章于 2022-07-15 14:32:58 发布
最新推荐文章于 2022-07-15 14:32:58 发布
阅读量210 收藏
点赞数
分类专栏： React 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/112600671
版权

文章目录

一：定时器的使用

在这里插入图片描述在这里插入图片描述

我们想要组件挂载到页面，就开启定时器的效果，如果将定时器函数写在render里，这种写法是错误的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
     <div id="test"><div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
     class Life extends React.Component{
       state={
         opacity:0.5
       }
       test=()=>{
         //卸载组件
         ReactDOM.unmountComponentAtNode(document.getElementById('test'))
       }
       render(){
         console.log('render');
         setInterval(()=>{
           //const声明的状态不能再改，所以用let
           let {opacity}=this.state;
           opacity-=0.1;
           if(opacity<=0){
             //更新状态就会重新调render,调了很多次render，然后速度越来越快
             opacity=1
           }
           //同名可以省略 this.setState({opacity,opacity})
           this.setState({opacity})
         },1000);
         return (
           <div>
             <h1 style={{opacity:this.state.opacity}}>今天天气升温了</h1> 
             <button onClick={this.test}>真的吗？</button>
           </div>
         )
       }
     }
     ReactDOM.render(<Life/>,document.getElementById('test'))
    </script>
  </body>
</html>

用生命周期函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
     <div id="test"><div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
     class Life extends React.Component{
       state={
         opacity:0.5
       }
       test=()=>{
         //卸载组件之前要清楚定时器
         clearInterval(this.timer)
         //卸载组件
         ReactDOM.unmountComponentAtNode(document.getElementById('test'))
       }
       //和render是兄弟，不用赋值语句+箭头函数
       //组件挂载完毕调用
       componentDidMount(){
         this.timer=setInterval(()=>{
           //const声明的状态不能再改，所以用let
           let {opacity}=this.state;
           opacity-=0.1;
           if(opacity<=0){
             //更新状态就会重新调render,调了很多次render，然后速度越来越快
             opacity=1
           }
           //同名可以省略 this.setState({opacity,opacity})
           this.setState({opacity})
         },200);
       }
       //组件将要卸载
       componentWillUnmount(){
         //也可在这清除定时器
       }
       //render调用的时机：初始化渲染，状态更新之后
       render(){
         return (
           <div>
             <h1 style={{opacity:this.state.opacity}}>今天天气升温了</h1> 
             <button onClick={this.test}>真的吗？</button>
           </div>
         )
       }
     }
     ReactDOM.render(<Life/>,document.getElementById('test'))
    </script>
  </body>
</html>

二：生命周期新旧对比

1.旧版生命周期函数

在这里插入图片描述

1.初始化阶段
1.由ReactDOM.render()触发—初次渲染
2.cnstructor()
3.render()
4.componentDidMount() 常用，一般在这个钩子中做一些初始化的事，例如：开启定时器，发送网络请求，订阅消息
2.更新阶段：由组件内部this.setState()或父组件render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render() 常用，
4.componentDidUpdate()
3.卸载组件：由RaectDOM.unmountComponentAtNode()触发—初次渲染
1.componentWillUnmount()======>常用，一般在这个钩子中做一些收尾的事，例如：关闭定时器，取消订阅消息

1.1组件挂载流程

<!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>
    <!-- react核心库 要在最前面引入-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- react-dom 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- babel 用于jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Count extends React.Component {
        state = { count: 0 };
        add = () => {
          const { count } = this.state;
          //是运算，没有赋值
          this.setState({ count: count + 1 });
        };
        //构造器;
        constructor(props) {
          super(props);
          console.log("constructor");
        }
        //组件将要挂载的钩子
        componentWillMount() {
          console.log("ComponentWillMount");
        }
        //组件挂载完毕的钩子
        componentDidMount() {
          console.log("ComponentDidMount");
        }
       
        render() {
          console.log("render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为：{count}</h2>
              <button onClick={this.add}>点我+1</button>
              
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>
  </body>
</html>

1.2卸载组件流程

<!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>
    <!-- react核心库 要在最前面引入-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- react-dom 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- babel 用于jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Count extends React.Component {
        state = { count: 0 };
        add = () => {
          const { count } = this.state;
          //是运算，没有赋值
          this.setState({ count: count + 1 });
        };
        unload=()=>{
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        //构造器;
        constructor(props) {
          super(props);
          console.log("constructor");
        }
        //组件将要挂载的钩子
        componentWillMount() {
          console.log("ComponentWillMount");
        }
        //组件挂载完毕的钩子
        componentDidMount() {
          console.log("ComponentDidMount");
        }
        //组件将要卸载的钩子
        componentWillUnmount(){
          console.log('componentWillUnmount');
        }
        render() {
          console.log("render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为：{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.unload}>卸载组件</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>
  </body>
</html>

1.3setState流程

<!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>
    <!-- react核心库 要在最前面引入-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- react-dom 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- babel 用于jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Count extends React.Component {
        state = { count: 0 };
        add = () => {
          const { count } = this.state;
          //是运算，没有赋值
          this.setState({ count: count + 1 });
        };
        unload=()=>{
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        //构造器;
        constructor(props) {
          super(props);
          console.log("constructor");
        }
        //组件将要挂载的钩子
        componentWillMount() {
          console.log("ComponentWillMount");
        }
        //组件挂载完毕的钩子
        componentDidMount() {
          console.log("ComponentDidMount");
        }
        //组件将要卸载的钩子
        componentWillUnmount(){
          console.log('componentWillUnmount');
        }
        //控制组件更新的阀门 要写返回值，true或者false ,返回true才会更新 
        shouldComponentUpdate(){
          console.log('shouldComponentUpdate');
          return true
        }
        //组件将要更新钩子
        componentWillUpdate(){
          console.log('componentWillUpdate');
        }
        //组件更新完毕的钩子
        componentDidUpdate(){
          console.log('componentDidUpdate');
        }
        render() {
          console.log("render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为：{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.unload}>卸载组件</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>
  </body>
</html>

1.4forceUpdate 强制更新

不想对状态做出修改，进行的更新

<!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>
    <!-- react核心库 要在最前面引入-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- react-dom 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- babel 用于jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Count extends React.Component {
        state = { count: 0 };
        add = () => {
          const { count } = this.state;
          //是运算，没有赋值
          this.setState({ count: count + 1 });
        };
        unload=()=>{
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        //强制更新按钮的回调
        force=()=>{
          this.forceUpdate()
        }
        //构造器;
        constructor(props) {
          super(props);
          console.log("constructor");
        }
        //组件将要挂载的钩子
        componentWillMount() {
          console.log("ComponentWillMount");
        }
        //组件挂载完毕的钩子
        componentDidMount() {
          console.log("ComponentDidMount");
        }
        //组件将要卸载的钩子
        componentWillUnmount(){
          console.log('componentWillUnmount');
        }
        //控制组件更新的阀门 要写返回值，true或者false ,返回true才会更新 
        shouldComponentUpdate(){
          console.log('shouldComponentUpdate');
          return false
        }
        //组件将要更新钩子
        componentWillUpdate(){
          console.log('componentWillUpdate');
        }
        //组件更新完毕的钩子
        componentDidUpdate(){
          console.log('componentDidUpdate');
        }
        render() {
          console.log("render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为：{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.unload}>卸载组件</button>
             <button onClick={this.force}>强制更新</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>
  </body>
</html>

1.5父组件render流程

<!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>
    <!-- react核心库 要在最前面引入-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- react-dom 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- babel 用于jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      //组件将要接受新的props的钩子，第一次接收props不算，父组件第二次执行render的时候才调用（第一次是初始化渲染，第二次是状态发生改变）
      class A extends React.Component {
        state={car:'奥迪'}
        changeCar=()=>{
          const {car}=this.state
          this.setState({car:'奔驰'})
        }
         shouldComponentUpdate() {
          console.log("A---shouldComponentUpdate");
          return true;
        }
        //组件将要更新钩子
        componentWillUpdate() {
          console.log("A---componentWillUpdate");
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log("A---componentDidUpdate");
        }
        render() {
          console.log('A---render');
          const {car}=this.state
          return (
            <div>
              <div> A组件</div>
              <button onClick={this.changeCar}>换车</button>
              <Son carName={car}/>
            </div>
          );
        }
      }
      class Son extends React.Component {
        //组件将要接收新的props的钩子
        componentWillReceiveProps(props){
          console.log('B----componentWillReceiveProps',props);
        }
         //控制组件更新的阀门 要写返回值，true或者false ,返回true才会更新
        shouldComponentUpdate() {
          console.log("B---shouldComponentUpdate");
          return true;
        }
        //组件将要更新钩子
        componentWillUpdate() {
          console.log("B---componentWillUpdate");
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log("B---componentDidUpdate");
        }
        render(){
          console.log('B---render');
          const {carName}=this.props
          return(
            <div>我是B组件，接收到的车是：{carName}</div>
          )
        }
      }
      ReactDOM.render(<A/>, document.getElementById("test"));
    </script>
  </body>
</html>

2.新版的生命周期函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.1

野生小米椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RCLCV:React组件生命周期可视化器
05-09
4. **使用setState的第二个参数**：传递一个回调函数来知道何时渲染完成。 5. **利用生命周期方法清理副作用**：如`componentWillUnmount`用于清理定时器或订阅。 总结来说，RCLCV是一个强大的工具，它让React组件...
react回调函数_React系列五 组件化开发（一）
weixin_28738397的博客
01-24 621
现在可以说整个的大前端开发都是组件化的天下，无论从三大框架(Vue、React、Angular)，还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。一. 认识组件化开发 1.1. 什么是组件化？人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问...
React-native学习-27--回调函数的写法
Green
11-10 720
react-native中使用回调函数的频率是比较高的，特别在子组件传值给父组件时显得极其重要而且也是比较好用的一个方式！（父组件传值给子组件时使用props）。 这里记录下回调函数的写法：函数方式和变量方式 函数方式： 传递回调的函数和回调函数本身是两个不一样的（分别写着两个函数里面） 步骤： 1. 父组件中定义回调函数 this.forceUpdate() ：强制刷新界面，在props或者state没有改变的情况下刷新界面。 2. 父组件中将回调函数传递到子组件中 注意：回调函数本身
React回调函数两种常用方式
Hiroshi's
09-20 2954
1. 回调是高阶函数，需要返回一个函数 2. 匿名函数，不用高阶
生命周期回调函数
开发笔记
08-11 5113
生命周期回调函数 下面来详细介绍生命周期中的各回调函数。 getDefaultProps 在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState()，来初始化组件的状态。 componentWillMount 然后，准备加载组件，会调用 c
React组件之间的通信：子组件向父组件传递数据案例(回调函数)
qq_53008791的博客
07-15 1268
React组件之间的通信：子组件向父组件传递数据
react-todolist练习资源
05-12
4. **删除待办事项**：每个`TodoItem`组件都应包含一个删除按钮，当点击这个按钮时，触发父组件的回调函数，将对应的待办事项从`state`中移除。 5. **状态管理**：为了实现上述功能，我们需要在类组件中定义处理...
react-一些使用React钩子的小例子
08-14
`useCallback`用于优化性能，确保当依赖项未变时，回调函数不会被重新创建。`useMemo`则用于缓存计算结果，避免不必要的计算。例如，计算一个昂贵的函数： ```jsx function ExpensiveCalculation(props) { const ...
react-由社区整理的React钩子集合
08-14
- `useCallback` 用于优化性能，返回一个 memoized 回调函数，只有当其依赖项改变时，才会返回新的回调函数。 - `useMemo` 也用于优化性能，它会记住一个计算值，并且只有当依赖项变化时才重新计算。 6. **其他...
react-notes:React原型分析
03-24
同时，`setState`还接受一个回调函数，这个函数会在状态更新并完成重新渲染后被调用。 六、Redux集成 Redux是一个流行的JavaScript状态管理库，常与React一起使用。在`src`文件夹中自定义的Redux和`redux-thunk`...
React 回调函数中的this
祥哥的说
05-16 3380
当你使用ES6 class语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的Toggle组件渲染一个让用户切换开关状态的按钮： class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; ...
React中子组件向父组件传值(通过回调函数的方式)
weixin_42060658的博客
02-16 3947
1.0 在父组件中通过属性的方式将回调函数的引用传递给子组件 2.0 在子组件中通过this.props.callback(params)执行回调函数，将要传递的值通过 params参数传递回去 ...
react-native回调函数的写法
halo1416的博客
08-24 5502
react-native中使用回调函数的频率是比较高的，特别在子组件传值给父组件时显得极其重要而且也是比较好用的一个方式！（父组件传值给子组件时使用props）。 这里记录下回调函数的写法：函数方式和变量方式 函数方式： 传递回调的函数和回调函数本身是两个不一样的（分别写着两个函数里面） 步骤： 1. 父组件中定义回调函数 this.forceUpdate() ：强制刷新界面，在p...
React之字符串形式的ref
wanggang182007的博客
04-18 364
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>1_字符串形式的ref</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> ...
React —— 组件实例的三大核心属性 state，props，refs
Happyaileaf的博客
03-13 368
React —— 组件实例的三大核心属性React —— 组件实例的三大核心属性一、state介绍初始化1.借助类的构造器对state进行初始化2.简写正确地使用 State1. 不要直接修改 State2. State 的更新可能是异步的3. State 的更新会被合并，而不是覆盖实例二、props三、refs React —— 组件实例的三大核心属性 一、state 介绍 初始化 1.借助类的构造器对state进行初始化 class Clock extends React.Component { c
react Component类
JxufeCarol的博客
03-20 368
参考链接： React.Component https://react.docschina.org/docs/react-component.html 本章节提供了 React class 组件的详细 API 参考。本章节默认你已熟悉基本的 React 概念，例如 组件 & Props，以及 State & 生命周期等。如果你还未熟悉，请先阅读之前章节进行学习。 概览 React ...
React从入门到精通系列之(22)React.Component用法
weixin_33909059的博客
12-16 483
二十二、React.Component用法 组件(Components)允许您将UI拆分为独立的可重用的部分，并单独的考虑每个部分。 总览 React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类，并且至少定义一个render()方法即可使用。 你可以使用ES6中cl...
vb.net的事件触发机制_过一遍react事件机制源码
weixin_39631350的博客
11-21 189
react有一套复杂的事件机制，一句话总结react在web环境下的事件机制就是运用事件代理让document担当事件监听的职务, 当事件触发时找到react组件中绑定的所有事件回调函数并依次执行。那么，react是怎么在document上设置对应的事件监听函数，是怎么在事件触发时执行绑定的各种回调函数的呢？这篇文章就是带大家把react在web上的事件机制的代码细细捋一遍。（本文章以react　...
React用一个回调函数处理多个组件的回调，不写重复代码
tongbowen_123的博客
04-28 319
看到了一种优化代码的方法，想到了原来写多个组件的时候都是用了多个回调函数。 可以用一个回调函数处理多个组件的回调，代码如下： var Hello = React.createClass({ getInitialState: function() { return {input1: 0, input2: 0}; }, render: function() { const total = this.state.input1 + this.state.
react,函数式组件生命周期
最新发布
08-16
函数式组件没有像类组件那样的生命周期方法，因为函数式组件是以纯函数的方式编写的，它们没有实例和状态的概念。然而，React 在函数式组件中引入了一些钩子函数来实现类似的功能。 1. useEffect：可以在函数式组件中使用 useEffect 钩子来处理副作用操作，比如订阅事件、发送网络请求、操作 DOM 等。它接收一个回调函数和一个依赖数组作为参数，回调函数会在每次渲染之后执行。依赖数组用于指定当某些值发生变化时才重新执行回调函数。如果依赖数组为空，则回调函数只在组件首次渲染后执行一次。 2. useState：可以使用 useState 钩子来在函数式组件中管理状态。它返回一个状态值和一个更新状态的函数，可以通过解构赋值的方式进行使用。每次调用更新状态的函数时，组件会重新渲染。 3. useMemo 和 useCallback：这两个钩子函数可以用来优化性能。useMemo 可以缓存计算结果，只有当依赖项发生变化时才重新计算。useCallback 可以缓存函数，只有当依赖项发生变化时才返回新的函数。 此外，React 还提供了一些其他的钩子函数，如 useContext、useReducer、useRef 等，用于处理上下文、状态管理和引用等。 总结来说，函数式组件的生命周期可以通过 useEffect 和其他钩子函数来模拟和实现。它们提供了一种更简洁、灵活的方式来编写组件，并且能够满足大部分的开发需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值