日常記錄一下學(xué)習(xí)到的知識(shí)點(diǎn)吧。好記性不如爛筆頭~ 我相信這是對(duì)的嘱吗。
官方文檔 的demo已經(jīng)很棒了伴网。但我覺得我的描述會(huì)讓你更容易理解览绿。
1.Context
Context 通過組件樹提供了一個(gè)傳遞數(shù)據(jù)的方法萍丐，從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性相叁。
有部分小伙伴應(yīng)該使用props屬性進(jìn)行組件向下傳值的操作柄冲。當(dāng)多個(gè)組件嵌套時(shí)候吻谋。你就需要慢慢向上尋找最初的值是什么~(手動(dòng)微笑,惡心吧 )
2.API (個(gè)人大白話理解)
React.createContext：創(chuàng)建一個(gè)上下文的容器(組件), defaultValue可以設(shè)置共享的默認(rèn)數(shù)據(jù)
const {Provider, Consumer} = React.createContext(defaultValue);
Provider(生產(chǎn)者): 和他的名字一樣。用于生產(chǎn)共享數(shù)據(jù)的地方现横。生產(chǎn)什么呢漓拾？ 那就看value定義的是什么了。value:放置共享的數(shù)據(jù)戒祠。
<Provider value={/*共享的數(shù)據(jù)*/}>
/*里面可以渲染對(duì)應(yīng)的內(nèi)容*/
</Provider>
Consumer(消費(fèi)者):這個(gè)可以理解為消費(fèi)者骇两。 他是專門消費(fèi)供應(yīng)商(Provider 上面提到的)產(chǎn)生數(shù)據(jù)。Consumer需要嵌套在生產(chǎn)者下面姜盈。才能通過回調(diào)的方式拿到共享的數(shù)據(jù)源低千。當(dāng)然也可以單獨(dú)使用，那就只能消費(fèi)到上文提到的defaultValue
<Consumer>
{value => /*根據(jù)上下文 進(jìn)行渲染相應(yīng)內(nèi)容*/}
</Consumer>
3.react腳手架快速搭建
命令行按順序執(zhí)行以下代碼：
npm install -g create-react-app
create-react-app demo
yarn start
4.demo
在上面 腳手架添加 son.js 贩据、grandson.js 并修改App.js內(nèi)容栋操。項(xiàng)目結(jié)構(gòu)自行調(diào)整：
- App.js 父組件
//App.js
import React from 'react';
import Son from './son';//引入子組件
// 創(chuàng)建一個(gè) theme Context,
export const {Provider,Consumer} = React.createContext("默認(rèn)名稱");
export default class App extends React.Component {
render() {
let name ="小人頭"
return (
//Provider共享容器 接收一個(gè)name屬性
<Provider value={name}>
<div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
<p>父組件定義的值:{name}</p>
<Son />
</div>
</Provider>
);
}
}
son.js 子組件
//son.js 子類
import React from 'react';
import { Consumer } from "./App.js";//引入父組件的Consumer容器
import Grandson from "./grandson.js";//引入子組件
function Son(props) {
return (
//Consumer容器,可以拿到上文傳遞下來的name屬性,并可以展示對(duì)應(yīng)的值
<Consumer>
{( name ) =>
<div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
<p>子組件。獲取父組件的值:{name}</p>
{/* 孫組件內(nèi)容 */}
<Grandson />
</div>
}
</Consumer>
);
}
export default Son;
grandson.js 孫組件
//grandson.js 孫類
import React from 'react';
import { Consumer } from "./App.js";//引入父組件的Consumer容器
function Grandson(props) {
return (
//Consumer容器,可以拿到上文傳遞下來的name屬性,并可以展示對(duì)應(yīng)的值
<Consumer>
{(name ) =>
<div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
<p>孫組件饱亮。獲取傳遞下來的值:{name}</p>
</div>
}
</Consumer>
);
}
export default Grandson;
運(yùn)行上述代碼矾芙。相信小伙伴對(duì) React context 的作用 以及使用有了一定的了解。當(dāng)然還有其他場(chǎng)景的使用近上，可直接看官方context文檔 這個(gè)文章作為自己學(xué)習(xí)記錄剔宪。也希望幫助到需要的小伙伴們。
有不對(duì)的地方 希望小伙伴 及時(shí)指正。謝謝
