實現乙個react系列二 渲染元件

在上一節jsx和虛擬dom中，我們了解了react中的jsx到虛擬dom，以及如何將虛擬dom渲染成真實的dom。在這一節中，我們將會了解react中元件是如何渲染的。

在react中，元件有兩種使用方法：

import react from

'react'
// 類定義的元件
class
hello
extends
react.component
}// 無狀態元件，通過函式來定義
const world = () => 
reactdom.render(, document.getelementbyid('#root'))
複製**

類實現的元件有自己私有的state，同時可以通過this.props來獲取傳進來的引數。

function

component(props) 
}複製**

component.prototype.setstate = function (updatestate) , this.state, updatestate)

// 重新渲染元件
render(this)
}複製**

所以react中元件在渲染時會被當成函式渲染的。所以我們在render函式中需要判斷虛擬dom的標籤屬性（此處用tag表示的）是函式還是原生dom。如果是函式的話，我們只需要拿到元件的jsx轉換後對應的虛擬dom, 然後在進行渲染。

const render = (vdom, root) =>  else 

return _render(component, root)
}  _render(vdom, root)
}複製**

const _render = (vdom, root) => 

const dom = document.createelement(vdomnode.tag)
if (vdomnode.attrs) 
}  // 遍歷子節點, 渲染子節點
vdomnode.childs && vdomnode.childs.foreach(child => render(child, dom))
// 將父節點 root 掛到 vdom 上，當再次渲染元件時，跟據 vdom.root 直接渲染 dom
if (vdom.root) 
vdom.root = root
// 將子元素掛載到其真實 dom 的父元素上
}複製**

import react from

"./react"
import reactdom from
"./reactdom"
const world = props => p>
h1>
)}class
hello
extends
react.component
}  addcount()  = this.state
this.setstate()
}  render() 
+     )
}}reactdom.render(
,  document.getelementbyid("root")
)複製**

react在渲染元件時，元件會被babel轉為react.createelement(fn, null)這種形式，第一引數是函式，所以我們需要從fn中獲取由元件的jsx轉換後的虛擬dom，然後在將虛擬dom渲染成真實dom。

setstate：在呼叫setstate時，先用object.assign更新state的值，然後重新渲染元件。

附上本文**

React入門系列 6 渲染乙個列表頁

我們先做乙個用於渲染的mock資料。const data 複製 列表渲染有多種方式來進行，一般我們採用es6新的陣列方法map來進行，當然我也會寫乙個普通版本給你們看喲。import react,from react export default class index extends compon...

實現乙個react系列一 JSX和虛擬DOM

本文主要參考了從零開始實現乙個react和從 0 到 1 實現react 工作中經常使用react，對於react中的一些虛擬dom 生命週期 元件等概念知其然，不知其所以然。雖然知道這些怎麼用的就足夠應付大部分的工作，但是作為乙個開發者，還是要有追求的。所以有了這個系列，一步一步實現乙個簡單的re...

如何在webpack中渲染乙個vue的元件

在webpack構建的專案中渲染乙個vue的元件有兩種方法 方法一 1，在main.js中進行以下匯入 import vue from node modules vue dist vue 2，在vm例項中註冊乙個元件 components 方法二 1，安裝vue loader vue templat...