移动web端的react.js组件化方案

   背景：

       随着互联网世界的兴起，web前端开发的方式越来越多，出现了很多种场景开发的前端架构体系，也对前端的要求日益增高，早已经不是靠一个JQuery.js来做前端页面的时代了，而今移动端变化最大，近两年出现了React-lite.js,Vue.js,ReactNative,Weex...等一些开发方式,早期移动web端大多数基于sea.js模块化去开发，而我更倾向于组件化方式去开发，因为组件化的独立性才是为后期业务扩展，降低代码维护成本的最佳方案。

   针对移动web端组件化，本人这次引用了古映杰开发的react-lite.js来做，具体用什么方式去做？我下面一一介绍。

    首先什么是web组件化？

            1.组：组合的方式

            2.件：原子性质

            本人的理解是根据业务场景和UED设计结合抽象出来具有独立性、共用性及扩展性的Html+CSS+javascript的结合体。

    什么是JSX?

            参考http://www.cnblogs.com/kuailingmin/p/3996406.html

    为什么用react.js组件化方式去做移动web端？

            1.让代码层逻辑独立起来，尽量不要出现有很多js文件存在关联，这样写多了业务场景，后期维护成本提升，因为“蜘蛛网变大，变的密集了”

            2.利用react.js中生命周期来提升业务逻辑的扩展能力，用react.js中的Virtual DOM来提升页面渲染的性能

            3.react.js也提供了对SEO友好的方式

            4.能跨多平台开发,并能开发多种类型的前端场景，比如数据可视化，单页面应用，网页游戏。。。

            5.rendering更新可达到60fps（60fps是动力也是压力，因为它意味着只有16.7毫秒(1000 / 60)来绘制每一帧）

            6.可组合，可重用、可维护

            7.制定了独有的代码编写规范，制约了代码编写结构不清晰，混乱的现象。

 而今随着node.js环境开发的兴起，我们项目中也采用了node.js的方式去做整体前端架构，这样一来，对于前端组件化这块多了很多好处。

  1. 可以使用npm下载很多js开发的工具包，丰富我们很多前端应用的开发
  2. 通过npm下载babel,对JSX的支持和es6的语法糖转译，我们就可以放心的去用es6的语法去写react.js的代码
  3. 通过node.js提供的ejs模版也不失SEO友好
  4. 不用担心cpu主进程的膨胀，因为就node.js就一个主进程，很多个子进程。

 下面进入我的移动web方案主题：

      

      从上图主要有几个重要点：

             1.项目是在node.js环境中开发的

             2.从ejs模版返回出html字符串给浏览器渲染

             3.ejs模版中引用的js文件已经是已react-lite方式打包后的并通过babel转译es6和jsx语法糖的压缩版js

             4.css文件和js文件都放在CDN中的，通过ejs模版引入

             5.获取数据通过ajax发送请求到node.js环境去调用对应的接口。

       

      先从用react.js方式做移动web端组件化开始，首先要明确一点，项目不是用react.js最终打包压缩的js！做法是在编写代码方式上以react.js语法去写，该怎么创建组件，该怎么处理父子组件之间的通信，还是react.js方式正常去写，关键在最后生成压缩js则通过react-lite来进行，如果纯react.js打包压缩文件体积还是很大的，第一次加载性能上稍有影响，但加载完之后的UI操作却很顺畅，我们曾经尝试过纯react.js来做一个移动web端的频道页，对于3G,4G 的移动用户来说真的看不出什么变化。

先来了解下react.js的组件化写法，怎么去创建一个react.js组件：

    1.在页面要定义一个Html DOM来接收react.js定义的组件内容，例子中id为mian的就是组件容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div id="main"></div>
</body>
</html>

这里我们创建一个div并设置一个id 这个id就是我们react组件要引用到的

2.看看js里面怎么去定义组件

import React from "react";
import ReactDom from "react-dom";

class Index extends React.Component{
    render(){
        return (
            <h1>Hello!</h1>
        )
    }
}

ReactDom.render(<Index />,document.getElementById("main"));

很直观的看到3层定义，第一层先引用react.js的包，第二层class自定义一个react组件，第三层用ReactDom.render将渲染的组件内容绑定到对应的html dom元素中 去。

这就形成了react组件雏形，会点js一看都会很快明白。吐槽一下：如果这样return  Html DOM都看不懂的话，只能说你不适合写js。组件的雏形定义好了，接下来该怎么办呢？react提供了一些机制，这里介绍2个最主要的特性，也是常用关键点，一个是生命周期，另一个是虚拟DOM！

  React生命周期：

      在react.js中定义了一套生命周期的体现，这种形式是以前js框架中没有的，react的生命周期给我传递一个很直观的逻辑场景，从组件渲染之前到组件渲染之后，从第一次组件渲染到第二次组件渲染的生命周期变化，都分的很有条理，还给我最大的感受就是针对多种业务场景都能游刃有余的处理，生命周期真心很赞。感慨就到此，上图：

     react.js生命周期分4种流程：

         1.首次渲染：

                 getDefaultProps

                 getInitialState

                 componentWillMount

                 render

                 componentDidMount

        2.当属性props发生变化

             componentWillReceiveProps

             shouldComponentUpdate

             componentWillUpdate

             render

             componentDidUpdate

        3. 当状态state发生变化

            shouldComponentUpdate

            componentWillUpdate

            render

            componentDidUpdate

         4.销毁

             componentWillUnmount

有人直接看到会很懵，不要紧，下面对每个函数做一个解释，就会帮你很容易的理解了：

          getDefaultProps：组件创建之前会先调用，全局性只有一次性

          getInitialState：初始化组件状态

          componentWillMount：组件渲染之前调用，在这里可以做一个对默认属性，默认状态，和组件渲染之前的逻辑操作

          render:渲染组件，此操作会生成一个虚拟DOM存在内存中

          componentDidMount：组件渲染之后的操作，根据业务场景而定，如果有操作在此函数中处理即可

          componentWillReceiveProps：当组件中的默认属性props发生了变化，此方法被调用到

          shouldComponentUpdate：组件接收到新的props或者state的时候调用，此函数返回值决定着原来的组件结构是否重新渲染

          componentWillUpdate：组件第二次渲染之前调用

          componentDidUpdate：组件第二次渲染之后调用

          componentWillUnmount：组件销毁时调用

这些都是react.js规范好的操作流程，从命名上可以看出带有"will"的函数都是在render之前调用，带有"Did"都是在render之后调用，有个这样一个形式，在操作组件UI或扩展业务场景方便了很多。看一下在代码中是怎么呈现组件生命周期定义的：

import React from "react";
import ReactDom from "react-dom";

class Index extends React.Component{
    getDefaultProps(){
        //初始化属性
    }
    getInitialState(){
        //初始化状态
    }
    componentWillMount(){
        //组件第一次渲染之前调用
    }
    componentWillReceiveProps(){
        //当初始化属性发生变化调用
    }
    shouldComponentUpdate(){
        //组件接受到新属性或者新状态的时候调用
    }
    componentWillUpdate(){
        //第二次渲染之前调用
    }
    componentWillUnmount(){
        //销毁操作,在真正组件删除之前调用
    }
    render(){//渲染
        return (
            <h1>Hello!</h1>
        )
    }
    componentDidMount(){
        //渲染之后调用
    }
    componentDidUpdate(){
        //第二次渲染之后调用
    }
}

ReactDom.render(<Index />,document.getElementById("main"));

       接下来再看一个react.js核心虚拟DOM,这是react.js为什么能让世界接收它的最重要原因，react.js团队首创了这个革命性的想法，在现在有些js框架也开始加入虚拟DOM概念，比如vue.js2.0。在我对虚拟DOM的认知总结一句话：“就是用耍小聪明的手段简化了浏览器对DOM重复渲染的操作，耍的漂亮！”；

React虚拟DOM:

       Virtual DOM是react的精髓，不仅是页面渲染性能提升，最主要的是对DOM一层抽象，这种方式颠覆了我们对前端DOM渲染的观念，可能在浏览器端开发感觉不是很直观，而在ReactNative中开发中，这层抽象的意义变大了，在app端开发没有dom存在，而react这样的方式可以编译OC组件或者安卓的组件。总结虚拟DOM几个概念：

       1.react.js创建一个组件render之后生成一个虚拟dom（纯粹的一个js数据结构）放在内存中

       2.如果react组件发生变化时，新的Virtual DOM和老的Virtual DOM进行对比，将变得部分批量更新到真实DOM里面去

       3.老的方式如果DOM发生了变化，大多数是将页面DOM元素重新刷新一边之后数据也更新了，而虚拟dom想法是让js模拟真实DOM结构，然后在js层面做前后对比，用这样方式效率肯定是很高的，js层面工作对比完成后，再改变真实DOM，这就是快的方式。

React-lite:

       上面是介绍了react.js中2大概念，就相当一个战士一只手握着剑（虚拟DOM），一只手拿着盾（生命周期），有了这样的装备战士才能够冲进战场去作战。也了解了react组件的封装。这样正常开发就已这样方式去写代码逻辑，最终还要经过webpack打包操作的，在这个打包过程中用react-lite.js替换掉react.js,这样既简单，又减少了文件大小，并保持了生命周期和虚拟DOM主要机制。客观的讲也许不是首次加载最好的，但保证是操作UI最流畅，二次渲染最快的。react-lite最直接的解释就是移动版react.js

体积小：

    
reat-lite与react区别：

    1.react.PropType方法弃用

    2.react.js可在服务端渲染,react-lite在浏览器端渲染

    3.为了保证百分百的移植性，react-lite.js函数命名都和react.js保持一致

    4.保持react.js中的虚拟DOM,生命周期等机制

reat-lite用法：

      用法很简单，快捷，只要在webpack中打包做一些小的操作即可，先上代码看吧

var webpack = require('webpack');
//打包less插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//这里的'./css/bundle.css'设置打包地址
var ExtractLess = new ExtractTextPlugin('./css/bundle.css');
//打包多个文件插件
//var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var path = require('path');
module.exports = {
    entry:[
        './react/star/app.js'
    ],
    output:{
        path:'./zip/channels/star',
        filename:'star.pak.js'
    },
    module:{
        loaders:[
            {test: /.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel',query:{presets:['es2015','react']}},
            {test:/.less$/,loader:ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /.(png|jpg)$/, loader: 'url-loader?q=8192'}

        ]
    },
    resolve:{
        extensions:['','.js'],
        alias:{
            'react':'react-lite',
            'react-dom':'react-lite'
        }
    },

    plugins:[
       ExtractLess,
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false
            },
            mangle:{
                except:['$super','$','exports','require']
            }
        })
    ]
};

在resolve中配置alias属性，将react和react-dom全部跟换react-lite即可。一步实现react和react－lite的切换，注意webpack打包的时候会出现抛error的现象，

但是webpack提供了UglifyJsPlugin插件，帮我们很好的处理了这种打包异常，具体介绍可以看一下http://www.cnblogs.com/kuailingmin/p/5643658.html

  

 总结：

          一种技术二种方式，编写代码以react.js方式去做，打包用react-lite.js方式压缩文件，简化了js体积，实现了PC移植到移动web端的过程,成功将react.js原有的组件化方式保留并在移动web端实现应用。

              

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kuailingmin/p/5807024.html