zoukankan      html  css  js  c++  java
  • ReactJS 开发过程中的一些使用心得

    ReactJS作为目前最火的构建用户界面的前端框架,为什么有那么多的前端工程师去追逐它,不仅因为它简单,而且它提供了一系列强大的API让我们摆脱以前繁琐的DOM操作,使我们的逻辑更加清晰,代码更加简单。

    一.项目所用的各种框架

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

    Framework7不仅提供了UI界面,而且还封装了一堆类似jQuery的DOM操作API,而ReactJS是facebook工程师开发的构建用户界面的前端类库,提供了强大的diff算法,在内存中直接操作虚拟DOM,所以Framework7ReactJS结合,有点不伦不类。

    因为我们只需要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感兴趣。

  • 相关阅读:
    A Node Influence Based Label Propagation Algorithm for Community detection in networks 文章算法实现的疑问
    Fast Newman-FN算法以及模块度定义介绍
    Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现
    设计一个smartnic
    Intel GEN11 GPU
    Intel GEN9 GPU
    Shared Virtual Memory (SVM) Functions
    connect via ssh to virtualbox guest vm without knowing ip address
    smartnic
    技术精品翻译
  • 原文地址:https://www.cnblogs.com/zhou195/p/6909175.html
Copyright © 2011-2022 走看看