摘要：目前开发的项目中为了仿原生效果如果自己去通过重新实现的话成本极大所以不得不使用来作为前端库。可以在这个函数中清理在绑定的事件这个方式很有用。在开发过程中这些生命周期函数是我使用最频繁最常见的操作。
一.项目所用的各种框架ReactJS作为目前最火的构建用户界面的前端框架，为什么有那么多的前端工程师去追逐它，不仅因为它简单，而且它提供了一系列强大的API让我们摆脱以前繁琐的DOM操作，使我们的逻辑更加清晰，代码更加简单。
Framework7不仅提供了UI界面,而且还封装了一堆类似jQuery的DOM操作API,而ReactJS是facebook工程师开发的构建用户界面的前端类库,提供了强大的diff算法,在内存中直接操作虚拟DOM，所以Framework7和ReactJS结合,有点不伦不类。
因为我们只需要framework7提供的UI样式,而并不需要它那一堆操作DOM的API,对于没有接触过ReactJS的新同学来说,思维肯定难以转变,可以直接操作DOM那肯定比较爽,react通过state直接更改界面样式的一边玩去吧！所以造成开始进入这项目时,我也是直接操作DOM,所以造成前期代码紊乱,后期维护困难。中途过程中,对于framework7没有的dom操作API,我又引入的Jquery和各种类库。
而且由于我们项目使用的是spa模式,所以造成后期通过webpack打包的bundle.js多达4M,在低端android机上,加载时间长达几十秒。其实使用react开发的项目完全没必要再引入操作DOM的前端框架,react操作虚拟DOM的性能和速度完全不是直接操作DOM可比的。那样只会造成的应用的卡顿和加载缓慢。
目前开发的项目中为了仿原生ios效果(如果自己去通过React重新实现的话,成本极大),所以不得不使用Framedmework7来作为前端UI库。
二.ReactJS简单的介绍React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。
很多人认为 React 是 MVC 中的 V（视图）。
我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。
1:仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新
2:数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。
下面谈谈我对React上面两个思想的理解:
1.React有着极其强大的API,当数据源发生改变,都会触发Render,这也就意味着你只需要关注数据整体,其他的一切React这个框架会去完成,降低了开发的难度和逻辑的复杂程度。
2.当数据源改变之后,React会在内存中通过diff算法,去比较数据源是否发生更改,在去决定是否更改DOM。因为React有一个非常强大的虚拟DOM系统,所以会在内存中去完成对DOM的所有操作,随后在通过Render函数把对DOM的修改反应到实际DOM中。
许多人一听,React那么强大,是不是很难？其实非也,React中API少的可怜,非常简单易懂,最常用的也就几个生命周期函数和Render。
三.React中的生命周期1.componentDidMount
组件已经加载到DOM中会执行这个函数,在这个函数中可以初始化一些将要执行的函数,在React生命周期中只会执行一次。在开发中,在该函数中执行的setState，在随后通过this.state并不能够马上拿到,可以通过定时来获取。
2.componentWillMount
在组件将要挂载到DOM中执行,这个函数我基本上很少用到。初始化工作我基本上在constructor和componentDidMount中去完成。
3.componentWillUnmount
组件从DOM中移除会执行这个函数,在此可以清理无用的DOM和事件。
4.componentWillUpdate
组件将要更新执行。可以在这个函数中清理在componentDidUpdate绑定的事件(这个方式很有用)。
5.componentDidUpdate
组件已经更新执行这个操作。可以在这个函数中初始化需要state中的数据源作为参数的函数。为了防止初始化多次,可以在componentWillUpdate中清理。看下面这个需求:
需要实现一个一元夺宝模块,导航栏下有一个tab栏显示一元夺宝共进行了多少期,当前期数默认第一个tab显示(可滑动)。如下图:
这个使用的是swiper.js来实现的。只能在从服务器获取到期数后实现,所以我们在compoenntDidUpdate中去初始化:
但是我们同时可能又会去获取购物车数量等等进行其他更新state的操作,根据React的生命周期,只要state发生改变,就有可能(shouldComponentUpdate返回true)会去执行componentDidUpdate。这样就会造成这个函数的多次初始化。所以我们必须在componentWillUpdate中去判断把已经初始化的函数进行清理,避免造成多次初始化。
6.shouldComponentUpdate
这个函数提供给我们这些开发者是否允许数据源发生改变后去执行Render的控制权。默认这个函数始终返回true。返回false的话,render函数不会执行,componentWillUpdate和componentDidUpdate也不会执行。可以在这个函数中去执行逻辑判断,是否有必要去执行Render。为了追求更高的性能。可以手动去控制是否执行Render。
在开发过程中这些生命周期函数是我使用最频繁最常见的React操作。
学习React,只要掌握我们只关心数据源,并进行setState,去更新state触发Render就ok了。到此为止，React中的生命周期大致记录到这,以备忘记,进行复习只用。
React入门并不难,但是深入.....
作者信息
原文作者系力谱宿云 LeapCloud 团队_UX成员：zhiyingzzhou 【原创】
首发地址：https://blog.maxleap.cn/archi...
作者简介：前端新人，现任MaxLeap UX团队成员,主要从事于react开发,一直对hybrid混合app感兴趣。
相关文章
webpack 入门
关于我们
MaxLeap 为App开发、运营提供一站式后端云服务， 包括应用开发所需的后端云数据库、云数据源、云代码、云容器、 IM、移动支付、应用内社交、第三方登录、社交分享等基础服务，以及针对应用运营的数据分析、推送营销，用户支持等服务， 覆盖移动应用的研发、运营完整生命周期，致力于让移动应用开发运营更快速简单。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90836.html
摘要：前言在应用开发中，列表是我们使用频率非常高的一种展现形式，在项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。不要用索引当值要求我们对列表中的每一项设置一个唯一的值，这个虚拟的算法有很大关系。 前言 在应用开发中，列表是我们使用频率非常高的一种展现形式，在reactjs项目中更是如此。无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹。 下面就我最近的总结出的几点...
摘要：文章图片存储在，网速不佳的朋友，请看使用心得加速双刃剑或者来我的技术小站本文以腾讯云平台的服务为例，记录下在个人网站开发和公司项目实战中的对使用的心得便宜没好货。此时，更应该使用来提速。 文章图片存储在GitHub，网速不佳的朋友，请看《CDN 使用心得：加速双刃剑》 或者 来我的技术小站 godbmw.com 本文以腾讯云平台的 CDN 服务为例，记录下在个人网站开发和公司项目实战中...
摘要：文章图片存储在，网速不佳的朋友，请看使用心得加速双刃剑或者来我的技术小站本文以腾讯云平台的服务为例，记录下在个人网站开发和公司项目实战中的对使用的心得便宜没好货。此时，更应该使用来提速。 文章图片存储在GitHub，网速不佳的朋友，请看《CDN 使用心得：加速双刃剑》 或者 来我的技术小站 godbmw.com 本文以腾讯云平台的 CDN 服务为例，记录下在个人网站开发和公司项目实战中...
摘要：目前只是体会到组件之间传递的值的初始来源一般都是值，可能是实践不够的原因。。。此时，可以建一个组件内部封装一个构造函数，内部封装三个方法。 PS：开头的一段废话 想起一个月前还不知道reactjs该如何下手的而今天有点小体会，还是有点小欣慰，不过回望一些走过的坑和开始时的满头浆糊觉得还是有点恐怖的。今天分享一点实践中的小心得给新手朋友们。 reactjs的es6语法形式 ...
阅读 532·2021-11-25 09:44
阅读 2614·2021-11-24 09:39
阅读 2268·2021-11-22 15:29
阅读 3501·2021-11-15 11:37
阅读 3352·2021-09-24 10:36
阅读 2470·2021-09-04 16:41
阅读 940·2021-09-03 10:28
阅读 1775·2019-08-30 15:55
