React -- 组件间通信

前端之家收集整理的这篇文章主要介绍了React -- 组件间通信前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

分为三种类型的通信关系:
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';

总结:一般情况下,组件之间的通信应该尽可能的保持简洁,如果说出现了多级传递活着跨级传递时,一般需要首先重新审视下是否有更合理的方式。

上面这个栗子利用全局对象来保存事件,用广播的方式来处理事件,这样的设计方法很常见,但是也容易带来逻辑的混乱。

原文链接:https://www.f2er.com/react/303704.html

猜你在找的React相关文章