[深入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变更 修改自己的状态