移动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的方式去做整体前端架构，这样一来，对于前端组件化这块多了很多好处。

可以使用npm下载很多js开发的工具包，丰富我们很多前端应用的开发
通过npm下载babel,对JSX的支持和es6的语法糖转译，我们就可以放心的去用es6的语法去写react.js的代码
通过node.js提供的ejs模版也不失SEO友好
不用担心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

移动web端的react.js组件化方案相关推荐

React.js组件化开发第一步(框架搭建)
开始前安装 node.js; 安装 cnpm; 安装 yarn; 安装完成yarn后, 将镜像替换成国内的: $ yarn config set registry 'https://registry ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
如何在React JS组件和React JS App中添加CSS样式？
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
iOS应用架构谈组件化方案
简述前几天的一个晚上在infoQ的微信群里,来自蘑菇街的Limboy做了一个分享,讲了蘑菇街的组件化之路.我不认为这条组件化之路蘑菇街走对了.分享后我私聊了Limboy,Limboy似乎也明白了问题 ...
swift 组件化_打造完备的iOS组件化方案：如何面向接口进行模块解耦？
作者 | 黑超熊猫zuik,一个修行中的 iOS 开发,喜欢搞点别人没搞过的东西,钻研过逆向工程.VIPER 架构和组件化. 关于组件化的探讨已经有不少了,在之前的文章 iOS VIPER架构实践(三 ...
五,iOS应用架构谈组件化方案
简述前几天的一个晚上在infoQ的微信群里,来自蘑菇街的Limboy做了一个分享,讲了蘑菇街的组件化之路.我不认为这条组件化之路蘑菇街走对了.分享后我私聊了Limboy,Limboy似乎也明白了问题 ...
iOS应用架构谈（5）组件化方案
简述前几天的一个晚上在infoQ的微信群里,来自蘑菇街的Limboy做了一个分享,讲了蘑菇街的组件化之路.我不认为这条组件化之路蘑菇街走对了.分享后我私聊了Limboy,Limboy似乎也明白了问题 ...

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

移动web端的react.js组件化方案相关推荐

最新文章

热门文章