1. 對元件化的理解
首先談，元件封裝：封裝資料、檢視、變化邏輯；
其次說，元件復用：通過props傳值
2. jsx的本質
第一，jsx的語法。它以html標籤的形式存在，引入js變數和表示式，if語法，for迴圈，style樣式和classname，並且支援事件
第二，jsx語法根本無法被瀏覽器解析，開發環境會把jsx語法解析成js物件
第三，通過react.createelement方法把jsx語法解析成js**。方法引數接收（標籤名，屬性，子元素）。如何解析的？
解析前：
// render函式
render()
複製**
// 解析後
function render() , item)
}))}
複製**
關於為什麼要用vdom？jsx模板需要解析成html，資料驅動檢視
其中react.createelement()和h()函式都生成vnode【見上個問題】 第一次渲染是在reactdom.render(,document.getelementbyid(『root』))的時候，通過dispatch(container,vnode)把vnode渲染在容器上。
// 第一次 dispatch(container,vnode)
複製**
addtodo(title) )
}複製**
對於自定義的元件，則生成自定義元件的例項，通過例項的render函式再次生成新的vnode，依次的迴圈迭代下去，直到變成最底層我們平常使用的標籤。
帶自定義元件的render：
// render函式
render()
複製**
// 解析後
function render() )
// list是自定義元件,一般是先初始化list元件的例項，然後呼叫例項的render函式生成vnode,依次迴圈，知道沒有自定義元件
// var list = new list()
// var vnode = list.render()
)}複製**
首先，setstate是非同步的，為了避免多次修改引發dom的re-render。
其次，每個元件都繼承了頂層react.component元件中的rendercomponent方法，重新執行例項的render
最後，根據render返回的newvnode和prevnode進行對比，通過dispatch函式新的節點替代舊的節點
5.最後關於react和vue的區別
React 元件化程式設計
父元件與子元件進行互動 我們可以在父元件中設定 state，並通過在子元件上使用 props 將其傳遞到子元件上。在 render 函式中,我們設定 name 和 site 來獲取父元件傳遞過來的資料。父元件的state 狀態 作為props引數 子元件的props 屬性 子元件根據props設定自...
react元件化todolist例項
首先建立react的腳手架 具體建立步驟自己查 首先建立乙個todelist 在src下建立乙個components資料夾 裡面建立乙個todo的資料夾 todo裡面建立乙個index.js檔案這裡是父元件 在裡面寫 此處只是做乙個小例子演示下react的元件化 元件化的理解 1.元件的封裝 檢視 ...
React實戰 css元件化
2 全域性樣式 3 元件內樣式 npm install styled components dimport from styled components export const 自定義標籤名 createglobalstyle 全域性樣式 import from render import sty...