React Context 理解和使用

如果發現文章有問題也可以在文章下方及時聯絡筆者哦，相互**一起進步~

const context = react.createcontext(defaultvalue)
function contextprovider ()

但是如果沒有對應的context.provider相匹配，那麼元件樹上的所有元件都可以收到這個context物件發出的defaultvalue；

同時可以呼叫context的consumerapi可以用來接受到context的值，並且根據這個值渲染元件：

function contextconsumer () 
)}

利用context.consumerapi 可以讓我們即使是在函式式元件也可以訂閱到 context的值；

這種方法需要乙個函式作為子元素，函式接收當前的context值，並返回乙個 react 節點。

傳遞給函式的value值等價於元件樹上方離這個 context 最近的 provider 提供的variablevalue值。如果沒有對應的 provider，value引數等同於傳遞給createcontext()的defaultvalue。

// provider 結合 consumer 使用示例
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
// 建立 context 物件
const mycontext = react.createcontext(0) // defaultvalue 是數字0
constructor(props)
// 處理 provider中value變化的函式
this.handlechange = () => ))}
}render()
}// 消費元件
class context extends react.component})
}}reactdom.render(
document.getelementbyid('root')
);

當provider的variablevalue值發生變化時，它內部的所有消費元件都會重新渲染。

class.contexttype

class myclass extends react.component 
}myclass.contexttype = mycontext; //將myclass的contexttype屬性賦值為 context 物件的值

掛載在 class 上的contexttype屬性會被重賦值為乙個由react.createcontext()建立的 context 物件。此屬效能讓你使用this.context來消費最近 context 上的那個值。你可以在任何生命週期中訪問到它，包括 render 函式中。

注：從文件的字面意思，class.contexttype是類元件特有的api，所以函式式元件只能使用context.consumer來訪問context物件的值，我們可以來試一下類元件和函式式元件的api:

import react from 'react';
import reactdom from 'react-dom';
import './index.css';
// 建立 context 物件
const mycontext = react.createcontext(0)
constructor(props)
this.handlechange = () => ))}
}render()
}// class & consumer 消費元件
class context_consumer extends react.component})
}}// class & contexttype 的消費元件
class context_contexttype extends react.component)}
};context_contexttype.contexttype = mycontext;
// 函式元件 & consumer
function func_consumer (props) })
}// 函式元件 & contexttype
function func_contexttype (props) 
)}func_contexttype.contexttype = mycontext;
reactdom.render(
document.getelementbyid('root')
);

context.displayname

context 物件接受乙個名為displayname的 property，型別為字串。react devtools 使用該字串來確定 context 要顯示的內容。

示例，下述元件在 devtools 中將顯示為 mydisplayname：

const mycontext = react.createcontext(/* some value */);
mycontext.displayname = 'mydisplayname';
// "mydisplayname.provider" 在 devtools 中
// "mydisplayname.consumer" 在 devtools 中

React Context 理解和使用

對 React Context 的理解以及應用

React Context和高階元件HOC用法

新版 react context的寫法

React Context 理解和使用

對 React Context 的理解以及應用

React Context和高階元件HOC用法

新版 react context的寫法

相關推薦