首页 > 其他分享 >react生命周期

react生命周期

时间:2023-03-28 18:44:47浏览次数:35  
标签:生命周期 prevState 渲染 react state 调用 componentDidUpdate 组件

componentWillMount:16版本就废弃了,相当于Vue中created;

componentDidMount: 会在组件挂载后(插入DOM中)立即调用;相当于Vue中的onMounted;

componentDidUpdate(prevProps, prevState, snapshot):会在更新后会被立即调用,首次渲染不会执行;相当于Vue中的onUpdated;

componentWillUnmount():会在组件卸载和销毁之前调用:相当于Vue中的unmounted

不常用的生命周期方法

shouldComponentUpdate(nextProps, nextState): 判断react组件的输入是否受当前state || props更改影响,默认state每次发生改变组件都会重新渲染。主要是性能优化;

getDerivedStateFromProps(props, state):调用render方法前调用,初始化挂载及后续更新都会被调用,返回对象来更新state,返回null不更新任何内容;

getSnapshotBeforeUpdate(prevProps,prevState)最近一次渲染输入(提交DOM节点)前调用。组件发生改变之前从DOM捕获一些信息(滚动位置);返回值将作为参数传递给componentDidUpdate();

getDerivedStateFromError(err)会在后代组件抛出错误后调用,将错误作为参数,并返回一个值更新state;

componentDidCatch(error,info)在后代组件抛出错误后被调用;

挂在阶段:

  1.constructor初始化state对象或者给自定义方法绑定this

  2.getDerivedStateFromProps:接受到新的属性想去修改state,可以使用getDerivedStateFromProps

  3.render:返回需要渲染Dom,组件等;

  4.componentDidMount:组件装载之后调用,此时可以获取到DOM节点并操作,订阅放在这里;

更新阶段:

  1.getDerivedStateFromProps:更新个挂在阶段都可能会调用

  2.shouldComponentUpdate(nextProps, nextState)表示新的属性和变化之后的state,返回一个布尔值,true表示会触发重新渲染,false表示不会触发重新渲染,默认返回true,优化react程序性能;

  3.render

  4,getSnapshotBeforeUpdate(prevProps.prevState)这个函数有一个返回值作为第三个参数传给componentDidUpdate,

  5.componentDidUpdate(prevProps,prevState,snapshot)

卸载阶段:

  1.componentWillUnmount:当组件被卸载销毁调用

 

标签:生命周期,prevState,渲染,react,state,调用,componentDidUpdate,组件
From: https://www.cnblogs.com/wangxinyubokeyuan/p/17247549.html

相关文章

  • 万字血书React—走近React
    配置开发环境脚手架工具create-react-app储备知识:终端或命令行、代码编辑器React官方中文文档create-react-app其是基于Node的快速搭建React项目的脚手架工具。npxc......
  • vue 生命周期(一)
    下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。测试代码h5 <!DOCTYPEhtml><html><head><metacharse......
  • 这是一个使用.net 6 基于wpf 、OpencvSharp(opencv的.net wrapper)、ReactiveUI等开发
    这是一个使用.net6基于wpf、OpencvSharp(opencv的.netwrapper)、ReactiveUI等开发的自用工具,主要用来做ReactiveUI与OpencvSharp学习过程中的尝试以及opencv算子参数的......
  • android 生命周期复习1
    Android开发之旅:组件生命周期(一)by吴秦引言应用程序组件有一个生命周期——一开始Android实例化他们响应意图,直到结束实例被销毁。在这期间,他们有时候处于激活状态,有时候......
  • iOS7应用开发5、视图控制器View Controller及其生命周期
    1、UITextView:该类与Label类类似,可显示多行,可以编辑内容,可以滚动查看内容;包含属性NSTextStorage*textStorage,该类是NSMutableAttributedString的基类;修改该属性可以自动更......
  • React Hook 中 useState 异步回调获取不到最新值及解决方案
    预先了解setState的两种传参方式1、直接传入新值setState(options);列如:const[state,setState]=useState(0);setState(state+1);2、传入回调函数setState......
  • react项目创建
     全局安装create-react-app脚手架环境npminstall-gcreate-react-app查看版本create-react-app-V 创建项目create-react-appmyapp ......
  • Vue介绍与生命周期详解
    一、Vue简介 Vue是一款轻量级、高性能的JavaScript框架,用于构建用户界面,它的核心是数据双向绑定和组件化。Vue的设计灵感来源于AngularJS和React,但它更加易于上手和使用......
  • 初识vue3-setup语法糖,ref和reactive语法,computde计算属性,watch开启监听
    vue3和vue2的区别1,vue3首次渲染更快(Vue3在编译和渲染性能上有了很大的提升,主要是因为使用了Proxy代理和优化算法,使得组件可以更快的渲染)2,diff算法更快3,内存占用体积......
  • react---调用 ReactDOM.render() 来修改想要渲染的元素
    调用 ReactDOM.render() 来修改想要渲染的元素function tick(){constelement1=(<div><h1>h,w</h1><h2>itis{newDate().ToLocalTimeString()}.</h2></div>);......