React入门系列1——初识

前端

关于作者

norrix = 菜鸟程序员
blog = norrix.github.io
转载请注明出处：http://norrix.github.io/2015/08/22/react_intro_series_1/
[虽然我知道没人会转但我还是得声明一下(・`ω´・)]

什么是React

React是一个创建可复用、相互独立web组件的js库。

React适用于随着时间推移，数据大量变化的场景。当数据发生变化，在React中可以通过定义好的接口对设计元素（按钮、表单、布局等）进行复用，而且为保证组件被正确使用，React提供了validator来验证传入数据的有效性。在React中，整个UI都是组件化的，并将UI分成不同的组件，每个组件都是独立封装的，组件只需要关心自己的逻辑功能。

对于上面这个Blog评论组件，它的渲染代码只需要这样写：

1
2
3
4
5
6
7
8
9
10
11
var CommentBox = React.createClass({
    render: function() {
        return (
            <div className = "commentBox">
                <h1>Comments</h1>
                <CommentList />
                <CommentForm />
            </div>
        );
    }
});

因为React这种将UI进行web组件化的特性，使得React从Angular、Backbone和Ember这些MVC框架中脱颖而出。同时因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

单向数据流

首先问一个问题，怎么利用JavaScript写HTML？

常用的方法是 document.getElementById("div").appendChild() 或者 .innerHTML += "<p>child</p>"。但是对React来说，DOM太麻烦了，它更希望全部重新渲染一遍，并且”always re-rendering”。这就是单向流动的”数据—>HTML”。

tips: React是支持直接渲染HTML/XML标签的，但React更推荐使用的是使用JSX语法，然后由React完成转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
// before transform (JSX):
var Nav;
var app = <Nav color="blue" />;

// after transform (JS):
var Nav;
var app = React.createElement(Nav, {color:"blue"});

// before transform (JSX):
<p className="hello">Hello, {this.props.name}!</p>

// after transform (JS):
React.createElement("p", {className: "hello"}, "Hello ", this.props.name)

好了，那么为什么要重新渲染？为什么用单向数据流？

如果不重新渲染，当数据变化，页面需要修改时，你要完成
· 向服务器请求数据
· 找到需要修改的那个DOM
· 修改数据

重要的部分就在DOM这个地方，对于含有上千甚至上万个形状的网页来说，你这个DOM太拖JS速度了，生成DOM Tree，以及DOM操作造成的浏览器堵塞都会造成卡顿，影响WebApp的使用体验。

但是重新渲染这个页面，就不会卡顿了吗？

React的“Virtual DOM”就是这样一个非DOM的解决方案。

虚拟DOM

在更新数据并重新渲染时，React完成下面的步骤
· 重建DOM树
· 寻找与上一个DOM树的差异
· 生成每一个差异的最优更新方案，diff()大法好
· 批量完成更新方案

React只是比较render返回的内容，然后再做更新。比如说

1
2
3
<li>0</li>                    
<li>1</li>
<li>2</li>

更新为

1
2
3
<li>4</li>                    
<li>5</li>
<li>6</li>

DOM：remove(), remove(), remove(), append(), append(), append()
React：innerHTML ‘0’ -> ‘4’，’1’ -> ‘5’, ‘2’ -> ‘6’
是不是快多了？

React好处还有啥

将React应用于HybridWebApp，好处大大的
· single-page的app支持页面与页面之间快速切换
· isomorphic javascript前后台通吃
· 渲染后生成HTML缓存，从而优化SEO

End