React组件通信方式

组件间的关系

  • 父子组件
  • 兄弟组件（非嵌套组件）
  • 祖孙组件（跨级组件）

通信方式

  • 父组件向子组件通信
  • 子组件向父组件通信
  • 跨级组件通信
  • 非嵌套组件通信

父组件向子组件通信

1
class Parent extends Component {
2
    constructor(props) {
3
        super(props);
4
        this.state = {  
5
            msg:'Hello, World!'
6
        }
7
    }
8
    render() { 
9
        return (  
10
            <div>
11
                <Child msg={this.state.msg}></Child>
12
            </div>
13
        );
14
    }
15
}
16
class Child extends Component {
17
    render() { 
18
        return ( 
19
            <h1>{this.props.msg}</h1>
20
         );
21
    }
22
}

子组件向父组件通信

通过回调事件实现。父组件将函数作为props传递给子组件，然后子组件调用该函数。

1
class Parent extends Component {
2
    constructor(props) {
3
        super(props);
4
        this.state = {  
5
            msg:'Hello, World!',
6
            childMsg:''
7
        }
8
    }
9
    callback = (msg) => {
10
        this.setState({
11
            childMsg: msg
12
        })
13
    }
14
    render() { 
15
        return (  
16
            <div>
17
                <Child msg={this.state.msg} callback={this.callback}></Child>
18
                <p>{this.state.childMsg}</p>
19
            </div>
20
        );
21
    }
22
}
23
class Child extends Component {
24
    handleClick = () => {
25
        this.props.callback('你好，世界')
26
    }
27
    render() { 
28
        return ( 
29
            <div>
30
                <h1>{this.props.msg}</h1>
31
                <button onClick={this.handleClick}>点击我</button>
32
            </div>
33
         );
34
    }
35
}

跨级组件通信

  • 层层传递 props ：增加了代码耦合性,嵌套层级复杂(不推荐使用)
  • context 对象
  • 消息订阅发布

context

1
const MyContext = React.createContext()
2
3
class Parent extends React.Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            name: 'Hello,World!'
8
        }
9
    }
10
    render() {
11
        return (
12
            <div>
13
                <h4>我是Parent组件</h4>
14
                <hr />
15
                <MyContext.Provider value={this.state.name}>
16
                    <Child />
17
                </MyContext.Provider>
18
19
            </div>
20
        );
21
    }
22
}
23
24
class Child extends React.Component {
25
    render() {
26
        return (
27
            <div>
28
                <h4>我是Child组件</h4>
29
                <hr />
30
                <Grand />
31
            </div>
32
        );
33
    }
34
}
35
36
class Grand extends React.Component {
37
    static contextType = MyContext;
38
39
    render() {
40
        const text = this.context;
41
        return (
42
            <div>
43
                <h4>我是Grand组件</h4>
44
                <h4>我从Parent组件接受的是{text}</h4>
45
            </div>
46
        );
47
    }
48
}

非嵌套组件通信

  • 消息订阅发布 : pubs-sub
  • event
  • 集中式管理 : redux dva

消息订阅发布

1
class Parent extends React.Component {
2
    constructor(props) {
3
        super(props);
4
    }
5
    render() {
6
        return (
7
            <div>
8
                <A />
9
                <B />
10
            </div>
11
        );
12
    }
13
}
14
15
class A extends React.Component {
16
    constructor(props){
17
        super(props)
18
        this.state = {
19
            msg:''
20
        }
21
    }
22
    componentDidMount(){
23
        this.token = PubSub.subscribe('B', this.mySubscriber)
24
    }
25
    componentWillUnmount(){
26
        PubSub.unsubscribe(this.token)
27
    }
28
    mySubscriber = (msg,data) => {
29
        this.setState({
30
            msg: `你好，${data}`
31
        })
32
        
33
    }
34
    handleSend = () => {
35
        PubSub.publish('A', '我是A!');
36
    }
37
    render() {
38
        return (
39
            <div>
40
                <h4>我是A组件</h4> <button onClick={this.handleSend}>发送</button>
41
                <h4>{this.state.msg}</h4>
42
            </div>
43
        );
44
    }
45
}
46
47
class B extends React.Component {
48
    constructor(props) {
49
        super(props)
50
        this.state = {
51
            msg: ''
52
        }
53
    }
54
    componentDidMount() {
55
        this.token = PubSub.subscribe('A', this.mySubscriber)
56
    }
57
    componentWillUnmount() {
58
        PubSub.unsubscribe(this.token)
59
    }
60
    mySubscriber = (msg, data) => {
61
        this.setState({
62
            msg: `你好，${data}`
63
        })
64
    }
65
    handleSend = () => {
66
        PubSub.publish('B', '我是B!');
67
    }
68
    render() {
69
        return (
70
            <div>
71
                <h4>我是B组件</h4> <button onClick={this.handleSend}>发送</button>
72
                <h4>{this.state.msg}</h4>
73
            </div>
74
        );
75
    }
76
}