40行代碼內(nèi)實現(xiàn)一個React.js
一、前言
本文會教你如何在 40 行代碼內(nèi)，不依賴任何第三方的庫，用純 JavaScript 實現(xiàn)一個 React.js 。
本文的目的是：揭開對初學者看起來很很難理解的 React.js 的組件化形式的外衣。如果你剛開始學習 React.js 并且感覺很迷茫，那么看完這篇文章以后就能夠解除一些疑惑。
另外注意，本文所實現(xiàn)的代碼只用于說明教學展示，并不適用于生產(chǎn)環(huán)境。代碼托管這個 倉庫。心急如焚的同學可以先去看代碼，但本文會從最基礎(chǔ)的內(nèi)容開始解釋。
二、一切從點贊說起
接下來所有的代碼都會從一個基本的點贊功能開始演化，你會逐漸看到，文章代碼慢慢地越來越像 React.js 的組件代碼。而在這個過程里面，大家需要只需要跟著文章的思路，就可以在代碼的演化當中體會到組件化形式。
假設(shè)現(xiàn)在我們需要實現(xiàn)一個點贊、取消點贊的功能。
如果你對前端稍微有一點了解，你就順手拈來：
HTML:
- <body>
- <div class='wrapper'>
- <button class='like-btn'>
- <span class='like-text'>點贊</span>
- <span>👍</span>
- </button>
- </div>
- </body>
為了現(xiàn)實當中的實際情況，所以這里特意把這個 button 的 HTML 結(jié)構(gòu)搞得稍微復(fù)雜一些。有了這個 HTML 結(jié)構(gòu)，現(xiàn)在就給它加入一些 JavaScript 的行為：
JavaScript：
- const button = document.querySelector('.like-btn')
- const buttonbuttonText = button.querySelector('.like-text')
- let isLiked = false
- button.addEventListener('click', function () {
- isLiked = !isLiked
- if (isLiked) {
- buttonText.innerHTML = '取消'
- } else {
- buttonText.innerHTML = '點贊'
- }
- }, false)
功能和實現(xiàn)都很簡單，按鈕已經(jīng)可以提供點贊和取消點贊的功能。這時候你的同事跑過來了，說他很喜歡你的按鈕，他也想用你寫的這個點贊功能。你就會發(fā)現(xiàn)這種實現(xiàn)方式很致命：你的同事要把整個 button 和里面的結(jié)構(gòu)復(fù)制過去，還有整段 JavaScript 代碼也要復(fù)制過去。這樣的實現(xiàn)方式?jīng)]有任何可復(fù)用性。
三、實現(xiàn)可復(fù)用性
所以現(xiàn)在我們來想辦法解決這個問題，讓這個點贊功能具有較好的可復(fù)用的效果，那么你的同事們就可以輕松自在地使用這個點贊功能。
1. 結(jié)構(gòu)復(fù)用
現(xiàn)在我們來重新編寫這個點贊功能。這次我們先寫一個類，這個類有 render 方法，這個方法里面直接返回一個表示 HTML 結(jié)構(gòu)的字符串：
- class LikeButton {
- render () {
- return `
- <button class='like-btn'>
- <span class='like-text'>贊</span>
- <span>👍</span>
- </button>
- `
- }
- }
然后可以用這個類來構(gòu)建不同的點贊功能的實例，然后把它們插到頁面中。
- const wrapper = document.querySelector('.wrapper')
- const likeButton1 = new LikeButton()
- wrapper.innerHTML = likeButton1.render()
- const likeButton2 = new LikeButton()
- wrapper.innerHTML += likeButton2.render()
這里非常暴力地使用了 innerHTML ，把兩個按鈕粗魯?shù)夭迦肓?wrapper 當中。雖然你可能會對這種實現(xiàn)方式非常不滿意，但我們還是勉強了實現(xiàn)了結(jié)構(gòu)的復(fù)用。我們后面再來優(yōu)化它。
2. 生成 DOM 元素并且添加事件
你一定會發(fā)現(xiàn)，現(xiàn)在的按鈕是死的，你點擊它它根本不會有什么反應(yīng)。因為根本沒有往上面添加事件。但是問題來了，LikeButton 類里面是雖然說有一個 button，但是這玩意根本就是在字符串里面的。你怎么能往一個字符串里面添加事件呢?DOM 事件的 API 只有 DOM 結(jié)構(gòu)才能用。
我們需要 DOM 結(jié)構(gòu)，準確地來說：我們需要這個點贊功能的 HTML 字符串代表的 DOM 結(jié)構(gòu)。假設(shè)我們現(xiàn)在有一個函數(shù) createDOMFromString ，你往這個函數(shù)傳入 HTML 字符串，但是它會把相應(yīng)的 DOM 元素返回給你。這個問題就可以額解決了。
- // ::String => ::Document
- const createDOMFromString = (domString) => {
- // TODO
- }
先不用管這個函數(shù)應(yīng)該怎么實現(xiàn)，先知道它是干嘛的。拿來用就好，這時候用它來改寫一下 LikeButton 類：
- class LikeButton {
- render () {
- this.el = createDOMFromString(`
- <button class='like-btn'>
- <span class='like-text'>點贊</span>
- <span>👍</span>
- </button>
- `)
- this.el.addEventListener('click', () => console.log('click'), false)
- return this.el
- }
- }
現(xiàn)在 render() 返回的不是一個 html 字符串了，而是一個由這個 html 字符串所生成的 DOM。在返回 DOM 元素之前會先給這個 DOM 元素上添加事件再返回。
因為現(xiàn)在 render 返回的是 DOM 元素，所以不能用 innerHTML 暴力地插入 wrapper。而是要用 DOM API 插進去。
- const wrapper = document.querySelector('.wrapper')
- const likeButton1 = new LikeButton()
- wrapper.appendChild(likeButton1.render())
- const likeButton2 = new LikeButton()
- wrapper.appendChild(likeButton2.render())
現(xiàn)在你點擊這兩個按鈕，每個按鈕都會在控制臺打印 click，說明事件綁定成功了。但是按鈕上的文本還是沒有發(fā)生改變，只要稍微改動一下 LikeButton 的代碼就可以完成完整的功能：
- class LikeButton {
- constructor () {
- this.state = { isLiked: false }
- }
- changeLikeText () {
- const likeText = this.el.querySelector('.like-text')
- this.state.isLiked = !this.state.isLiked
- if (this.state.isLiked) {
- likeText.innerHTML = '取消'
- } else {
- likeText.innerHTML = '點贊'
- }
- }
- render () {
- this.el = createDOMFromString(`
- <button class='like-btn'>
- <span class='like-text'>點贊</span>
- <span>👍</span>
- </button>
- `)
- this.el.addEventListener('click', this.changeLikeText.bind(this), false)
- return this.el
- }
- }
這里的代碼稍微長了一些，但是還是很好理解。只不過是在給 LikeButton 類添加了構(gòu)造函數(shù)，這個構(gòu)造函數(shù)會給每一個 LikeButton 的實例添加一個對象 state，state 里面保存了每個按鈕自己是否點贊的狀態(tài)。還改寫了原來的事件綁定函數(shù)：原來只打印 click，現(xiàn)在點擊的按鈕的時候會調(diào)用 changeLikeText 方法，這個方法會根據(jù) this.state 的狀態(tài)改變點贊按鈕的文本。
如果你現(xiàn)在還能跟得上文章的思路，那么你留意下，現(xiàn)在的代碼已經(jīng)和 React.js 的組件代碼有點類似了。但其實我們根本沒有講 React.js 的任何內(nèi)容，我們一心一意只想怎么做好“組件化”。
現(xiàn)在這個組件的可復(fù)用性已經(jīng)很不錯了，你的同事們只要實例化一下然后插入到 DOM 里面去就好了。
四、為什么不暴力一點?
仔細留意一下 changeLikeText 函數(shù)，這個函數(shù)包含了 DOM 操作，現(xiàn)在看起來比較簡單，那是因為現(xiàn)在只有 isLiked 一個狀態(tài)。但想一下，因為你的數(shù)據(jù)狀態(tài)改變了你就需要去更新頁面的內(nèi)容，所以如果你的組件包含了很多狀態(tài)，那么你的組件基本全部都是 DOM 操作。一個組件包含很多狀態(tài)的情況非常常見，所以這里還有優(yōu)化的空間：如何盡量減少這種手動 DOM 操作?
1. 狀態(tài)改變 -> 構(gòu)建新的 DOM 元素
這里要提出的一種解決方案：一旦狀態(tài)發(fā)生改變，就重新調(diào)用 render 方法，構(gòu)建一個新的 DOM 元素。這樣做的好處是什么呢?好處就是你可以在 render 方法里面使用***的 this.state 來構(gòu)造不同 HTML 結(jié)構(gòu)的字符串，并且通過這個字符串構(gòu)造不同的 DOM 元素。頁面就更新了!聽起來有點繞，看看代碼怎么寫：
- class LikeButton {
- constructor () {
- this.state = { isLiked: false }
- }
- setState (state) {
- this.state = state
- thisthis.el = this.render()
- }
- changeLikeText () {
- this.setState({
- isLiked: !this.state.isLiked
- })
- }
- render () {
- this.el = createDOMFromString(`
- <button class='like-btn'>
- <span class='like-text'>${this.state.isLiked ? '取消' : '點贊'}</span>
- <span>👍</span>
- </button>
- `)
- this.el.addEventListener('click', this.changeLikeText.bind(this), false)
- return this.el
- }
- }
其實只是改了幾個小地方：
- render 函數(shù)里面的 HTML 字符串會根據(jù) this.state 不同而不同(這里是用了 ES6 的字符串特性，做這種事情很方便)。
- 新增一個 setState 函數(shù)，這個函數(shù)接受一個對象作為參數(shù);它會設(shè)置實例的 state，然后重新調(diào)用一下 render 方法。
- 當用戶點擊按鈕的時候， changeLikeText 會構(gòu)建新的 state 對象，這個新的 state ，傳入 setState 函數(shù)當中。
這樣的結(jié)果就是，用戶每次點擊，changeLikeText 都會調(diào)用改變組件狀態(tài)然后調(diào)用 setState;setState 會調(diào)用 render 方法重新構(gòu)建新的 DOM 元素;render 方法會根據(jù) state 的不同構(gòu)建不同的 DOM 元素。
也就是說，你只要調(diào)用 setState，組件就會重新渲染。我們順利地消除了沒必要的 DOM 操作。
2. 重新插入新的 DOM 元素
上面的改進不會有什么效果，因為你仔細看一下就會發(fā)現(xiàn)，其實重新渲染的 DOM 元素并沒有插入到頁面當中。所以這個組件之外，你需要知道這個組件發(fā)生了改變，并且把新的 DOM 元素更新到頁面當中。
重新修改一下 setState 方法：
- ...
- setState (state) {
- const oldEl = this.el
- this.state = state
- thisthis.el = this.render()
- if (this.onStateChange) this.onStateChange(oldEl, this.el)
- }
- ...
使用這個組件的時候：
- const likeButton = new LikeButton()
- wrapper.appendChild(likeButton.render()) // ***次插入 DOM 元素
- component.onStateChange = (oldEl, newEl) => {
- wrapper.insertBefore(newEl, oldEl) // 插入新的元素
- wrapper.removeChild(oldEl) // 刪除舊的元素
- }
這里每次 setState 都會調(diào)用 onStateChange 方法，而這個方法是實例化以后時候被設(shè)置的，所以你可以自定義 onStateChange 的行為。這里做的事是，每當 setState 的時候，就會把插入新的 DOM 元素，然后刪除舊的元素，頁面就更新了。這里已經(jīng)做到了進一步的優(yōu)化了：現(xiàn)在不需要再手動更新頁面了。
非一般的暴力。不過沒有關(guān)系，這種暴力行為可以被 Virtual-DOM 的 diff 策略規(guī)避掉，但這不是本文章所討論的范圍。
這個版本的點贊功能很不錯，我可以繼續(xù)往上面加功能，而且還不需要手動操作DOM。但是有一個不好的地方，如果我要重新另外做一個新組件，譬如說評論組件，那么里面的這些 setState 方法要重新寫一遍，其實這些東西都可以抽出來。
五、抽象出 Component 類
為了讓代碼更靈活，可以寫更多的組件，我把這種模式抽象出來，放到一個 Component 類當中：
- class Component {
- constructor (props = {}) {
- this.props = props
- }
- setState (state) {
- const oldEl = this.el
- this.state = state
- thisthis.el = this.renderDOM()
- if (this.onStateChange) this.onStateChange(oldEl, this.el)
- }
- renderDOM () {
- this.el = createDOMFromString(this.render())
- if (this.onClick) {
- this.el.addEventListener('click', this.onClick.bind(this), false)
- }
- return this.el
- }
- }
還有一個額外的 mount 的方法，其實就是把組件的 DOM 元素插入頁面，并且在 setState 的時候更新頁面：
- const mount = (wrapper, component) => {
- wrapper.appendChild(component.renderDOM())
- component.onStateChange = (oldEl, newEl) => {
- wrapper.insertBefore(newEl, oldEl)
- wrapper.removeChild(oldEl)
- }
- }
這樣的話我們重新寫點贊組件就會變成：
- class LikeButton extends Component {
- constructor (props) {
- super(props)
- this.state = { isLiked: false }
- }
- onClick () {
- this.setState({
- isLiked: !this.state.isLiked
- })
- }
- render () {
- return `
- <button class='like-btn'>
- <span class='like-text'>${this.props.word || ''} ${this.state.isLiked ? '取消' : '點贊'}</span>
- <span>👍</span>
- </button>
- `
- }
- }
- mount(wrapper, new LikeButton({ word: 'hello' }))
有沒有發(fā)現(xiàn)你寫的代碼已經(jīng)和 React.js 的組件寫法很相似了?而且還是可以正常運作的代碼，而且我們從頭到尾都是用純的 JavaScript，沒有依賴任何第三方庫。(注意這里加入了上面沒有提到過點 props，可以給組件傳入配置屬性，跟 React.js 一樣)。
只要有了上面那個 Component 類和 mount 方法加起來不足40行代碼就可以做到組件化。如果我們需要寫另外一個組件，只需要像上面那樣，簡單地繼承一下 Component 類就好了：
- class RedBlueButton extends Component {
- constructor (props) {
- super(props)
- this.state = {
- color: 'red'
- }
- }
- onClick () {
- this.setState({
- color: 'blue'
- })
- }
- render () {
- return `
- <div style='color: ${this.state.color};'>${this.state.color}</div>
- `
- }
- }
簡單好用，完整的代碼可以在這里找到： React.js in 40
噢，忘了，還有一個神秘的 createDOMFromString，其實它更簡單：
- const createDOMFromString = (domString) => {
- const div = document.createElement('div')
- div.innerHTML = domString
- return div
- }
六、總結(jié)
你到底能從文章中獲取到什么?
好吧，我承認我標題黨了，這個 40 行不到的代碼其實是一個殘廢而且智障版的 React.js，沒有 JSX ，沒有組件嵌套等等。它只是 React.js 組件化表現(xiàn)形式的一種實現(xiàn)而已。
React 的 setState 、props 等等都只不過是一種形式，而很多初學者會被它這種形式作迷惑。本篇文章其實就是揭露了這種組件化形式的實現(xiàn)原理。如果你正在學習或者學習 React.js 過程很迷茫，那么看完這篇文章以后就能夠解除一些疑惑。
點擊《40 行代碼內(nèi)實現(xiàn)一個 React.js》閱讀原文。
【本文是51CTO專欄作者“胡子大哈”的原創(chuàng)文章，轉(zhuǎn)載請聯(lián)系作者本人獲取授權(quán)】
