对于React的基础进行了学习,前两篇博客主要是详细介绍React的技术,这篇博客主要是总结React技术的所有特点
什么是React?
React是一个Facebook开发的UI库。使用这个库可以很方便的开发交互式的、具有表达力的和可重用的UI组件。并且这个库已经在facebook和instagram.com的产品中使用。
这个库的另外一个独特的卖点是:他不仅可以使用在客户端,还可以用在Server端渲染。
这个库还使用了一种叫做虚拟DOM(Virtual DOM)的概念,这些DOM可以根据状态有选择的渲染。这样,页面就会尽量的减少DOM操作而达到保持页面状态的效果。
虚拟DOM是如何工作的
想象一下你根据一个人造了一个模特,这个模特几乎有这个人的全部属性,并且有这个人的所有当前状态。这基本上就是React的虚拟DOM做的。现在假设你对这个人形模特做了某些修改。比如,加了胡子、强壮的二头肌。在React的世界里,当我们做了这些修改,会发生两件事:第一、运行“对比”算法找出发生的改变。第二、调整,根据第一步找出的不同执行必要的DOM操作。React工作的方式不是把真人拿来从头到尾的来一次“整形”,而是只修改脸(帖胡子)和胳膊(二头肌)。也就是如果你在input里加了文字,之后开始渲染操作里,如果input的父节点没有开始上文第二步的“调整”操作,那么input里的文字是不会动的。因为React使用的是假的DOM不是真的,这也给了React一个新的可能。我们可以在Server端渲染这些假DOM。基本内容
React的基本创建单元叫做组件,例如:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('mount-point')
);
</script>
JSX
其实这是JSX,是一个javascript的XML变体。使用JSX可以在javascript里写出HTML式的标签。
在JSX里,HTML的class属性写成className,for属性写成htmlFor,因为class, for都是javascript的关键字。更多不同的内容可以在这里看到。
你也可以不使用JSX,这是一个不用JSX的例子:
ReactDOM.render(
React.createElement('h1', null, 'Hello!'),
document.getElementById('content')
);
组件
使用ReactDOM的render方法的时候,第一个参数是需要渲染的我们创建的组件,第二个是HTML的DOM节点,组件渲染之后在这里添加。我们可以使用createClass方法创建组件。创建组件方法只需要一个对象作为参数。我们来创建一个:
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);
}
});
组件创建好之后就可以在文档里渲染出来了:
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 在卸载组件之前调用。
状态(State)
在开始State之前,需要了解一些相关基础:
getInitialState返回State的初始值。
getDefaultProps获取props的初始值。
mixins一组对象,主要用来扩展当前组件的功能。
更多相关的的内容可以看这里。
每一个组件都包含一个state对象和一个props对象。State(状态)用setState方法设置。调用setState方法会触发UI的更新,也是实现交互式开发的必要基础。如果我们要在一开始设定初始状态(initial state),可以调用getInitialState方法。代码:
var MyComponent = React.createClass({
getInitialState:function(){
return {
count: 5
};
},
render: function(){
return (
<h1>Hello, {this.state.count}!</h1>
);
}
});
事件
React包含一个跨浏览器的事件系统。这些事件作为属性包含在组件中。代码:
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')
);
单向数据流
在Rect里,数据通过state和props单向流动,这和Angular的双向流动不同。也就是说,在一个多组件结构里,一个父组件需要负责管理状态(state)并把数据通过props向下发放。
组件的状态应该用setState方法更新,这样可以确保UI会同时刷新。数据通过设置子组件的属性来传递给子组件。子组件可以通过this.props来获取这些数据。代码:
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'));