摘要:系列系列簡單模擬語法一系列合成事件與二系列算法實現分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六前言我們先不講什么語法原理先根據效果強行模擬語法使用實現一個簡易版的第一步我們先用類
React系列
React系列 --- 簡單模擬語法(一)
React系列 --- Jsx, 合成事件與Refs(二)
React系列 --- virtualdom diff算法實現分析(三)
React系列 --- 從Mixin到HOC再到HOOKS(四)
React系列 --- createElement, ReactElement與Component部分源碼解析(五)
React系列 --- 從使用React了解Css的各種使用方案(六)
我們先不講什么語法原理,先根據API效果強行模擬語法使用,實現一個簡易版的React.
render第一步我們先用類創建一個元素返回,并且綁定點擊事件,代碼如下,可以正常看到一個按鈕出現了.
class AddButton { createDOM(domString) { const div = document.createElement("div"); div.innerHTML = domString; return div; } render() { this.dom = this.createDOM(``); this.dom.addEventListener("click", () => console.log("click"), false); return this.dom; } } document.body.appendChild(new AddButton().render());state && setState
實現類狀態和修改狀態方法
class AddButton { constructor() { this.state = { num: 0 }; } createDOM(domString) { const div = document.createElement("div"); div.innerHTML = domString; return div; } setState(state) { this.state = state; this.dom = this.render(); } handleAdd() { const num = this.state.num + 1; this.setState({ num: num }); } render() { this.dom = this.createDOM(``); this.dom.addEventListener("click", () => this.handleAdd(), false); console.log(this.dom); return this.dom; } } document.body.appendChild(new AddButton().render());
渲染之后看到this dom輸出已經發現改變了,但是視圖并沒有渲染,那是因為這是結尾一次性插入,下面就渲染視圖這塊往下走
重新渲染我們現在把插入數據的操作內置到class里面,新增一個方法插入新元素移除舊元素.
class AddButton { constructor() { this.state = { num: 0 }; } createDOM(domString) { const div = document.createElement("div"); div.innerHTML = domString; return div; } changeDom() { const oDom = this.dom; this.dom = this.render(); document.body.insertBefore(this.dom, oDom); document.body.removeChild(oDom); } setState(state) { this.state = state; this.changeDom(); } handleAdd() { const num = this.state.num + 1; this.setState({ num: num }); } render() { this.dom = this.createDOM(``); this.dom.addEventListener("click", () => this.handleAdd(), false); return this.dom; } } document.body.appendChild(new AddButton().render());
現在效果雖然實現,但是還是得開頭手動把元素插入視圖
抽取公用類我們先將一些共有方法提取到一個多帶帶類
class Component { constructor() {} createDOM(domString) { const div = document.createElement("div"); div.innerHTML = domString; return div; } changeDom() { const oDom = this.dom; this.dom = this._render(); this.wrapper.insertBefore(this.dom, oDom); this.wrapper.removeChild(oDom); } setState(state) { this.state = state; this.changeDom(); } _render(wrapper) { if (wrapper) this.wrapper = wrapper; this.dom = this.createDOM(this.render()); this.dom.addEventListener("click", () => this.handleAdd(), false); return this.dom; } }
然后組件只需要直接繼承Component然后處理自己邏輯即可
class AddButton extends Component { constructor() { super(); this.state = { num: 0 }; } handleAdd() { const num = this.state.num + 1; this.setState({ num: num }); } render() { return ``; } }
還有一個問題是點擊事件暫時還是耦合進Component里面,先略過不提.
ReactDom.render大家都知道React會提供這么一個方法將組件插入一個指定元素,我們直接模擬
const ReactDom = { render(component, wrapper) { wrapper.appendChild(component._render(wrapper)); } }; ReactDom.render(new AddButton(), document.getElementById("root"));Props
還有一個重要的傳輸數據實現如下
const ReactDom = { render(component, wrapper) { wrapper.appendChild(component._render(wrapper)) } } class Component { constructor(props = {}) { this.props = props } createDOM(domString) { const div = document.createElement("div") div.innerHTML = domString return div } changeDom() { const oDom = this.dom this.dom = this._render() this.wrapper.insertBefore(this.dom, oDom) this.wrapper.removeChild(oDom) } setState(state) { this.state = state this.changeDom() } _render(wrapper) { if (wrapper) this.wrapper = wrapper this.dom = this.createDOM(this.render()) this.dom.addEventListener("click", () => this.handleAdd(), false) return this.dom } } class AddButton extends Component { constructor(props) { super(props) this.state = { num: 0 } } handleAdd() { const num = this.state.num + 1 this.setState({ num: num }) } render() { console.log(this.props) return `` } } ReactDom.render(new AddButton({a:1}), document.getElementById("root"))
至此,拋開實際思路不說,我們已經簡單模擬出來React的一般語法實現了.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106484.html
摘要:系列系列簡單模擬語法一系列合成事件與二系列算法實現分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六的誕生他是的一種擴展語法。這個函數接受組件的實例或元素作為參數,以存儲它們并使它們能被其他地方訪問。 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)React系列 --- virtualdom di...
摘要:當然這不是只限于使用或者其他打包工具的方式都能支持使用優點模塊化和可重用性沒有沖突顯性依賴不會污染全局可以配合預處理器使用少開發單獨文件寫法基本一致 To define is to limit. 定義一樣東西,就意味著限制了它。——王爾德 《道林·格雷的畫像》 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...
摘要:然鵝在過去的兩個月里,對的理解發生了一波三折的變化。發布自版本發布之后,一直致力于提升版本迭代速度,盡可能地通過小的更新來修復存在的問題。 推薦 1. 深入淺出 React 高階組件 https://zhuanlan.zhihu.com/p/... 由高階函數引申高階組件,高階組件是接受 React 組件作為輸入,輸出一個新的 React 組件的組件,本文介紹了在 React 工程中如...
閱讀 870·2021-09-02 09:55
閱讀 1495·2019-12-27 12:02
閱讀 1683·2019-08-30 14:24
閱讀 1138·2019-08-30 14:18
閱讀 2750·2019-08-29 13:57
閱讀 2193·2019-08-26 11:51
閱讀 1364·2019-08-26 10:37
閱讀 762·2019-08-23 16:09