這個是從零開始開發一個 React 系列的第七篇。想要訪問之前的內容可以點擊下方的鏈接進行訪問：

最簡單的實現，包括 vdom 結構，createElement，ReactDOM.render

增加 Class 的支持

增加 JSX 的支持

增加 state 支持

增加聲明周期

增加 dom-diff（調和算法）

先行知識

學習這個課程之前呢，需要各位了解 React 的 api，以及做了什么事情。

如果完全不了解的話，不建議您繼續往下看。

如果你已經具備了相關 React 的知識，那么就讓我們開始吧。

本章要實現的效果

本章主要實現 react 的 Context API。

Context 提供了一個無需為每層組件手動添加 props，就能在組件樹間進行數據傳遞的方法。

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

開始實現

我們繼續拿官網的一個關于Context基礎API的例子來做。

我們需要將theme從頂層的APP組件傳遞到最下層的Button，從而Button能夠根據主題的不同顯示不同的樣式，不使用Context的話是這樣的：

使用Context的話是這樣的：

代碼如下：

// Context 可以讓我們無須明確地傳遍每一個組件，就能將值深入傳遞進組件樹。 // 為當前的 theme 創建一個 context（“light”為默認值）。 const ThemeContext = React.createContext('light');class App extends React.Component {render() {// 使用一個 Provider 來將當前的 theme 傳遞給以下的組件樹。// 無論多深，任何組件都能讀取這個值。// 在這個例子中，我們將 “dark” 作為當前的值傳遞下去。return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);} }// 中間的組件再也不必指明往下傳遞 theme 了。 function Toolbar(props) {return (<div><ThemedButton /></div>); }class ThemedButton extends React.Component {// 指定 contextType 讀取當前的 theme context。// React 會往上找到最近的 theme Provider，然后使用它的值。// 在這個例子中，當前的 theme 值為 “dark”。static contextType = ThemeContext;render() {return <Button theme={this.context} />;} }

通過代碼發現這里一共需要實現的API有React.createContext, 還有一個contextType.其中React.createContext是會返回一個對象。這個對象有一個key為Provider的組件。 這個組件接受一個value的prop并將其作為context的值。 contextType是一個靜態屬性，也就說所有的組件實例都公用一個，沒必要都產生一個。我們的組件從Context里讀取最新的數據即可。

接下來我們分別實現React.createContext和contextType。

導出 React.createContext API

我們首先要做的第一件事情就是導出createContextAPI， 盡管這個API我們還沒寫，我們先占個位置。

const React = {createElement,Component: require("./component"), + createContext: require("./context").createContext };

實現數據的存儲

我們新建一個文件context.js 我們先放一個空殼子進去，接下來我們就要實現這個，其實代碼很簡單。

+ import React from './mini-react'; + import Component from './component';+ export function createContext(defaultValue) { + return { + Provider: class Provider extends Component { + render() { + return <div></div> + } + } + } +}

接下來我們填充具體的邏輯，邏輯很簡單，直接上代碼。

import React from './mini-react'; import Component from './component';export function createContext(defaultValue) {return {Provider: class Provider extends Component {render() { + const currentValue = this.props.value; + Provider.currentValue = currentValue || defaultValue;return <div></div>} }} }

實現數據的讀取

兩行代碼搞定了context數據的更新邏輯，如何讓所有組件都能接受到里面的值呢？ 接下來我們需要修改下Component的實現。

簡單增加一行代碼:

class Component {constructor(props) {this.props = props; + this.context = this.constructor.contextType && this.constructor.contextType.Provider.currentValue;...}... }

總結

本節實現了React的Context API相關的功能， 下一節我們引入Ref(文章未更新)

總結

以上是生活随笔為你收集整理的react的导出是怎么实现的_从零开始开发一个 React的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。