React组件间通信

chenatu 发布于2019-08-20 18:17 / 737人阅读

摘要：组件间通信父组件中放入子组件将自身属性与方法传给子组件子组件即父组件的一部分所以只要父组件重新子组件也必定重新子组件接收父组件传过来的属性与方法调用父组件方法为父组件中的父组件子组件调用子组件自己的方法调用父组件方法父组件向子组件通信数

组件间通信

1.父组件中放入子组件,将自身属性与方法传给子组件,子组件即父组件的一部分,所以只要父组件重新render,子组件也必定重新render.
2.子组件this.props接收父组件传过来的属性与方法,this.props.add调用父组件方法,this.setState为父组件中的state.

import React, { Component } from "react";
import { render } from "react-dom";
import Example from "../components/Example.js";

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            a: 1
        };
    }
    add = () => {
        this.setState({
            a: this.state.a + 1
        });
    }
    render() {
        return (
            
                
                    { this.state.a }
                    
                
            
        );
    }
}

render(, document.getElementById("root"));

import React, { Component } from "react";
import { render } from "react-dom";

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 10
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            a: nextProps.a
        });
    }
    add = () => {
        this.setState({
            a: this.state.a + 1
        });
    }
    render() {
        return (
            
                父组件: { this.props.a }
                子组件: { this.state.a }
                
                
            
        );
    }
}

export default Example;

父组件向子组件通信

React数据流动是单向的,父组件向子组件的通信也是最常见的方式.
父组件通过props向子组件传递需要的信息.

import React, { Component } from "react";
import { render } from "react-dom";
import ListTitle from "../components/ListTitle.js";
import ListItem from "../components/listItem.js";

class List extends Component {
    render() {
        let title = "父组件向子组件通信";
        let list = [1, 2, 3, 4, 5];

        return (
            
                
                
                    {
                        list.map((item, index) => {
                            return (
                                
                            )
                        })
                    }
                
            
        );
    }
}

render(, document.getElementById("root"));

子组件向父组件通信

setState一般与回调函数均会成对出现,这是因为回调函数即是转换内部状态时的函数传统.
子组件使用this.props.fun调用父组件的函数,函数中一般会setState,触发父组件render,同时子组件也会render

    onItemChange = (item) => {
        const { list } = this.state;

        this.setState({
            list: list.map((prevItem) => {
                return {
                    text: prevItem.text,
                    checked: prevItem.text === item.text ? !prevItem.checked : prevItem.checked
                }
            })
        });
    }
    onTitleChange = () => {
        this.setState({
            title: "利用回掉函数,子组件向父组件通信"
        })
    }

跨级组件通信

当需要让子组件跨级访问信息时,我们可以像之前说的方法那样向更高级别的组件层层传递props.
在React中,我们可以使用context来实现跨级父子组件间的通信.
我们并没有给ListItem传递props,而是在父组件定义了ChildContext,这样从这一层开始的子组件都可以拿到定义的context,例如这里的txt.
不过React官方并不建议大量使用context,因为它可以减少逐层传递,但当组件结构复杂时,我们并不知道context是从哪里传过来的.
Context就像一个全局变量一样,而全局变量正是导致应用走向混乱的罪魁祸首之一,给组件带来了外部依赖的副作用.
使用context比较好的场景是真正意义上的全局信息且不会更改,例如界面主题,用户信息等.
1.父组件

static childContextTypes = {
    txt: React.PropTypes.string
};
getChildContext() {
    return {
        txt: "aaaa"
    };
}

2.子组件

static contextTypes = {
    txt: React.PropTypes.string
};
span: { this.context.txt }

没有嵌套关系的组件通信

1.没有嵌套关系的,那只能通过可以影响全局的一些机制去考虑,自定义事件机制不失为一种上佳的方法.
2.在componentDidMount事件中,如果组件完成挂载,再订阅事件.
当组件卸载的时候,在componentWillUnmount事件中取消事件的订阅.

私有云 GPU服务器进程间通信实现线程间通信线程间的通信 IPC进程间通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84297.html

React 组件之间的通讯

摘要：父组件声明自己支持父组件提供一个函数，用来返回相应的对象子组件声明自己需要使用我胡汉三又回来了点击我如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信跨级组件之间...

dongxiawu 2019-08-23 16:59 评论0 收藏0
React 中组件间通信的几种方式

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨...

Anshiii 2019-07-01 10:49 评论0 收藏0
React 中组件间通信的几种方式

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨...

brianway 2019-08-23 12:18 评论0 收藏0
解密传统组件间通信与React组件间通信

摘要：同时吸取了社区大量优秀思想，进行归纳比对。有兴趣的读者可以点击下面的链接购买，再次感谢各位的支持与鼓励恳请各位批评指正京东当当原文网址在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件，需要注意的是前三个也可以算...

CoderBear 2019-08-23 12:01 评论0 收藏0
Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0