【JAVASCRIPT】React学习- 数据流（组件通信）

摘要

react 学习包括几个部分：

• 文本渲染
• JSX 语法
• 组件化思想
• 数据流

一 组件通信如何实现

父子组件之间不存在继承关系

1.1 父=》子通信

父组件可以通过 this.refs.xx 调用子组件的方法，比如 setState 等

1.2 子=》父通信

有两种方法，两个粒度：

1）利用call/apply 把父组件替换子组件方法的this对象，实现子组件调用父组件属性和方法

2）通过props 形式，把父组件方法传递给 子组件，子组件调用props 的方法，实际是 父组件在执行

1.3 子=》子通信

通过共用父组件变量的方法实现通信。

1.4 无关联组件通信

二 例子

2.1 父子通信

子组件

class childComponent extends React.Component {
    onClick () {
        console.log('子组件');
    }

    render() {

        return (
            <div>
                lalala
            </div>
        );
    }
}

export default childComponent;

父组件

import ChildComponent from '../childComponent'

class FatherComponent extends React.Component {
    onClick() {
        console.log('父组件');
    }
    componentDidMount () {
        this.refs.test.onClick();  // !!! 通过 refs 调用子组件的方法，比如 setState 控制子组件的更新
    }

    render() {
        return (
            <div>
                <ChildComponent ref="test"/>
            </div>
        );
    }
}

export default FatherComponent;

结果

打印

子组件

2.2 子父通信

子组件

class childComponent extends React.Component {
    onClick () {
        console.log('子组件');
        this.onClick();  // 调用父组件方法
    }

    render() {
        return (
            <div>
                lalala
            </div>
        );
    }
}

export default childComponent;

父组件

import ChildComponent from '../childComponent'

class FatherComponent extends React.Component {
    onClick() {
        console.log('父组件');
    }
    componentDidMount () {
        this.refs.test.onClick.call(this);  // 传入父组件的对象
    }

    render() {
        return (
            <div>
                <ChildComponent ref="test"/>
            </div>
        );
    }
}

export default FatherComponent;

结果

打印

子组件

父组件

2.3 子子通信

原理就是通过共用父组件变量实现联动。

步骤如下：

1）父组件调用子组件1 方法，把 变量 a 传给 子组件1

2）子组件1 拿到变量 a 更新，调用父组件方法1

3）父组件方法1 调用子组件2 方法，把 变量 a 传给子组件2

4）子组件2 拿到变量a 更新。

子组件

class childComponent extends React.Component {
    onClick () {
        console.log('子组件', this.props.name);
        // 2. 组件hxy 更新父组件
        this.onClick();
    }

    onClick1() {
        // 4. 组件 xiaohuamao 更新
        console.log('子组件', this.props.name)
    }

    render() {
        return (
            <div>
                {this.props.name}
            </div>
        );
    }
}

export default childComponent;

父组件

import ChildComponent from '../childComponent'

class FatherComponent extends React.Component {
    onClick() {
        console.log('父组件');
        console.log('调用子组件test1 onClick');
        // 3. 组件 xiaohuamao 更新
        this.refs.test1.onClick1.call(this);
    }
    componentDidMount () {
        console.log('调用子组件test onClick');
        // 1. 父组件 调用 组件 hxy
        this.refs.test.onClick.call(this);
    }

    render() {
        // 有两个子组件  hxy  和 xiaohuamao
        return (
            <div>
                <ChildComponent ref="test" name={'hxy'}/>
                <ChildComponent ref="test1" name={'xiaohuamao'}/>
            </div>
        );
    }
}

export default FatherComponent;

结果

打印

调用子组件test onClick // 调用子组件 hxy 方法

子组件 undefined // 此处 this 替换为 父组件对象

父组件 // 回到父组件

调用子组件test1 onClick // 调用子组件xiaohuamao 方法

子组件 xiaohuamao // 可更新子组件xiaohuamao 的state实现更新组件