Reactjs 踏坑指南1： 知识点
- 什么是React
- 虚拟DOM
- JSX
- 组件
- 生命周期和状态
- 事件
- 单项数据流
- Reactjs和Angularjs的对比
React简介
React是一个Facebook开发的UI库。使用这个库可以很方便的开发交互式的、具有表达力的和可重用的UI组件。本身并不是一个框架，可视为是视图层，并且是一个以组件为基础的高效视图。对于React应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说你的应用是由一个个组件构成的。这种分割、复用组件的方式开发页面，我们称之为组件驱动开发。
这个库还使用了一种叫做虚拟DOM（Virtual DOM）的概念，这些DOM可以根据状态有选择的渲染。这样，页面就会尽量的减少DOM操作而达到保持页面状态的效果。
虚拟DOM
用于优化视图的渲染和刷新。以前我们更新视图时，需要先清空DOM容器中的内容，然后将最新的DOM和数据追加到容器中，现在React将这一操作放到了内存中。
详细说明一下：
虚拟 DOM 是在 DOM 的基础上建立了一个抽象层，我们对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到 DOM 中。
React 会在内存中维护一个虚拟 DOM 树，当我们对这个树进行读或写的时候，实际上是对虚拟 DOM 进行的。当数据变化时，然后 React 会自动更新虚拟 DOM，然后拿新的虚拟 DOM 和旧的虚拟 DOM 进行对比，找到有变更的部分，得出一个Patch，然后将这个 Patch 放到一个队列里，最终批量更新这些 Patch 到 DOM 中。
这样的机制可以保证即便是根节点数据的变化，最终表现在 DOM 上的修改也只是受这个数据影响的部分，可以保证非常高效的渲染。
因为React使用了虚拟DOM，因此借助这种方式使得在服务端渲染输出HTML成为可能。
JSX
JSX在ECMAScript的基础上提供了类似于XML的扩展。
组件
使用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。
