与jQuery对比来初探React - 简书
与jQuery对比来初探React
任务：利用React编写一个Tweet Box。
没有文字输入，tweet按钮不可点击；未添加图片时图片按钮显示Add Photo,添加图片后显示Photo Added。
另外，只要添加了图片，tweet按钮就可以点击，即使未输入文字。
一张图片相当于23个文字的长度，这儿仅用toggle来模拟添加图片就好；
超出文字部分高亮显示（在这儿，我们把多余字符拿到textarea外面高亮了，简单一些）；
效果图是这个样子滴 （关于丑陋的样式大家就先别计较了）
先来用jquery实现一下
&!DOCTYPE html&
&script src="jquery.js"&&/script&
&link href="/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&
&script src="/bootstrap/3.3.5/js/bootstrap.min.js"&&/script&
&meta charset="utf-8"&
&div class="container"&
&div class="well clearfix"&
&div class="alert alert-warning hidden "&
&strong&Oops! Too Long:&/strong& ...&span class="beforeOverflow"&&/span&&strong class="bg-danger" &&/strong&
&textarea class="form-control"&&/textarea&
&button class="btn btn-default pull-right tweet"&Tweet&/button&
&button class="btn btn-default pull-right photo"&Add Photo&/button&
&span class="pull-right"&140&/span&
&script type="text/javascript"&
$(function(){
var tweet=$('.tweet'),
textVal=$('textarea'),
photo=$('.photo'),
characters=$('span');
tweet.prop("disabled",true);
textVal.on("input",function(e){
len=$(this).val().
tweet.prop('disabled',false);
tweet.prop('disabled',true);
if(photo.hasClass('isOn')){
characters.text(140-23-len);
characters.text(140-len);
remainingCharaters();
photo.on("click",function(e){
if(photo.hasClass('isOn')){
photo.removeClass('isOn').text('Add Photo');
characters.text(140-len);
if(len==0){
tweet.prop('disabled',true);
photo.addClass('isOn').text('Photo Added');
characters.text(140-23-len);
if(len==0){
tweet.prop('disabled',false);
remainingCharaters();
function remainingCharaters(){
var num=parseInt(characters.text());
console.log(num);
if(num&=0){}
if(photo.hasClass('isOn')){
$('.beforeOverflow').text(textVal.val().substring(130-23,140-23));
$('.bg-danger').text(textVal.val().substring(140-23));
$('.beforeOverflow').text(textVal.val().substring(130,140));
$('.bg-danger').text(textVal.val().substring(140));
$('.alert.alert-warning').removeClass('hidden');
从以上代码中大家可以看出，tweet按钮的点击与字数超出后的警示都是和剩余字数相关的，而剩余字数又和textarea和add photo按钮有关，因此这两个事件严重耦合在一起，每次为实现需求做条件判断时，几乎每次都要把另外一个事件对剩余字数的影响考虑进来。这个功能还算是比较简单的，如果耦合的事件再多一些，那么我们在每一个事件发生时，都要做很多判断，然后再去操作对应的DOM，这真的是个体力活儿。
而 react,在这方面就做的比较让人省心了，它仅仅需要我们去关注当前的状态。它就像是一个有限状态机，我们只需对于不同状态去设置相应的表现就好，而不用像jquery那样时时刻刻去记着其它事件带来的影响。下面是react的实现：
&!DOCTYPE html&
&script src="jquery.js"&&/script&
&link href="/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&
&script src="/bootstrap/3.3.5/js/bootstrap.min.js"&&/script&
&script src="./react-demos-master/build/react.js"&&/script&
&script src="./react-demos-master/build/react-dom.js"&&/script&
&script src="./react-demos-master/build/browser.min.js"&&/script&
&meta charset="utf-8"&
&title&JS Bin&/title&
&div id="example"&&/div&
&script type="text/babel"&
var TweetBox = React.createClass({
getInitialState:function(){
photoAdded:false
handleChange:function(e){
this.setState({
text:e.target.value
remainingCharacters:function(e){
if(this.state.photoAdded){
return 140-23-this.state.text.
return 140-this.state.text.
togglePhoto:function(e){
this.setState({
photoAdded:!this.state.photoAdded
overflowText:function(e){
if(this.remainingCharacters()&=0){}
var beforeOverflowText,afterOverflowT
if(this.state.photoAdded){
beforeOverflowText=this.state.text.substring(140-23-10,140-23),
afterOverflowText=this.state.text.substring(140-23);
beforeOverflowText=this.state.text.substring(140-10,140),
afterOverflowText=this.state.text.substring(140);
&div className="alert alert-warning"&
&strong&Oops! Too Long:&/strong& ...{beforeOverflowText}&strong className="bg-danger" &{afterOverflowText}&/strong&
render: function() {
& div className = "well clearfix" &
{this.overflowText()}
& textarea className = "form-control" onChange={this.handleChange}& & /textarea&
& button className = "btn btn-primary pull-right" disabled={this.remainingCharacters()===140} & Tweet & /button&
&button className="pull-right btn btn-primary" onClick={this.togglePhoto}& {this.state.photoAdded?"Photo Added":"Add Photo"}&/button&
&span className="pull-right"&{this.remainingCharacters()}&/span&
&/div & );
ReactDOM.render( & TweetBox / & , document.getElementById("example"));
本案例摘抄自： ，这里对两种做了详细的分析对比，值得一看。
为什么使用React?
虽然在这个例子中，是用react在代码量上对比jquery没有看出优势，但是要记得，react可是为不断扩大的项目而生的。对于逻辑复杂的组件来说使用react是相当方便的，因为在这个过程中我们只用去考虑组件当前的状态和可能的改变，而不是像jquery去不断的操作DOM，不断去判断各种情况，然后在几个方法之间来回穿梭。react的逻辑很符合我们对现实世界的认知，状态改变之后，会自动的去render，从而改变展示。
简单 ：只要表达出这个程序在该段时间应该长什么样，当底层数据变化时，React会自动处理所有界面的更新。
声明式：数据变化后，会自动刷新，但只更新变化的部分。
虚拟DOM机制，每当数据变化，React会重新构建整个DOM树，将当前DOM树和上一次的作比较，这一过程都通过虚拟DOM进行，最后将需要变化的部分进行实际渲染更新。
组件化【React对你的唯一要求】：
和MVC思想的框架不同，每个组件独立封装，功能独立，我们只需关心自己部分的逻辑。与单一功能原则相同：独立的组件应该只做一件事情。
预渲染特性——Pre-rendering
虚拟DOM不依赖浏览器，可以在任何javascript环境执行。所以在后端运行代码也能渲染整个DOM，生成HTML字符串，返回给浏览器。这样，页面SEO和首次打开速度都可以解决。
rails项目中只要使用react-rails gem 就可以在rails后端渲染前端React组件。
do whatever it takes，just get the product launched自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取，志存高远.成就梦想，只争朝夕.从你开始，创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
今天，我们来学习使用 React、Redux 和 Bootstrap 实现Alert。
这个例子实现了弹出不同类型信息的功能，这些信息默认会在5秒后消失，你也可以手动点击使其消失。如果你在服务端有信息要提示，还可以通过 Redux 的单一数据源传到客户端在渲染页面时显示出来。
开发环境下运行：
生产环境下构建：
npm run build
为何使用 Redux ？
React 有自己的局部状态（Local State），可以帮助我们在不同状态下渲染不同的界面。那么实现 Alert 为何要使用 Redux ？众所周知，Alert 通常都是要在程序中全局使用的：
用户操作可能会发出 Alert。
网络请求等异步事件的处理器（Event Handler）可能会发出 Alert。
甚至服务器渲染页面时，也可能会给客户端带来一个Alert（比如，你提交表单出错了，服务器重定向到表单页面，并显示错误提示）。
知道了 Alert 要全局使用，我们再来看 Redux。Redux 有一个全局单一的数据源，这个数据源可以通过 react-redux 连接到程序的任意一个组件。不但如此，更新这个数据源的 action，也可以全局使用：
用户操作可以发起 action。
网络请求等异步事件的处理器（Event Handler）可能会发起 action。
甚至在服务器端也可以发起 action，然后将单一数据源传给客户端继续使用。
Redux 牛逼的设计让处理全局状态变得特别方便，实现 Universal 渲染（有些人喜欢叫SSR，但我觉得不准确）也变得非常容易。这与实现 Alert 的需求非常吻合，因此，本文通过 Redux 来辅助实现 Alert。从另一个方面来说，一些不在全局使用的组件和功能，一般使用React的局部状态就可以了，切记不要什么功能都用 Redux 实现。
了解了为何要使用 Redux，我们就开始动工吧！
快速创建项目
搭建一个 React APP 的成本是很高的，你需要：
使用 Webpack 打包。
使用 Babel 编译。
搭建开发服务器。
使用 ESLint 进行语法检查。
使用 Mocha 或 Jest 进行测试。
很多人诟病这一点，不过这些东西都是重复性的体力活，社区早就造好了轮子，来提高生产力。本文就使用了&&来快速搭建项目。All you need is these command:
npm install -g create-react-app
create-react-app my-app
cd my-app/
然后上述所有东西就都有了！
注意，要将 npm 设为淘宝源或你自己公司的私有 npm 源（只要快就行），否则速度会非常慢，甚至可能导致安装失败。
接下来，我们就开始编写代码。
设计编写 Redux
在一个 React 与 Redux 中的程序中，React 负责程序界面，而 Redux 负责程序功能。由于本例界面比较容易，所以我们先来设计 Redux。
我们期望的Alert 的功能包括：
显示一条信息。
隐藏一条信息。
显示一条信息，过几秒自动隐藏。
如果服务器传来有信息，在页面渲染完，过几秒也自动隐藏。
功能明确了，让我们把它们写成函数：
alertMessage
hideAllAlert
src/alert/redux.js
export const ALERT_SHOW = 'ALERT_SHOW';
export const ALERT_HIDE = 'ALERT_HIDE';
export function alertShow(messageText, messageType, key) {
type: ALERT_SHOW,
payload: {
messageText, messageType, key
export function alertHide(key) {
type: ALERT_HIDE,
payload: { key }
export function alertMessage(messageText, messageType, delay = 5000) {
return (dispatch, getState) =& {
if (typeof messageText === 'string' && ['success', 'warning', 'danger', 'info'].indexOf(messageType) & -1) {
const key = getState().alerts.lastKey + 1;
dispatch(alertShow(messageText, messageType, key));
setTimeout(() =& dispatch(alertHide(key)), delay);
console.error('messageText must be string and messageType must be success, warning, danger, info');
export function hideAllAlert(delay = 5000) {
return (dispatch, getState) =& {
getState().alerts.items.forEach((item) =& {
setTimeout(() =& {
dispatch(alertHide(item.key));
}, delay);
尽管部分逻辑有点复杂，但都封装在 action 创建函数中了，多么清晰和模块化！接下来，我们编写 reducer 来根据这些 action，进行 state 的更新。src/alert/redux.js
export default function (state = { lastKey: -1, items: [] }, action) {
switch (action.type) {
case ALERT_SHOW:
items: [...state.items, action.payload],
lastKey: state.lastKey + 1
case ALERT_HIDE:
items: state.items.filter(item =& (item.key !== action.payload.key))
return state;
这里使用了解构赋值和重写的语法来保证 state 的不可变（Immutable）。
Redux 的 state 要求是不可变数据，这么做的原因是方便进行快速变更检查，进而有利于React组件判断是否需要重新渲染（re-render）。另外，不可变数据还有利于进行状态回退，错误追踪。不可变数据是函数式编程中一个常用的概念。关于不可变以及函数式编程在 React 与 Redux 中的应用，&这本书中有非常详细的介绍，推荐阅读参考。
至此，Redux的编写就完成了。它的输出有四个：
reducer函数，用于创建store。
alertHide 函数用于隐藏指定信息。
alertMessage 函数用于显示一条信息，并在几秒后隐藏。
hideAllAlert 函数用于在渲染完页面后，过几秒隐藏服务器传来的信息。
接下来，我们来编写 React 组件。
设计编写 React 组件
React 组件的功能包括三个：
渲染要显示的信息，并根据类型渲染成不同颜色。
为每条信息渲染一个按钮，使用户可以通过点击按钮隐藏该信息。
在第一次渲染后，过几秒隐藏来自服务器的信息。
为此，我们做了以下几件事：
首先，使用 react-redux 的 connect 将 Redux 的 state 和 action 创建函数传给组件。
然后在组件中遍历渲染出所有信息（使用了 react-bootstrap 提供的 Alert 组件）。
最后，将 alertHide 函数绑在按钮的点击事件上，将 hideAllAlert 函数绑在组件渲染后的生命周期钩子上。
组件功能就实现了！
src/alert/AlertList.js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Alert from 'react-bootstrap/lib/Alert';
import { hideAllAlert, alertHide } from './redux';
class AlertList extends Component {
static propTypes = {
alerts: PropTypes.array.isRequired,
hideAllAlert: PropTypes.func.isRequired,
alertHide: PropTypes.func.isRequired
componentDidMount() {
this.props.hideAllAlert();
render() {
const { alerts, alertHide } = this.props;
为了让 connect 可以获取到 Redux 的 state 和 dispatch 方法，我们还需要在组件顶部提供store。
src/index.js
为了使用 bootstrap，还需要安装 bootstrap，并引用它的样式文件。
npm i bootstrap@3 --save
src/index.js
import 'bootstrap/dist/css/bootstrap.css';
至此，所有功能就都实现了！在后续的文章中，我们将介绍如何测试本例编写的 Redux 函数以及 React 组件。要知道，写测试是一个工程师走向成熟的必经之路，而且在 React 与 Redux 的应用中编写测试简直太方便了！
Redux 适合实现全局性的组件和功能，一些局部使用的功能使用 React 的局部状态即可。
推荐使用 create-react-app 来快速搭建React应用。
Redux 的 action 创建函数与要实现的功能一一对应。
Redux 的 state 为不可变数据。
使用 react-redux 的 connect 将 Redux 的 state 和 action 创建函数连接到组件，进而渲染界面，绑定事件。
教程源代码及目录
如果您觉得本博客教程帮到了您，就赏颗星吧！
阅读(...) 评论()
随笔 - 15894
评论 - 1301}