react元件跨層級通訊context

react

中使⽤context

實現祖代元件向後代元件跨層級傳值。 vue中的

provide & inject

**於context

context api

react.createcontext

建立⼀個

context

物件。當

react

渲染⼀個訂閱了這個context 物件的元件，這個元件會從元件樹中離⾃身最近的那個匹配provider

中讀取到當前的

context 值。

context.provider

provider

接收⼀個

value

屬性，傳遞給消費元件，允許消費元件訂閱 context

的變化。⼀個

provider

可以和多個消費組 件有對應關係。多個 provider

也可以巢狀使⽤，⾥層的會覆 蓋外層的資料。 當 provider

的 value

值發⽣變化時，它內部的所有消費組 件都會重新渲染。provider

及其內部

consumer

元件都不受 制於 shouldcomponentupdate

函式，因此當

consumer

組 件在其祖先元件退出更新的情況下也能更新。

class.contexttype

掛載在class

上的 contexttype

屬性會被重賦值為⼀個由

react.createcontext()

建立的context

物件。這能讓你 使⽤ this.context

來消費最近

context

上的那個值。你可 以在任何⽣命週期中訪問到它，包括 render

函式中。

context.consumer

這⾥，react

元件也可以訂閱到

context

變更。這能讓你在

函 數式元件

中完成訂閱

context。

這個函式接收當前的

context

值，返回⼀個

react

節點。傳

遞給函式的

value

值等同於往上元件樹離這個

context 最近的

provider

提供的

value

值。如果沒有對應的

provider

，value

引數等同於傳遞給

createcontext()

的 defaultvalue。

使⽤context

建立context =>

獲取provider

和consumer => provider

提供 值 => consumer

消費值

範例：共享主題⾊

import react,  from "react";

import from "../themecontext";
import contexttypepage from"./contexttypepage";
import consumerpage from "./consumerpage";
class contextpage extends component 
};} changecolor = () => = this.state.theme;
this.setstate(
});}; render() = this.state;
return (
change color
); }}
export default contextpage;

import react from "react";

export const themecontext = react.createcontext();
export const themeprovider = themecontext.provider;
export const themeconsumer = themecontext.consumer;

import react,  from "react";

import from "../themecontext";
export default class contexttypepage extends component = this.context;
return (
);}}

import react,  from "react";

import from "../themecontext";
export default class consumerpage extends component 
); }}
function handletabbar()

因為context

會使⽤參考標識（

reference identity

）來決定 何時進⾏渲染，這⾥可能會有⼀些陷阱，當 provider

的⽗組 件進⾏重渲染時，可能會在 consumers

元件中觸發意外的渲 染。

為了防⽌這種情況，將 value

狀態提公升到⽗節點的

state ⾥。

Vue元件跨層級通訊

正常元件間通訊 父 子元件 是通過屬性傳遞 子 父元件 是通過this.emit 傳遞 this.emit 返回的是this,如果需要一些值 可使用callback方式傳遞 provide 和 inject 這對選項需要一起使用，以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並...

react 元件通訊

父元件通過props向子元件傳遞需要的資訊 parent.jsximport react,from react import son from components test1 class parent extends component render export default parent c...

React元件通訊

分類 父子元件通訊 無論父元件傳遞是props還是state,子元件都是通過props接收 子父元件通訊 父元件傳遞方法給子元件，子元件呼叫父元件傳遞過來的方法 注意 自己的狀態自己更改 非父子元件通訊 ref鏈 1.ref this.refs.2.ref this.推薦 跨元件通訊 context...