ReactJS组件的组合和通信机制解析

一 组合而不是继承

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

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

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

比如：

[javascript]  view plain  copy

1. var Team = React.createClass({  
2. render: function() {  
3. return <div>Team onwer is: <People name={this.props.name}></People></div>;  
4. }  
5. });  
6. var People = React.createClass({  
7. render: function() {  
8. return <span>{this.props.name}</span>;  
9. }  
10. });  
11.   
12. React.render(  
13. <Team name='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]  view plain  copy

1. var Team = React.createClass({  
2. onHungry: function(name) {  
3. alert(name + " is hungry");  
4. },  
5. render: function() {  
6. return <div>Team onwer is: <People name={this.props.name} onHungry={this.onHungry}></People></div>;  
7. }  
8. });  
9. var People = React.createClass({  
10. render: function() {  
11. return <span onClick={this.handleClick}>{this.props.name}</span>;  
12. },  
13. handleClick: function() {  
14. this.props.onHungry(this.props.name);  
15. }  
16. });  
17.   
18. var team = React.render(  
19. <Team name='Lucy' />,  
20. document.getElementById('example')  
21. );  

点一下 Lucy 就会alert一下。

Team 组件通过 props.onHungry 传给了 People 组件一个回调，这样 People 组件就通过调用这个方法来通知Team。

这是子组件向父组件发送消息的方式。

那么父组件怎么向子组件发送消息呢。更简单了，直接修改 props  就行了

team.setProps({name: “Lily”})

因为 props 是父子组件的通信渠道，为了避免状态不一致，所以严格杜绝组件修改自己的状态。

可以通过 team.setProps 方式修改，这属于组件外修改，但是不能在组件中 通过 this.setProps 方式来修改。

那么现在有一个问题，React是如何知道一个组件的 props 被他的父组件修改了？

我们把上面的代码改一下：

[html]  view plain  copy

 

1. var Team = React.createClass({  
2. getInitialState: function() {  
3. return {  
4. name: "Lucy"  
5. }  
6. },  
7. onHungry: function(name) {  
8. alert(name + " is hungry");  
9. },  
10. render: function() {  
11. return <div onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>Team onwer is: <People {...this.state} onHungry={this.onHungry}></People></div>;  
12. },  
13. onMouseOver: function() {  
14. this.setState({  
15. name: "mouseOver"  
16. });  
17. },  
18. onMouseOut: function() {  
19. this.setState({  
20. name: "mouseOut"  
21. });  
22. }  
23. });  
24. var People = React.createClass({  
25. render: function() {  
26. return <span onClick={this.handleClick}>{this.props.name}</span>;  
27. },  
28. handleClick: function() {  
29. this.props.onHungry(this.props.name);  
30. }  
31. });  
32.   
33. var team = React.render(  
34. <Team name='Lucy' />,  
35. document.getElementById('example')  
36. );  

这样，Team把  this.state.name 作为 props 传给了 People 。

Team每次通过 this.setState 来修改state.name 的时候，People都会进行更新。

猜测是 setState 和 setProps 这两个方法会触发组件的更新。并且会触发每一个子组件检查更新