ReactJS读书笔记三：组件的组合和通信

一组合而不是继承

React组件是无法继承的，即不存在 React.extend 之类的方法可以定义一个子类。

React推崇通过组合的方式来组织大规模的应用。

所以所谓父子组件，就和DOM中的父子元素一样，他们是有从属关系，但没有继承关系。

比如：

[javascript] view plain copy

1. varTeam=React.createClass({
2. render:function(){
3. return<div>Teamonweris:<Peoplename={this.props.name}></People></div>;
4. }
5. });
6. varPeople=React.createClass({
7. render:function(){
8. return<span>{this.props.name}</span>;
9. }
10. });
12. React.render(
13. <Teamname='Lucy'/>,
14. document.getElementById('example')
15. );

我们有一个父组件 Team，里面有一个子组件 People。

Team和People并不存在谁继承谁，只是People 组成了 Team 而已。

大家都知道面向对象三个特性：封装、继承和多态。其中继承当然不是错的，但是确是争议最大的一个。可以参见这篇文章： http://blog.berniesumption.com/software/inheritance-is-evil-and-must-be-destroyed/

很多时候，继承是可以通过interface之类的方式来完成的。

二 父子组件通信

组合起来很简单，那么父子组件怎么通信呢。

你可能会想通过事件来通信。React竟然没有提供一个自定义事件，它的事件仅仅用来处理DOM事件，并没有组件的自定义事件。

比如一个子组件是无法通过trigger(“hungry”) 之类的事件来通知父组件的。当然，你可以通过mixin之类的方式来给组件提供事件能力。

那么这样，就只有一种方式可以让子组件向父组件发送消息，就是 this.props属性。

比如 父组件需要知道子组件的hungry 事件，那么他向子组件传递一个 props.onHungry 方法。这样子组件通过调用 this.props.onHungry 就可以通知父组件。

而父组件怎么通知子组件呢？

也是通过 props，直接 setProps 来修改子组件的 props就行了。

这样，实际上 props 是父子组件通信的最重要的甚至是唯一的标准渠道。

看一个例子，还是上面的例子，稍作改动：

[html] copy

varTeam=React.createClass({
1. onHungry:function(name){
2. alert(name+"ishungry");
3. },
4. render:function(){
5. return<div>Teamonweris:Peoplename={this.props.name}onHungry={this.onHungry}></People>;
6. varPeople=React.createClass({
7. render:function(){
8. returnspanonClick={this.handleClick}>{this.props.name}span>;
9. handleClick:function(){
10. this.props.onHungry(this.props.name);
11. varteam=React.render(
12. Teamname='Lucy'/>,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> document.getElementById('example')
13. );