ReactJS 开发过程当中的一些使用心得

ReactJS做为目前最火的构建用户界面的前端框架，为何有那么多的前端工程师去追逐它，不只由于它简单，并且它提供了一系列强大的API让咱们摆脱之前繁琐的DOM操做，使咱们的逻辑更加清晰，代码更加简单。

一.项目所用的各类框架

在我目前开发的项目中,前端UI框架使用的是framework7,ReactJS用来构建用户界面,reflux用来操做数据(主要负责数据请求和数据操做)。

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?下面是来自React中文文档的说明:

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中去判断把已经初始化的函数进行清理,避免形成屡次初始化。

unmount

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/archives/1033做者简介：前端新人，现任MaxLeap UX团队成员,主要从事于react开发,一直对hybrid混合app感兴趣。