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

一 组合而不是继承

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

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

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

比如：

var Team = React.createClass({render: function() {return <div>Team onwer is: <People name={this.props.name}></People></div>;}});var People = React.createClass({render: function() {return <span>{this.props.name}</span>;}});React.render(<Team name='Lucy' />,document.getElementById('example'));

我们有一个父组件 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 是父子组件通信的最重要的甚至是唯一的标准渠道。

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

var Team = React.createClass({onHungry: function(name) {alert(name + " is hungry");},render: function() {return <div>Team onwer is: <People name={this.props.name} onHungry={this.onHungry}></People></div>;}});var People = React.createClass({render: function() {return <span onClick={this.handleClick}>{this.props.name}</span>;},handleClick: function() {this.props.onHungry(this.props.name);}});var team = React.render(<Team name='Lucy' />,document.getElementById('example'));

点一下 Lucy 就会alert一下。

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

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

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

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

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

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

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

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

var Team = React.createClass({getInitialState: function() {return {name: "Lucy"}},onHungry: function(name) {alert(name + " is hungry");},render: function() {return <div onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>Team onwer is: <People {...this.state} onHungry={this.onHungry}></People></div>;},onMouseOver: function() {this.setState({name: "mouseOver"});},onMouseOut: function() {this.setState({name: "mouseOut"});}});var People = React.createClass({render: function() {return <span onClick={this.handleClick}>{this.props.name}</span>;},handleClick: function() {this.props.onHungry(this.props.name);}});var team = React.render(<Team name='Lucy' />,document.getElementById('example'));

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

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

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