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

发布时间：2020-12-15 05:25:27 所属栏目：百科来源：网络整理

导读：一组合而不是继承 React组件是无法继承的，即不存在 React.extend 之类的方法可以定义一个子类。 React推崇通过组合的方式来组织大规模的应用。所以所谓父子组件，就和DOM中的父子元素一样，他们是有从属关系，但没有继承关系。比如： var Team = React.cr

一组合而不是继承

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>;
},document.getElementById('example')
);

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

一组合而不是继承

二 父子组件通信

二父子组件通信