成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React組件間通信

chenatu / 851人閱讀

摘要：組件間通信父組件中放入子組件將自身屬性與方法傳給子組件子組件即父組件的一部分所以只要父組件重新子組件也必定重新子組件接收父組件傳過來的屬性與方法調(diào)用父組件方法為父組件中的父組件子組件調(diào)用子組件自己的方法調(diào)用父組件方法父組件向子組件通信數(shù)

組件間通信

1.父組件中放入子組件,將自身屬性與方法傳給子組件,子組件即父組件的一部分,所以只要父組件重新render,子組件也必定重新render.
2.子組件this.props接收父組件傳過來的屬性與方法,this.props.add調(diào)用父組件方法,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數(shù)據(jù)流動是單向的,父組件向子組件的通信也是最常見的方式.
父組件通過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一般與回調(diào)函數(shù)均會成對出現(xiàn),這是因?yàn)榛卣{(diào)函數(shù)即是轉(zhuǎn)換內(nèi)部狀態(tài)時的函數(shù)傳統(tǒng).
子組件使用this.props.fun調(diào)用父組件的函數(shù),函數(shù)中一般會setState,觸發(fā)父組件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: "利用回掉函數(shù),子組件向父組件通信"
        })
    }
跨級組件通信

當(dāng)需要讓子組件跨級訪問信息時,我們可以像之前說的方法那樣向更高級別的組件層層傳遞props.
在React中,我們可以使用context來實(shí)現(xiàn)跨級父子組件間的通信.
我們并沒有給ListItem傳遞props,而是在父組件定義了ChildContext,這樣從這一層開始的子組件都可以拿到定義的context,例如這里的txt.
不過React官方并不建議大量使用context,因?yàn)樗梢詼p少逐層傳遞,但當(dāng)組件結(jié)構(gòu)復(fù)雜時,我們并不知道context是從哪里傳過來的.
Context就像一個全局變量一樣,而全局變量正是導(dǎo)致應(yīng)用走向混亂的罪魁禍?zhǔn)字?給組件帶來了外部依賴的副作用.
使用context比較好的場景是真正意義上的全局信息且不會更改,例如界面主題,用戶信息等.
1.父組件

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

2.子組件

static contextTypes = {
    txt: React.PropTypes.string
};
span: { this.context.txt }
沒有嵌套關(guān)系的組件通信

1.沒有嵌套關(guān)系的,那只能通過可以影響全局的一些機(jī)制去考慮,自定義事件機(jī)制不失為一種上佳的方法.
2.在componentDidMount事件中,如果組件完成掛載,再訂閱事件.
當(dāng)組件卸載的時候,在componentWillUnmount事件中取消事件的訂閱.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84297.html

相關(guān)文章

  • React 組件之間的通訊

    摘要：父組件聲明自己支持父組件提供一個函數(shù)，用來返回相應(yīng)的對象子組件聲明自己需要使用我胡漢三又回來了點(diǎn)擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。 在使用 React 的過程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 跨級組件之間...

    dongxiawu 評論0 收藏0

  • React 中組件間通信的幾種方式

    摘要：在使用的過程中，不可避免的需要組件間進(jìn)行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級組件之間通信父組件向子組件通信父組件通過向子組件傳遞，子組件得到后進(jìn)行相應(yīng)的處理。 在使用 React 的過程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 非嵌套組件間通信 跨...

    Anshiii 評論0 收藏0

  • React 中組件間通信的幾種方式

    摘要：在使用的過程中，不可避免的需要組件間進(jìn)行消息傳遞通信，組件間通信大體有下面幾種情況父組件向子組件通信子組件向父組件通信非嵌套組件間通信跨級組件之間通信父組件向子組件通信父組件通過向子組件傳遞，子組件得到后進(jìn)行相應(yīng)的處理。 在使用 React 的過程中，不可避免的需要組件間進(jìn)行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 非嵌套組件間通信 跨...

    brianway 評論0 收藏0

  • 解密傳統(tǒng)組件間通信與React組件間通信

    摘要：同時吸取了社區(qū)大量優(yōu)秀思想，進(jìn)行歸納比對。有興趣的讀者可以點(diǎn)擊下面的鏈接購買，再次感謝各位的支持與鼓勵懇請各位批評指正京東當(dāng)當(dāng)原文網(wǎng)址 在React中最小的邏輯單元是組件，組件之間如果有耦合關(guān)系就會進(jìn)行通信，本文將會介紹React中的組件通信的不同方式 通過歸納范，可以將任意組件間的通信歸類為四種類型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個也可以算...

    CoderBear 評論0 收藏0

  • Vue 組件間通信方式

    摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺編寫，不支持移動端平臺，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...

    hss01248 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<