資訊專欄INFORMATION COLUMN
摘要：介紹是的一個(gè)重要屬性，但是到目前為止，這個(gè)屬性在正式的文檔里面還沒有對(duì)它進(jìn)行正式介紹，在將會(huì)正式發(fā)布這個(gè)屬性。指定的傳遞給子組件的屬性需要先通過來指定，不然會(huì)產(chǎn)生錯(cuò)誤。這樣可以減少組件之間的直接依賴關(guān)系。
介紹
Contexts 是React的一個(gè)重要屬性，但是到目前為止，這個(gè)屬性在正式的文檔里面還沒有對(duì)它進(jìn)行正式介紹，在 reactv0.1.4將會(huì)正式發(fā)布這個(gè)屬性。下面先來介紹一下它的使用方式。
React.withContextReact.withContext 會(huì)執(zhí)行一個(gè)指定的上下文信息的回調(diào)函數(shù),任何在這個(gè)回調(diào)函數(shù)里面渲染的組件都有這個(gè)context的訪問權(quán)限。
var A = React.createClass({
contextTypes: {
name: React.PropTypes.string.isRequired,
},
render: function() {
return My name is: {this.context.name};
}
});
React.withContext({"name": "Jonas"}, function () {
// Outputs: "My name is: Jonas"
React.render(, document.body);
});
任何想訪問context里面的屬性的組件都必須顯式的指定一個(gè)contextTypes 的屬性。如果沒有指定改屬性，那么組件通過 this.context 訪問屬性將會(huì)出錯(cuò)。
如果你為一個(gè)組件指定了context，那么這個(gè)組件的子組件只要定義了contextTypes 屬性，就可以訪問到父組件指定的context了。
var A = React.createClass({
render: function() {
return ;
}
});
var B = React.createClass({
contextTypes: {
name: React.PropTypes.string
},
render: function() {
return My name is: {this.context.name};
}
});
React.withContext({"name": "Jonas"}, function () {
React.render(, document.body);
});
為了減少文件的引用，你可以為contextTypes 放到一個(gè)minx 中，這樣 用到的組件引用這個(gè) minx 就行了。
var ContextMixin = {
contextTypes: {
name: React.PropTypes.string.isRequired
},
getName: function() {
return this.context.name;
}
};
var A = React.createClass({
mixins: [ContextMixin],
render: function() {
return My name is {this.getName()};
}
});
React.withContext({"name": "Jonas"}, function () {
// Outputs: "My name is: Jonas"
React.render(, document.body);
});
getChildContext
和訪問context 的屬性是需要通過 contextTypes 指定可訪問的 元素一樣。getChildContext 指定的傳遞給子組件的屬性需要先通過 childContextTypes 來指定，不然會(huì)產(chǎn)生錯(cuò)誤。
// This code *does NOT work* becasue of a missing property from childContextTypes
var A = React.createClass({
childContextTypes: {
// fruit is not specified, and so it will not be sent to the children of A
name: React.PropTypes.string.isRequired
},
getChildContext: function() {
return {
name: "Jonas",
fruit: "Banana"
};
},
render: function() {
return ;
}
});
var B = React.createClass({
contextTypes: {
fruit: React.PropTypes.string.isRequired
},
render: function() {
return My favorite fruit is: {this.context.fruit};
}
});
// Errors: Invariant Violation: A.getChildContext(): key "fruit" is not defined in childContextTypes.
React.render(, document.body);
假設(shè)你的應(yīng)用程序有多層的context。通過withContext 和 getChildContext 指定的context元素都可以被子組件引用。但是子組件是需要通過 contextTypes 來指定所需要的context 元素的。
var A = React.createClass({
childContextTypes: {
fruit: React.PropTypes.string.isRequired
},
getChildContext: function() {
return { fruit: "Banana" };
},
render: function() {
return ;
}
});
var B = React.createClass({
contextTypes: {
name: React.PropTypes.string.isRequired,
fruit: React.PropTypes.string.isRequired
},
render: function() {
return My name is: {this.context.name} and my favorite fruit is: {this.context.fruit};
}
});
React.withContext({"name": "Jonas"}, function () {
// Outputs: "My name is: Jonas and my favorite fruit is: Banana"
React.render(, document.body);
});
context 是就近引用的，如果你通過withContext 指定了context元素，然后又通過 getChildContext 指定了該元素，該元素的值將會(huì)被覆蓋。
var A = React.createClass({
childContextTypes: {
name: React.PropTypes.string.isRequired
},
getChildContext: function() {
return { name: "Sally" };
},
render: function() {
return ;
}
});
var B = React.createClass({
contextTypes: {
name: React.PropTypes.string.isRequired
},
render: function() {
return My name is: {this.context.name};
}
});
React.withContext({"name": "Jonas"}, function () {
// Outputs: "My name is: Sally"
React.render(, document.body);
});
總結(jié)
通過context傳遞屬性的方式可以大量減少 通過顯式的通過 props 逐層傳遞屬性的方式。這樣可以減少組件之間的直接依賴關(guān)系。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85711.html
摘要：丟失問題文本是為了說清目前的機(jī)制是而不是我們以為的機(jī)制，并說明這兩者的區(qū)別。雖然明白了原理，但是問題并沒有解決。上下文注意這里是，需要執(zhí)行接受回調(diào)函數(shù)，回調(diào)函數(shù)中的內(nèi)容為實(shí)測(cè)可以成功拿到。 React context 丟失問題 文本是為了說清react context目前的機(jī)制是owner context 而不是我們以為的parent context 機(jī)制，并說明這兩者的區(qū)別。...
摘要：假如以的作用域鏈作為類比，組件提供的對(duì)象其實(shí)就好比一個(gè)提供給子組件訪問的作用域，而對(duì)象的屬性可以看成作用域上的活動(dòng)對(duì)象。所以，我借鑒了作用域鏈的思路，把當(dāng)成是組件的作用域來使用。 前言 Context被翻譯為上下文，在編程領(lǐng)域，這是一個(gè)經(jīng)常會(huì)接觸到的概念，React中也有。 在React的官方文檔中，Context被歸類為高級(jí)部分(Advanced)，屬于React的高級(jí)API，但官方...
摘要：我們只希望最多有兩個(gè)并發(fā)渲染器主要和次要主要和次要。輔助渲染器將自己的的存儲(chǔ)在單獨(dú)的字段中。 showImg(https://segmentfault.com/img/remote/1460000019911593); 前言：由于childContext在React17中會(huì)被廢棄，所以不去分析它了，主要是新 API— —createContext()的講解 一、React.create...
摘要：官方對(duì)的介紹是意思就是提供了一種通過組件樹傳遞數(shù)據(jù)的方法，而無需在每個(gè)級(jí)別手動(dòng)傳遞。這也是基于重要物證哈哈實(shí)例使用學(xué)習(xí)技術(shù)最終是要有產(chǎn)出的。依然被視作一個(gè)組件，不過不同的是它的子組件必須是一個(gè)方法并且該方法接收當(dāng)前對(duì)象并最終返回一個(gè)節(jié)點(diǎn)。 拋轉(zhuǎn)引玉 通過上一篇的科普我們知道如果父節(jié)點(diǎn)需要向子節(jié)點(diǎn)傳遞數(shù)據(jù)，那么就得通過Props來實(shí)現(xiàn)；那么擺在我們眼前的就有一個(gè)問題了：現(xiàn)有N個(gè)節(jié)點(diǎn)并且它...
前言 首先歡迎大家關(guān)注我的Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫東西沒法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)，希望大家多多關(guān)注呀！好久已經(jīng)沒寫React，發(fā)現(xiàn)連Context都發(fā)生了變化，忽然有一種村里剛通上的網(wǎng)的感覺，可能文章所提及的知識(shí)點(diǎn)已經(jīng)算是過時(shí)了，僅僅算作是自己的學(xué)習(xí)體驗(yàn)吧， Context 對(duì)于React開發(fā)者而言，Context應(yīng)該是一個(gè)不陌生的概念，...
閱讀 3717·2021-10-12 10:11
閱讀 1100·2021-09-22 15:42
閱讀 3553·2019-08-30 13:06
閱讀 965·2019-08-29 17:05
閱讀 1702·2019-08-29 12:21
閱讀 2446·2019-08-29 11:31
閱讀 1246·2019-08-23 18:37
閱讀 1319·2019-08-23 14:58
