react中context傳遞資料

在乙個典型的 react 應用中，資料是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，ui 主題），這些屬性是應用程式中許多元件都需要的。context 提供了一種在元件之間共享此類值的方式，而不必顯式地通過元件樹的逐層傳遞 props。

何時使用 context ？

context 設計目的是為了共享那些對於乙個元件樹而言是「全域性」的資料，例如當前認證的使用者、主題或首選語言。

context 主要應用場景在於很多不同層級的元件需要訪問同樣一些的資料。請謹慎使用，因為這會使得元件的復用性變差。

使用案例：

import react from 'react';
import middle from './middle'
export const  = react.createcontext()
constructor (props)
}render()
}

middle.js 中間元件，並不關心和他無關的元件。當然如果需要接值的話，也可以引入consumer，基於 context 值進行渲染

import react from 'react';
import son from './son'
class middle extends react.component 
}export default middle;

son.js

import react from 'react';
class son extends react.component)}
}export default son;

說明：

React 使用Context傳遞引數

extends react component extends react component extends react component props themedbutton props theme consumer 當provider發生資料變更時，會觸發到 consumer 發生渲染，所有...

react中Context的使用

context 提供了乙個無需為每層元件手動新增 props，就能在元件樹間進行資料傳遞的方法。props單向資料流動如果覺得props傳遞資料很繁瑣，可以採用context,進行跨元件傳遞資料例如給子代元素傳遞一筆錢手動新增狗頭為了後續使用方便，封裝乙個元件 import from rea...

react中context傳遞資料

React 使用Context傳遞引數

react中Context的使用

react中Context的使用

相關推薦