react学习之组件与生命周期函数

最新推荐文章于 2024-03-29 22:06:38 发布
最新推荐文章于 2024-03-29 22:06:38 发布
阅读量1k 收藏 26
点赞数 15
分类专栏： 程序员 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84008985/article/details/137157600
版权

上面就是一个函数组件的表达形式，很显然的就可以看出，在这个函数组件中我们传递了一个参数props，如果我们要去调用这个组件就可以通过这个参数去调用

4.有状态组件

其书写方式与类的书写方式类似，因此在这里我将其称为类组件

上面的类组件，你可以看出其采用了书写类的方式去进行描述，这种语法表示是es6中的表达方式。在学过面向对象变成的语言时，这种以类的形式书写的语法随处可见。其与函数组件不同的是，你需要将你想要展示的内容放在render方法之中。

那么为什么要这样去将组件分为有状态组件与无状态组件呢？下面的这个例子就很自然而然的表达出原因

在上面的这个例子中，我们可以看出我们的目的是将时间实时的展示在页面上，也可以很自然而然的知道，这种方式是在实时的更新整个组件，这样做的话就大大的降低了性能，降低了运行速度，这种方式显然是不可取的。那么就有了接下来的这种形式

最低0.47元/天 解锁文章
2401_84008985
关注
  • 15
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React组件的生命周期
Darlingmi的博客
10-08 965
一、什么是生命周期       组件的生命周期就是React的工作过程，就好比人有生老病死，自然界有日月更替，每个组件在网页中也会有被创建、更新和删除，如同有生命的机体一样。       React组件的生命周期可以分为三个过程 装载(挂载)过程（mount）：就是组件第一次在DOM树中渲染的过程。 更新过程（update）：组件被重新渲染的过程。 卸载过程（unmount）：组件从DO
React组件生命周期详解
12-03
调用流程可以参看上图。 React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下： 实例化 存在期 销毁期 实例化 首次调用组件时，有以下方法会被调用（注意顺序，从上到下先后执行）： getDefaultProps 这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式： //es7 class Component { static defaultProps = {} } //或者也可以在外面定义
浅谈React Native 中组件的生命周期
01-19
概述 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图： 如图，可以把组件生命周期大致分为三个阶段： 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面； 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。 生命
React生命周期原理与用法踩坑笔记
11-21
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考，具体如下： React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲 Unmounting：已移出真实 DOM componentWillMount 在渲染前调用,在客户端也在服务端。 生命周期介绍 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方
关于React组件生命周期函数的详解
柯晓楠
03-04 2736
1、生命周期的概念 1.1、概念 在组件创建、组件属性更新、组件被销毁的过程中，总是伴随着各种各样的函数执行，这些在组件特定时期，被触发执行的函数，统称为组件的生命周期函数。 1.2、组件生命周期三个阶段 加载阶段（Mounting）：在组件初始化时执行，有一个显著的特点：创建阶段生命周期函数在组件的一辈子中只执行一次； 更新阶段（Updating）：属性和状态改变时执行，根据组件的s...
React 组件生命周期
似水流年QC的博客
12-18 1354
componentDidMount（组件挂载）------ 一般在这个钩子中做一些初始化的工作，比如：开启定时器，发送网络请求，订阅消息。componentWillUnmount（组件销毁） ------ 一般在这个钩子中做一些收尾的工作，比如：关闭定时器，取消订阅消息。3. Unmounting（卸载阶段）------ 销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理。当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期。
React 之组件的生命周期
weixin_50828895的博客
02-24 1151
组件的生命周期一、生命周期概述二、生命周期的三个阶段1、创建阶段2、更新阶段3、卸载阶段 一、生命周期概述 生命周期： 组件从创建到加载运行再到不用卸载的整个过程就是生命周期 （创建 --> 加载运行 --> 卸载） 掌握组件生命周期有助于我们理解组件的运行方式，完成更复杂的功能，分析组件错位u原因以及解决错误 生命周期的每个阶段中都有一些方法调用，这些方法就是生命周期的钩子函数，钩子函数能够实现更多的功能 只有类组件才有生命周期 二、生命周期的三个阶段 1、创建阶段 执行时机：只要页面一经
React组件的生命周期函数
热门推荐
m0_71485750的博客
09-25 1万+
注意这个不常用不是我说的, 实在React官网中, 官方列举的。
react类式组件的生命周期和useEffect实现函数组件生命周期
m0_54741495的博客
11-10 1227
初始化自动更新手动更新卸载。
React的生命周期函数详解
最新发布
2401_84009065的博客
03-29 1021
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
ReactNative中组件的生命周期
02-25
RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下...
React中组件的生命周期(详细)
MaNqo的博客
07-27 1328
组件的生命周期 今天学习了组件的生命周期~ 理解 生命周期的回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子 组件从创建到死亡经历的一些特定的阶段 React组件中包含一系列钩子函数(生命周期回调函数)，会在特定的时刻调用 我们在定义组件的时候，会在特定的生命周期回调函数中做特定的工作。 1 .组件的挂载和卸载 首先讲一下出生与死亡——挂载与卸载。 （1）当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器。
day03—React组件生命周期
Evelyn的前端学习之路
06-25 164
react生命周期
React的生命周期详细讲解
zayyo的博客
02-28 3363
当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新render以及render之前的生命周期，则 父组件先执行render以及render之后的声明周期，则子组件先执行，并且是与父组件交替执行当子组件进行卸载时，只会执行自身的生命周期，不会再触发别的生命周期。
【React】生命周期详解
qq_45677671的博客
04-27 2952
文章目录constructor(props) constructor(props) React组件的构造函数在挂载之前被调用。 在使用React.Component构造函数时： 需要先在添加其他内容前，调用super(props) 用来将父组件传来的props绑定到这个类中 使用this.props将会得到。 官方建议： 不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。 constructor中应当做些初始化的动作 如：初始化
react中组件的生命周期函数
大口喝脉动的博客
07-27 1582
react中组件的生命周期函数主要分为三个阶段，分别为： 1.初始化阶段:由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount()=====>常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅...
react组件生命周期函数
09-13
React 组件生命周期函数可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。以下是这些生命周期函数的详细解释： 1. 挂载阶段： - constructor: 组件实例化时调用，用于初始化状态和绑定方法。 - static getDerivedStateFromProps: 在组件实例化和更新时调用，用于根据新的属性计算状态的值。 - render: 渲染组件的内容，返回一个 React 元素。 - componentDidMount: 在组件挂载后调用，可以进行一些副作用操作，如发起网络请求或添加事件监听器。 2. 更新阶段： - static getDerivedStateFromProps: 在组件接收到新属性时调用，用于根据新的属性计算状态的值。 - shouldComponentUpdate: 决定组件是否需要重新渲染，默认返回 true。可以根据新旧属性或状态进行性能优化。 - render: 重新渲染组件的内容。 - componentDidUpdate: 组件更新后调用，可以进行一些副作用操作，如更新 DOM 或发起网络请求。 3. 卸载阶段： - componentWillUnmount: 在组件被卸载前调用，可以进行一些清理操作，如取消订阅或清除定时器。 此外，还有一些其他的生命周期函数已经被废弃或不推荐使用，包括 componentWillMount、componentWillReceiveProps 和 componentWillUpdate。应尽量避免在新项目中使用这些生命周期函数，并使用上述提到的新生命周期函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值