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

Posted 2020-09-20 欲戴王冠，必承其重

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感兴趣。