亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

當我發現 React 所做的一切非常簡單，甚至如果我們不是下一家大型初創公司增加籌碼，僅需要很少的JS代碼就可以構建它。這也是促使我寫這篇文章的動力，希望你讀完這篇文章也有相同的感覺。

作者：劉小夕

來源：Win10系統之家

當我學習 React 的時候，我覺得它所做的一切都是魔術，然后我就開始思考這種魔術究竟是什么。我感到非常驚訝，當我發現 React 所做的一切非常簡單，甚至如果我們不是下一家大型初創公司增加籌碼，僅需要很少的JS代碼就可以構建它。這也是促使我寫這篇文章的動力，希望你讀完這篇文章也有相同的感覺。

我們將構建什么功能？

• JSX
• 函數組件
• 類組件
• 生命周期鉤子函數

我們不會構建什么？

虛擬DOM

再次為了簡單起見，我們不會在本文中實現我們自己的虛擬DOM，我們將使用 snabbdom ，有趣的是，Vue.js 虛擬DOM借鑒了它，你可以在這里讀更多關于 snabbdom 的內容:
https://github.com/snabbdom/snabbdom

React Hooks

有些人可能對此感動失望，但是，一口吃不成一個胖子，我們需要一步一步來，因此讓我們首先構建基本的東西，然后再在此基礎上加以補充。我計劃后續文章中在我們此次構建的內容之上，編寫我們自己的 React Hooks 以及虛擬DOM，

可調試性

這是增加任何庫或框架的復雜度的關鍵部分之一，由于我們只是出于娛樂目的而做，因此我們可以放心地忽略 React 提供的可調試性功能，例如 dev tools 和分析器。

性能和兼容性

我們不會過于關注我們的庫的性能，我們只想構建能正常運行的庫。讓我們也不要費力地確保它可以在市場上的所有瀏覽器上使用，只有能夠在某些現代瀏覽器上可以使用，那就已經很好了。

讓我們開始動手

在開始之前，我們需要一個支持ES6，自動熱更新的腳手架。我已經創建了一個非常基礎的 webpack 腳手架，你可以進行克隆和設置:
https://github.com/ameerthehacker/webpack-starter-pack

JSX

JSX 是一個開放標準，不僅限于 React，我們可以在沒有 React 的情況下使用它，它比你想象得還有容易。想要了解如何讓我們的庫支持 JSX ，我們首先需要看看在我們使用 JSX 時背后究竟發生了什么。

const App = ( 
 <div> 
 <h1 className="primary">QndReact is Quick and dirty react</h1> 
 <p>It is about building your own React in 90 lines of JavsScript</p> 
 </div> 
); 
// 上面的 jsx 被轉換成下面這樣： 
/** 
 * React.createElement(type, attributes, children) 
 */ 
var App = React.createElement( 
 "div", 
 null, 
 React.createElement( 
 "h1", 
 { 
 className: "primary" 
 }, 
 "QndReact is Quick and dirty react" 
 ), 
 React.createElement( 
 "p", 
 null, 
 "It is about building your own React in 90 lines of JavsScript" 
 ) 
); 

正如你看到的，每個 JSX 元素都通過 @
babel/plugin-transform-react-jsx 插件轉換為了 React.createElement(...) 函數調用的形式，你可以在這里使用 JSX 進行更多的轉換

為了使上述轉換運行正常，在編寫 JSX 時，你需要引入 React，你就是為什么當你不引入 React 時，編寫 JSX 會出現錯誤的原因。 @
babel/plugin-transform-react-jsx 插件已經添加在了我們的項目依賴中，下面我們先安裝一下依賴

npm install 

把項目的配置增加到 .babelrc 文件中:

{ 
 "plugins": [ 
 [ 
 "@babel/plugin-transform-react-jsx", 
 { 
 "pragma": "QndReact.createElement", // default pragma is React.createElement 
 "throwIfNamespace": false // defaults to true 
 } 
 ] 
 ] 
} 

此后，只要 Babel 看到 JSX ，它就會調用 QntReact.createElement(...)，但是我們還未定義此函數，現在我們將其寫到 src/qnd-react.js 中。

const createElement = (type, props = {}, ...children) => { 
 console.log(type, props, children); 
}; 
// 像 React.createElement 一樣導出 
const QndReact = { 
 createElement 
}; 
export default QndReact; 

我們在控制臺打印出了傳遞給我們的 type 、 props、 children。為了測試我們的轉換是否正常，我們可以在 src/index.js 中編寫一些 JSX 。

// QndReact 需要被引入 
import QndReact from "./qnd-react"; 
const App = ( 
 <div> 
 <h1 className="primary"> 
 QndReact is Quick and dirty react 
 </h1> 
 <p>It is about building your own React in 90 lines of JavsScript</p> 
 </div> 
); 

啟動項目: npm start，在瀏覽器輸入localhost:3000，現在你的控制臺看起來應該與下圖類似:

根據以上信息，我們可以使用 snabbdom 創建我們內部的 虛擬DOM節點 ，然后我們才能將其用于我們的協調(reconciliation) 過程，可以使用如下的命令安裝 snabbdom:

npm install snabbdom 

當 QndReact.createElement(...) 被調用時嗎，創建和返回 虛擬DOM節點。

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 return h(type, { props }, children); 
}; 
const QndReact = { 
 createElement 
}; 
export default QndReact; 

很好，現在我們可以解析 JSX 并創建自己的虛擬DOM節點，但是仍然無法在瀏覽器中呈現出來。為此，我們在 src/qnd-react-dom.js 添加一個 render 方法。

//src/qnd-react-dom.js 
//React.render(<App />, document.getElementById('root')); 
const render = (el, rootElement) => { 
 //將el渲染到rootElement的邏輯 
} 
const QndReactDom = { 
 render 
} 

與其我們自己去處理將元素放到 DOM 上的繁重工作，不如讓 snabbdom 去處理。為此我們可以引入模塊去初始化 snabbdom。snabbdom 中的模塊可以看做是插件，可以支持 snabbdom 做更多的事。

//src/qnd-react-dom.js 
import * as snabbdom from 'snabbdom'; 
import propsModule from 'snabbdom/modules/props'; 
const reconcile = snabbdom.init([propsModule]); 
const render = (el, rootDomElement) => { 
 //將el渲染到rootElement 
 reconcile(rootDomElement, el); 
} 
const QndReactDom = { 
 render 
} 
export default QndReactDom; 

我們使用這個新的 render 函數去 src/index 中去做一些魔法。

//src/index.js 
import QndReact from "./qnd-react"; 
import QndReactDom from './qnd-react-dom'; 
const App = ( 
 <div> 
 <h1 className="primary"> 
 QndReact is Quick and dirty react 
 </h1> 
 <p>It is about building your own React in 90 lines of JavsScript</p> 
 </div> 
); 
QndReactDom.render(App, document.getElementById('root')); 

瞧，我們的JSX已經可以渲染到屏幕上了。

等下，這個有一個小問題，當我們兩次調用 render 時，我們會在控制臺看到一些奇怪的錯誤(譯者注: 可以在 index.js 中多次調用 render，查看控制臺錯誤)，背后的原因是我們只有在第一次渲染時，可以在真實的DOM節點上調用 reconcile 方法，然后，我們應該在之前返回的虛擬DOM節點上調用。

//src/qnd-react-dom.js 
import * as snabbdom from 'snabbdom'; 
import propsModule from 'snabbdom/modules/props'; 
const reconcile = snabbdom.init([propsModule]); 
let rootVNode; 
//QndReactDom.render(App, document.getElementById('root')) 
const render = (el, rootDomElement) => { 
 if(rootVNode == null) { 
 //第一次調用 render 時 
 rootVNode = rootDomElement; 
 } 
 rootVNode = reconcile(rootVNode, el); 
} 
const QndReactDom = { 
 render 
} 
export default QndReactDom; 

很開心，我們的應用程序中有一個能正常工作的 JSX 渲染，現在讓我們開始渲染一個函數組件，而不僅僅是一些普通的 html。

讓我們向 src/index.js 添加一個 Greeting 函數組件，如下所示：

//src/index.js 
import QndReact from "./qnd-react"; 
import QndReactDom from './qnd-react-dom'; 
const Greeting = ({ name }) => <p>Welcome {name}!</p>; 
const App = ( 
 <div> 
 <h1 className="primary"> 
 QndReact is Quick and dirty react 
 </h1> 
 <p>It is about building your own React in 90 lines of JavsScript</p> 
 <Greeting name={"Ameer Jhan"} /> 
 </div> 
); 
QndReactDom.render(App, document.getElementById('root')); 

此時，在控制臺會出現以下錯誤:

我們可以在 QndReact.createElement(...) 方法中打印出數據看一下原因。

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 console.log(type, props, children); 
 return h(type, { props }, children); 
}; 
... 

如果可以看到，函數組件傳遞過來的 type 是一個JS函數。如果我們調用這個函數，就能獲得組件希望渲染的 HTML 結果。

我們根據 type 參數的類型，如果是函數類型，我們就調用這個函數，并將 props 作為參數傳給它，如果不是函數類型，我們就當作普通的 HTML 元素處理。

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 
const QndReact = { 
 createElement 
}; 
export default QndReact; 

歡呼！我們的函數組件已經可以正常工作了。

我們已經完成了很多，讓我們深吸一口氣，喝杯咖啡，因為我們已經差不多實現了 React，不過我們還需要攻克類組件。

我們首先在 src/qnd-react.js 中創建 Component 基類：

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 
class Component { 
 constructor() { } 
 componentDidMount() { } 
 setState(partialState) { } 
 render() { } 
} 
const QndReact = { 
 createElement, 
 Component 
}; 
export default QndReact; 

現在我們在 src/counter.js 中編寫我們的第一個 Counter 類組件：

//src/counter.js 
import QndReact from './qnd-react'; 
export default class Counter extends QndReact.Component { 
 constructor(props) { 
 super(props); 
 this.state = { 
 count: 0 
 } 
 } 
 componentDidMount() { 
 console.log('Component mounted'); 
 } 
 render() { 
 return <p>Count: {this.state.count}</p> 
 } 
} 

是的，我知道我們尚未在計數器中實現任何邏輯，但是別擔心，一旦我們的狀態管理系統運行正常，我們就會添加這些內容。現在，讓我們嘗試在 src/index.js 中渲染它。

//src/index.js 
import QndReact from "./qnd-react"; 
import QndReactDom from './qnd-react-dom'; 
import Counter from "./counter"; 
const Greeting = ({ name }) => <p>Welcome {name}!</p>; 
const App = ( 
 <div> 
 <h1 className="primary"> 
 QndReact is Quick and dirty react 
 </h1> 
 <p>It is about building your own React in 90 lines of JavsScript</p> 
 <Greeting name={"Ameer Jhan"} /> 
 <Counter /> 
 </div> 
); 
QndReactDom.render(App, document.getElementById('root')); 

和料想中的一樣，又又又報錯了。

上面的錯誤看起來是不是很熟悉，當你嘗試使用類組件而不集成自 React.Component 時，可能遇到過以上錯誤。要知道為什么會這樣，我們可以在 React.createElement(...) 中添加一個 console.log，如下所示：

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 console.log(typeof (type), type); 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 

我們來看看控制臺打印了什么內容。

你可以看出 Counter 的 type 類型也是函數，這是因為 Babel 會將 ES6 類轉換為普通的 JS 函數，那么我們該如何類組件的情況呢。其實，我們可以在我們的 Component 基類中添加一個靜態屬性，這樣我們利用該屬性去檢查 type 參數是否是一個類。React 中也是相同的處理邏輯，你可以閱讀 Dan的博客

//src/qnt-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 console.log(typeof (type), type); 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 
class Component { 
 constructor() { } 
 componentDidMount() { } 
 setState(partialState) { } 
 render() { } 
} 
//給 Component 組件添加靜態屬性來區分是函數還是類 
Component.prototype.isQndReactClassComponent = true; 
const QndReact = { 
 createElement, 
 Component 
}; 
export default QndReact; 

現在，我們在 QndReact.createElement(...) 中增加一些代碼來處理類組件。

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 console.log(type.prototype); 
 /** 
 * 如果是類組件 
 * 1.創建一個實例 
 * 2.調用實例的 render 方法 
 */ 
 if (type.prototype && type.prototype.isQndReactClassComponent) { 
 const componentInstance = new type(props); 
 return componentInstance.render(); 
 } 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 
class Component { 
 constructor() { } 
 componentDidMount() { } 
 setState(partialState) { } 
 render() { } 
} 
//給 Component 組件添加靜態屬性來區分是函數還是類 
Component.prototype.isQndReactClassComponent = true; 
const QndReact = { 
 createElement, 
 Component 
}; 
export default QndReact; 

現在，我們的類組件已經能夠渲染到瀏覽器上了：

我們向類組件中增加 state，在此之前，我們需要知道，每次調用 this.setState({}) 時，如何更新 DOM 的責任是 react-dom 包，而不是 React 的責任。這是為了使 React 的核心部分，例如Component 類與平臺分離，從而提升代碼的可重用性。即在 ReactNative 中，你也可以使用同樣的 Component 類，react-native 負責如何更新UI。你可能會問自己：當調用 this.setState(...) 時，React 如何知道該怎么做，答案就是 react-dom 通過在 React 上設置了一個 __updater 屬性與 React 進行通信。Dan 對此也有出色的文章，你可以點擊閱讀。現在讓我們在 QndReactDom 中為 QndReact 添加 __updater 屬性。

//src/qnd-react-dom.js 
import QndReact from './qnd-react'; 
import * as snabbdom from 'snabbdom'; 
import propsModule from 'snabbdom/modules/props'; 
... 
//QndReactDom 告訴 QndReact 如何更新 DOM 
QndReact.__updater = () => { 
 //當調用 this.setState 的時候更新 DOM 邏輯 
} 

無論何時我們調用 this.setState({...})，我們都需要比較組件的 oldVNode 和在組件上調用了 render 方法之后生成的 newVNode。為了進行比較，我們在類組件上添加 __vNode 屬性，以維護該組件當前的 VNode 實例。

//src/qnd-react.js 
... 
const createElement = (type, props = {}, ...children) => { 
 /** 
 * 如果是類組件 
 * 1.創建一個實例 
 * 2.調用實例的 render 方法 
 */ 
 if (type.prototype && type.prototype.isQndReactClassComponent) { 
 const componentInstance = new type(props); 
 componentInstancecomponentInstance.__vNode = componentInstance.render(); 
 return componentInstance.__vNode; 
 } 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 
... 

現在我們來在 Component 的基類中實現 setState 方法。

//src/qnd-react.js 
... 
class Component { 
 constructor() { } 
 componentDidMount() { } 
 setState(partialState) { 
 this.state = { 
 ...this.state, 
 ...partialState 
 } 
 //調用 QndReactDom 提供的 __updater 方法 
 QndReact.__updater(this); 
 } 
 render() { } 
} 
... 

處理 QndReactDom 中的 __updater 方法。

//src/qnd-react-dom.js 
... 
QndReact.__updater = (componentInstance) => { 
 //當調用 this.setState 的時候更新 DOM 邏輯 
 //獲取在 __vNode 上存儲的 oldVNode 
 const oldVNode = componentInstance.__vNode; 
 //獲取 newVNode 
 const newVNode = componentInstance.render(); 
 //更新 __vNode 
 componentInstance.__vNode = reconcile(oldVNode, newVNode); 
} 
... 
export default QndReactDom; 

OK，我們在 Counter 組件中增加 state 來檢驗我們的 setState 實現是否生效。

//src/counter.js 
import QndReact from './qnd-react'; 
export default class Counter extends QndReact.Component { 
 constructor(props) { 
 super(props); 
 this.state = { 
 count: 0 
 } 
 // update the count every second 
 setInterval(() => { 
 this.setState({ 
 count: this.state.count + 1 
 }) 
 }, 1000); 
 } 
 componentDidMount() { 
 console.log('Component mounted'); 
 } 
 render() { 
 return <p>Count: {this.state.count}</p> 
 } 
} 

太棒啦，現在 Counter 組件運行情況與我們預期完全一致。

我們繼續添加 componentDidMount 的生命周期鉤子函數。 Snabbdom 提供了一些鉤子函數，通過他們，我們可以知道真實DOM上面是否有添加，刪除或是更新了虛擬DOM節點，你可以在此處了解更多信息。

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 /** 
 * 如果是類組件 
 * 1.創建一個實例 
 * 2.調用實例的 render 方法 
 */ 
 if (type.prototype && type.prototype.isQndReactClassComponent) { 
 const componentInstance = new type(props); 
 componentInstancecomponentInstance.__vNode = componentInstance.render(); 
 return componentInstance.__vNode; 
 //增加鉤子函數(當虛擬DOM被添加到真實DOM節點上時) 
 componentInstance.__vNode.data.hook = { 
 create: () => { 
 componentInstance.componentDidMount() 
 } 
 } 
 } 
 //如果是函數組件，那么調用它，并返回執行結果 
 if (typeof (type) == 'function') { 
 return type(props); 
 } 
 return h(type, { props }, children); 
}; 
... 
export default QndReact; 

至此，我們已經在類組件上支持了 componentDidMount 生命周期鉤子函數。

結束之前，我們再添加下事件綁定的支持。為此，我們可以在 Counter 組件中增加一個按鈕，點擊的時候，計數器的數字增加。請注意，我們遵循的是基于常規的JS事件命名約定，而非基于 React，即雙擊事件使用 onDblClick，而非 onDoubleClick。

import QndReact from './qnd-react'; 
export default class Counter extends QndReact.Component { 
 constructor(props) { 
 super(props); 
 this.state = { 
 count: 0 
 } 
 } 
 componentDidMount() { 
 console.log('Component mounted'); 
 } 
 render() { 
 return ( 
 <div> 
 <p>Count: {this.state.count}</p> 
 <button onClick={() => this.setState({ 
 count: this.state.count + 1 
 })}>Increment</button> 
 </div> 
 ) 
 } 
} 

上面的組件不會正常工作，因為我們沒有告訴我們的 VDom 如何去處理它。首先，我們給 Snabdom 增加事件監聽模塊。

//src/qnd-react-dom.js 
import QndReact from './qnd-react'; 
import * as snabbdom from 'snabbdom'; 
import propsModule from 'snabbdom/modules/props'; 
import eventlistenersModule from 'snabbdom/modules/eventlisteners'; 
const reconcile = snabbdom.init([propsModule, eventlistenersModule]); 
... 

Snabdom 希望將文本屬性和事件屬性作為兩個單獨的對象，我們我們需要這樣做：

//src/qnd-react.js 
import { h } from 'snabbdom'; 
const createElement = (type, props = {}, ...children) => { 
 ... 
 let dataProps = {}; 
 let eventProps = {}; 
 for (let propKey in props) { 
 // event 屬性總是以 `on` 開頭 
 if (propKey.startsWith('on')) { 
 const event = propKey.substring(2).toLowerCase(); 
 eventProps[event] = props[propKey]; 
 } else { 
 dataProps[propKey] = props[propKey]; 
 } 
 } 
 return h(type, { props: dataProps, on: eventProps }, children); 
}; 
... 

現在當我們點擊 Counter 組件的按鈕的時候，計數器加1。

太棒了，我們終于完成了一個React的簡陋的實現。但是，我們還不能呈現列表，我想把它作為有趣的小任務交給您。我建議您嘗試在 src/index.js 中呈現一個列表，然后調試 QndReact.createElement(...) 方法找出問題所在。