Reactjs 踏坑指南1： 一些概念

Reactjs 踏坑指南1： 知识点

• 什么是React
• 虚拟DOM
• JSX
• 组件
• 生命周期和状态
• 事件
• 单项数据流
• Reactjs和Angularjs的对比

React简介

React是一个Facebook开发的UI库。使用这个库可以很方便的开发交互式的、具有表达力的和可重用的UI组件。本身并不是一个框架，可视为是视图层，并且是一个以组件为基础的高效视图。对于React应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说你的应用是由一个个组件构成的。这种分割、复用组件的方式开发页面，我们称之为组件驱动开发。

这个库还使用了一种叫做虚拟DOM（Virtual DOM）的概念，这些DOM可以根据状态有选择的渲染。这样，页面就会尽量的减少DOM操作而达到保持页面状态的效果。

• React JSFiddle 在线编辑工具
• React 入门示例

虚拟DOM

用于优化视图的渲染和刷新。以前我们更新视图时，需要先清空DOM容器中的内容，然后将最新的DOM和数据追加到容器中，现在React将这一操作放到了内存中。

详细说明一下：

虚拟 DOM 是在 DOM 的基础上建立了一个抽象层，我们对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到 DOM 中。

React 会在内存中维护一个虚拟 DOM 树，当我们对这个树进行读或写的时候，实际上是对虚拟 DOM 进行的。当数据变化时，然后 React 会自动更新虚拟 DOM，然后拿新的虚拟 DOM 和旧的虚拟 DOM 进行对比，找到有变更的部分，得出一个Patch，然后将这个 Patch 放到一个队列里，最终批量更新这些 Patch 到 DOM 中。

这样的机制可以保证即便是根节点数据的变化，最终表现在 DOM 上的修改也只是受这个数据影响的部分，可以保证非常高效的渲染。

• 关于虚拟DOM diff算法的详细分析

因为React使用了虚拟DOM，因此借助这种方式使得在服务端渲染输出HTML成为可能。

JSX

JSX在ECMAScript的基础上提供了类似于XML的扩展。

• JSX in depth

组件

使用ReactDOM的render方法的时候，第一个参数是需要渲染的我们创建的组件，第二个是HTML的DOM节点，组件渲染之后在这里添加。我们可以使用createClass方法创建组件。

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});
复制代码

注意：

• 类名一定要首字母大写
• 添加组件属性时，如果要使用class属性和for属性，属性名不能直接用class和for，因为他们两个是javascript的关键字，用className和htmlFor代替

组件创建好之后就可以在文档里渲染出来了：

ReactDOM.render(
    <MyComponent />,
    document.getElementById('mount-point')
);
复制代码

创建组件的时候，可以给组件添加一些属性，这些属性都存在于props中。这些属性可以通过this.props在组件内访问，也可以在render方法渲染时使用。

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
});

ReactDOM.render(
    <MyComponent name="handsome" />,
    document.getElementById('mount-point')
);
复制代码

生命周期和状态

生命周期

• componentWillMount 在渲染之前调用一次。
• componentDidMount 在渲染之后调用一次。
• shouldComponentUpdate 返回值决定组件是否需要update。
• componentWillUnmount 在卸载组件之前调用。

状态

• getInitialState 返回State的初始值。
• getDefaultProps 获取props的初始值。
• mixins 一组对象，主要用来扩展当前组件的功能。

每一个组件都包含一个state对象和一个props对象。State（状态）用setState方法设置。调用setState方法会触发UI的更新，也是实现交互式开发的必要基础。如果我们要在一开始设定初始状态（initial state），可以调用getInitialState方法。

state用来在创建组件的时候设置属性，props用于渲染的时候生成想组件绑定属性？

var MyComponent = React.createClass({
    getInitialState:function(){
        return {
            count: 5
        };
    },
    render: function(){
        return (
            <h1>Hello, {this.state.count}!</h1>
        );
    }
});
复制代码

事件

作为属性包含在组件中

var Counter = React.createClass({
    incrementCount: function(){
        this.setState({
            count: this.state.count + 1
        });
    },
    getInitialState: function(){
        return {
            count: 0
        }
    },
    render: function(){
        return (
            <div class="my-component">
                <h1>Count: {this.state.count}</h1>
                <button type="button" onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
});

ReactDOM.render(
    <Counter />,
    document.getElementById('mount-point')
);
复制代码

单向数据流

在jquery时代，我们都是基于事件驱动，对于简单的交互需求而言，这确实足够了，而且开发起来非常迅速。但业务一旦复杂，这种基于事件驱动的东西就会变得很乱，页面需要更新的DOM很多，就容易出错。

单向数据流的概念就出现了。更新 DOM 的数据总是从顶层流下来，用户事件不直接操作 DOM，而是操作顶层数据。这些数据从顶层流下来同时更新了DOM。你的代码就很少会直接处理DOM，而是只处理数据的变更。这样会很大程度上简化代码和逻辑。

举个例子：我点击一个button，然后页面上一个span里数字+1，原有的思考逻辑是“点击发生，然后数据变化，然后UI跟着变化+1”。而现在的思考逻辑是我的数据变化了，那么我的UI会自动更新，那么我只用考虑“点击发生，数据变化”。甚至可以把UI和数据变化分层然后处理。

具体地说：

在一个多组件结构里，一个父组件需要负责管理状态，并把数据通过props向下发放。

组件的状态通过setState方法更新。数据通过设置子组件的属性来传递给子组件，子组件通过this.props来获取这些数据

例子1： 实现一个动态查找框

var FilteredList = React.createClass({
    filterList: function(event){
        var updatedList = this.state.initialItems;
        updatedList = updatedList.filter(function(item){
            return item.toLowerCase().search(
            event.target.value.toLowerCase()) !== -1;
        });
        this.setState({items: updatedList});
    },
    getInitialState: function(){
        return {
            initialItems: [
                "Apples",
                "Broccoli",
                "Chicken",
                "Duck",
                "Eggs",
                "Fish",
                "Granola",
                "Hash Browns"
            ],
            items: []
        }
    },
    componentWillMount: function(){
        this.setState({items: this.state.initialItems})
    },
    render: function(){
        return (
            <div className="filter-list">
                <input type="text" placeholder="Search" onChange={this.filterList}/>
                <List items={this.state.items}/>
            </div>
        );
    }
});

var List = React.createClass({
    render: function(){
        return (
            <ul>
                {
                    this.props.items.map(function(item) {
                    return <li key={item}>{item}</li>
                })
            }
        </ul>
        )  
    }
});

ReactDOM.render(<FilteredList/>, document.getElementById('mount-point'));
复制代码

React和Angular的对比

Angular是框架，React是类库。ng是一个完整的框架，提供了比 React 多得多的建议和功能，你只需要直接使用就可以了。而要用React，开发者通常还需要借助别的类库来打造一个真正的应用。比如你可能需要react-router库来处理路由、redux或flux管理state、额外的库做测试以及管理依赖等等。 "如果仅从框架这一点来看，选择Angular还是React就像选择直接购买成品电脑还是买零件自己组装一样。"

在大小方面，由于ng是一个大而全的框架，自带了更多的功能。而React只加载你需要的部件，react要比ng小得多。很多应用其实用不到这种大型框架提供的所有功能。在这个越来越拥抱微服务、微应用、单一职责模块（single-responsibility packages）的时代，React 通过让你自己挑选必要模块，让你的应用大小真正做到量身定做。

React以JavaScript为中心，把"HTML"放到JS里，JavaScript远比HTML要强大。因此，增强JavaScript让其支持标签要比增强HTML让其支持逻辑要合理得多。无论如何，HTML与JavaScript 都需要某种方式以粘合在一起。 Angular是以HTML而非JavaScrip为中心的，把“JS”放到HTML里。你必须学习学一大堆Angular特有的语法(标签)，即ng框架特有的HTML补丁（shim），比如为HTML加入了循环语义的HTML特性。而React只需要你懂JS。