[深入React] 6.组件
组件是react的大杀器,超出其他框架几百里
react 组件和dom一样也是树状结构,只能由上而下传递变量(或者调用),不可以兄弟间或者更远的发生关系,为的就是简单,而且工作的很好。
每个组件有自己的状态(state),(props其实是父辈的state)
如何渲染dom:
- 父组件的状态 render 出有参数的子组件
- 子组件根据参数创造出自己的状态 然后 render 为具体的dom
- 最终得到整片dom树
如:父组件里有userId,子组件是一个头像,那么对于头像组件,userId就是props,avatarUrl是state
如何更新dom:
- 当某个组件状态变化时
- render他的子树
- 得到一个dom子树
- react将差异set到对应的dom上
继续上边的例子,当userId改变时,头像组件会接受到这次变更并且更新自己的avatarUrl state
还有种情况,也会触发更新:
一个列表中,最开始的条目是
- 1
- 2
- 3
如果这个列表变成了
- 1
- 4
- 3
那么2就会收到update为4。
源码:
var Item = React.createClass({
componentWillReceiveProps:function(newProps){
if(this.props.id!==newProps.id)
console.log(this.props.id,newProps.id);
},
render:function(){
return _('div',null,this.props.id);
}
})
var List = React.createClass({
render:function(){
return _('div',null,
this.props.data.map(function(id,i){
return _(Item,{
key:i,
id:id
});
}
));
}
});
ReactDOM.render(_(List,{data:[1,2,3]}),document.body);
setTimeout(function() {
ReactDOM.render(_(List,{data:[1,4,3]}),document.body);
}, 10);
就这样,开发React
的时候主要的工作就变成了处理数据,而不是DOM
了。
就像数据库有三范式,React
组件也有类似的:
- 数据唯一性:整个组件树中,意义相同的变量只能有一个
- 修改父组件变量:父组件将变量的
setter
方法传递给想要修改的子组件
- 修改父组件变量:父组件将变量的
拿tab切换来举例:
currentTab
需要放到Nav
组件和Pages
组件的共同父辈组件中Nav
点击后(不修改自己的状态)调用父组件的setCurrent
方法Nav
和Pages
都共同接收到currentTab
变更 修改自己的状态