分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信
父组件通过子组件的props向子组件传递需要的信息。
两种方法: 1、利用回调函数 2、利用自定义事件机制
一个栗子:
ListItem类:
class ListItem extends Component {
static defaultProps = {
text: '',
checked: false,
}
render() {
return (
<li>
<input type="checkbox" checked={this.props.checked}
onChange={this.props.onChange} /> <span>{this.props.value}</span>
</li>
);
}
}
List类:
class List extends Component {
static defaultProps = { list: [],
handleItemChange: () => {},
};
constructor(props) {
super(props);
this.state = { list: this.props.list.map(entry => ({
text: entry.text,
checked: entry.checked,
})),
};
}
onItemChange(entry) { const { list } = this.state;
this.setState({ list: list.map(prevEntry => ({
text: prevEntry.text,
checked: prevEntry.text === entry.text ?
!prevEntry.checked : prevEntry.checked,
})),
});
this.props.handleItemChange(entry);
}
render() {
return (
<div>
<ul>
{this.state.list.map((entry, index) => (
<ListItem
key={`list-${index}`}
value={entry.text}
checked={entry.checked}
onChange={this.onItemChange.bind(this, entry)}
/>
))}
</ul>
</div>
);
}
}
在这个栗子中,用的是回调函数的方法:在List组件中写入了handleItemChange方法,当ListItem发生变化的时候,我们就可以通过这个方法拿到数据了。
可以像前文那样,使用层层传递的props,但是这样代码会十分冗余。除了这个方法之外,我们可以使用context来实现跨级通信。
示例代码:
ListItem:
class ListItem extends Component {
static contextTypes = {
color: PropTypes.string,
};
render() {
const { value } = this.props; return (
<li style={{background: this.context.color}}>
<span>{value}</span>
</li>
);
}
}
List:
class List extends Component {
static childContextTypes = {
color: PropTypes.string,
};
getChildContext() {
return {
color: 'red',
};
}
render() { const { list } = this.props; return (
<div>
<ListTitle title={title} />
<ul>
{list.map((entry, index) => (
<ListItem key={`list-${index}`} value={entry.text} />
))}
</ul>
</div>
);
}
}
在这个栗子中,我们并没有给ListItem传递props,而是在父组件中定义了ChildContext,这样,从这一层开始的子组件都能拿到定义的context,例如本例中的color。
实际上,context一直存在于React源码中,但是,React官方并不建议大量使用context,因为尽管它可以减少逐层传递,但是,当组件结构复杂的时候,我们就并不知道context是从哪一层里传过来的。
大部分情况下,我们并不推荐使用context。使用context比较好的场景是真正意义上的全局信息且不会被更改:比如界面主题和用户信息等。
如果我们真的需要它,那么建议写成高阶组件来实现。有关高阶组件的内容,将会在后面的章节中进行介绍。
没有嵌套关系的组件,那只能通过一种可以影响全局的方式来考虑。 比如,刚才提到的自定义事件机制。
我们在处理时间的时候需要注意,在componentDidMount事件中,如果组件挂载完成,再订阅事件;当组件卸载的时候,需要在componentWillUnmount中取消事件的订阅。
栗子:
组件1:
class App extends Component {
componentDidMount() { this.itemChange = emitter.on('ItemChange', (data) => {
console.log(data);
});
} componentWillUnmount() {
emitter.removeListener(this.itemChange);
} render() {
return (
<List list={[{text: 1}, {text: 2}]} />
);
}
}
组件2的onItemChange方法:
onItemChange(entry) {
const { list } = this.state;
this.setState({
list: list.map(prevEntry => ({ text: prevEntry.text,
checked: prevEntry.text === entry.text ?
!prevEntry.checked : prevEntry.checked,
}))
}); emitter.emit('ItemChange', entry);
}
本例采用的是发布/订阅的方式。借用Node.js Events模块的浏览器版实现,在代码中需要加入:
import { EventEmitter } from 'events';
export default new EventEmitter();/**********把EventEmitter输出到组件中使用************/import ReactDOM from 'react-dom';import React, { Component, PropTypes } from 'react'; import emitter from './events';
总结:一般情况下,组件之间的通信应该尽可能的保持简洁,如果说出现了多级传递活着跨级传递时,一般需要首先重新审视下是否有更合理的方式。
上面这个栗子利用全局对象来保存事件,用广播的方式来处理事件,这样的设计方法很常见,但是也容易带来逻辑的混乱。
本文分享自 交互设计前端开发与后端程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!