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

6.shouldComponentUpdate

这个函数提供给我们这些开发者是否允许数据源发生改变后去执行Render的控制权。默认这个函数始终返回true。返回false的话,render函数不会执行,componentWillUpdate和componentDidUpdate也不会执行。可以在这个函数中去执行逻辑判断,是否有必要去执行Render。为了追求更高的性能。可以手动去控制是否执行Render。

在开发过程中这些生命周期函数是我使用最频繁最常见的React操作。

学习React,只要掌握我们只关心数据源,并进行setState,去更新state触发Render就ok了。到此为止，React中的生命周期大致记录到这,以备忘记,进行复习只用。

React入门并不难,但是深入.....

作者信息
原文作者系力谱宿云 LeapCloud旗下MaxLeap 团队_UX成员：zhiyingzzhou 【原创】
力谱宿云首发地址：https://blog.maxleap.cn/archives/1033
作者简介：前端新人，现任MaxLeap UX团队成员,主要从事于react开发,一直对hybrid混合app感兴趣。

相关文章
webpack 入门

关于MaxLeap
MaxLeap 为App开发、运营提供一站式后端云服务， 包括应用开发所需的后端云数据库、云数据源、云代码、云容器、 IM、移动支付、应用内社交、第三方登录、社交分享等基础服务，以及针对应用运营的数据分析、推送营销，用户支持等服务， 覆盖移动应用的研发、运营完整生命周期，致力于让移动应用开发运营更快速简单。