從0開始構(gòu)建toy react (1)

為了更好地理解react的工作原理我們從0開始構(gòu)建一個(gè)玩具react

當(dāng)然我們從這次構(gòu)建中可以學(xué)到

react基本組件原理
學(xué)習(xí)vdom的實(shí)現(xiàn)思路
突破編寫自我的難點(diǎn)代碼

創(chuàng)建webpack

首先我們創(chuàng)建package.json

npm init

接下來我們創(chuàng)建webpack

npm install webpack --save-dev

創(chuàng)建好后新建webpack.config.js
添加entry 開發(fā)者模式以及不壓縮代碼

module.exports = {
    entry: './main.js',
    mode: 'development',
    optimization: {
        minimize: false
    }
};

接下來我們創(chuàng)建main.js然后隨便寫點(diǎn)代碼

console.log(2)

當(dāng)然你不想一次一次使用webpack我們也可以使用webpack dev server

npm install webpack-dev-server --save-dev

如果啟動(dòng)報(bào)錯(cuò)的的話說明沒有webpack-cli

npm install webpack-cli --save-dev

接下來我們修改package.json

"start": "webpack-dev-server --open"

添加devserver進(jìn)webpack.config.json

var path = require('path');
module.exports = {
    entry: './main.js',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
    }, //  
    mode: 'development',
    optimization: {
        minimize: false
    }
};

我們先在控制臺(tái)run webpack 這樣會(huì)自動(dòng)生成dist folder
看下是不是已經(jīng)生成main.js 然后創(chuàng)建index.html 引入dist目錄下的main.js

<!-- index.html -->
<script src="main.js"></script>

接下來我們用命令跑起來

npm start

image.png

此時(shí)我們的目錄結(jié)構(gòu)為

image.png

安裝配置需要的loader

在我們webpack中我們需要用到的就是lodaer

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換目代。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件笙纤。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”硼补，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript生巡，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL载佳。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

傳送門

首先我們需要babel-loader

加載 ES2015+ 代碼疟赊，然后使用 Babel 轉(zhuǎn)譯為 ES5

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-react-js

接下來添加webpack.config

    module: {
        rules: [
            { 
                test: /\.js$/, 
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [[
                            "@babel/plugin-transform-react-jsx", // 使用JSX
                            {pragma:"ToyReact.createElement"} //不加就是React.createElement
                        ]]
                    }
                }
            }
        ]
    },

接下來我們測(cè)試下看是否ES6變?yōu)榱薊S5
修改main.js

console.log(2)

for (let i of [1,2,3]) {
    console.log(i)
}

打開dev tool 果然變成了ES5語法

image.png

編寫JSX

新建Toyreact.js file

export let ToyReact = {
    createElement() {
        console.log(arguments)
    }
}

然后在main.js引入

import {ToyReact} from './Toyreact'
let a = <div name="a">
    <span></span>
    <span></span>
    <span></span>
</div>

注意Toyreact.js中的ToyReact和createElement必須對(duì)應(yīng)webpack的pragma

此時(shí)我們看dev tool 發(fā)現(xiàn)是先create里面元素再是外面元素

image.png

通過查看我們可以發(fā)現(xiàn)里面的參數(shù)分別為type,attr和children 但是第三個(gè)參數(shù)不確定

所以我們修改Toyreact.js并傳入?yún)?shù)然后創(chuàng)建DOM

export let ToyReact = {
    createElement(type,attr,...children) {
        console.log(type,attr,children)
        let ele = document.createElement(type) // 創(chuàng)建DOM
        for (let name in attr) {
            console.log(name)
            ele.setAttribute(name, attr[name]) // 設(shè)置屬性
        }
        for (let child of children){
            console.log(child)
            ele.appendChild(child) // 將Children append進(jìn)去
        }
        return ele;
    }
}

此時(shí)我們打印main.js的a

image.png

但是我們?nèi)绻趍ain函數(shù)中添加值得話就會(huì)報(bào)錯(cuò)
例如

import {ToyReact} from './Toyreact'
let a = <div name="a">
    <span>hello</span>
    <span>1</span>
    <span>2</span>
</div>

console.log(a)

所以此時(shí)我們要在Toyreact.js中加一句判斷

if( typeof child === 'string') child = document.createTextNode(child)

export let ToyReact = {
    createElement(type,attr,...children) {
        console.log(type,attr,children)
        let ele = document.createElement(type) // 創(chuàng)建DOM
        for (let name in attr) {
            console.log(name)
            ele.setAttribute(name, attr[name]) // 設(shè)置屬性
        }
        for (let child of children){
            if( typeof child === 'string') child = document.createTextNode(child) // 轉(zhuǎn)換成文本節(jié)點(diǎn)
            ele.appendChild(child) // 將Children append進(jìn)去
        }
        return ele;
    }
}

渲染

一般在react中我們都是渲染采用render所以我們?cè)赥oyreact.js中加入render方法

class EleWrapper {
    constructor(type) {
        this.root = document.createElement(type)
    }
    setAttribute(name, value) {
        this.root.setAttribute(name, value)
    }
    appendChild(vchild){
        vchild.mountTo(this.root)
    }
    mountTo(parent) {
        parent.appendChild(this.root)
    }
}

export class Component {
    mountTo(parent){
        let vdom = this.render()
        vdom.mountTo(parent)
    }
    setAttribute(name, value) {
        this[name] = value;
    }
}
class TextWrapper {
    constructor(content) {
        this.root = document.createTextNode(content)
    }
    mountTo(parent) {
        parent.appendChild(this.root)
    }
}
export let ToyReact = {
    createElement(type,attr,...children) {
        let ele;
        if( typeof type === 'string') 
            ele = new EleWrapper(type) // 創(chuàng)建DOM
        else 
            ele= new type;
        for (let name in attr) {
            console.log(name)
            ele.setAttribute(name, attr[name]) // 設(shè)置屬性
        }
        for (let child of children){
            if( typeof child === 'string') 
                child = new TextWrapper(child) // 轉(zhuǎn)換成文本節(jié)點(diǎn)
            ele.appendChild(child) // 將Children append進(jìn)去
        }
        return ele;
    },
    render(vdom, ele){
        vdom.mountTo(ele)
    }
}

然后我們修改main.js

import {ToyReact, Component} from './Toyreact'
class MyCom extends Component{
    render() {
        return <span>1</span>
    }
}
let a = <MyCom name="a">
</MyCom>
ToyReact.render(
    a, 
    document.body
)

但是你會(huì)發(fā)現(xiàn)當(dāng)MyCom組件中有子元素時(shí)依然有問題, 我們繼續(xù)修改

class EleWrapper {
    constructor(type) {
        this.root = document.createElement(type)
    }
    setAttribute(name, value) {
        this.root.setAttribute(name, value)
    }
    appendChild(vchild){
        vchild.mountTo(this.root)
    }
    mountTo(parent) {
        parent.appendChild(this.root)
    }
}

export class Component {
    constructor(){
        this.children = []
    }
    mountTo(parent){
        let vdom = this.render()
        vdom.mountTo(parent)
    }
    setAttribute(name, value) {
        this[name] = value;
    }
    appendChild(vchild){
        this.children.push(vchild)
    }
}
class TextWrapper {
    constructor(content) {
        this.root = document.createTextNode(content)
    }
    mountTo(parent) {
        parent.appendChild(this.root)
    }
    
}
export let ToyReact = {
    createElement(type,attr,...children) {
        let ele;
        if( typeof type === 'string') 
            ele = new EleWrapper(type) // 創(chuàng)建DOM
        else 
            ele= new type;
        for (let name in attr) {
            console.log(name)
            ele.setAttribute(name, attr[name]) // 設(shè)置屬性
        }
        let insertChildren = (children) => {
            for (let child of children){
                if(typeof child === 'object' && child instanceof Array) {
                    insertChildren(child)
                } else {
                    if(!(child instanceof Component) && !(child instanceof EleWrapper) && !(child instanceof TextWrapper))
                        child = String(child)
                    if( typeof child === 'string') 
                        child = new TextWrapper(child) // 轉(zhuǎn)換成文本節(jié)點(diǎn)
                    ele.appendChild(child) // 將Children append進(jìn)去
                }
            }
        }
        insertChildren(children)
        return ele;
    },
    render(vdom, ele){
        vdom.mountTo(ele)
    }
}

main.js

import {ToyReact, Component} from './Toyreact'
class MyCom extends Component{
    render() {
    return <span>1<span>{this.children}</span></span>
    }
}
let a = <MyCom name="a">
    <span>hello</span>
    <span>1</span>
    <span>2</span>
</MyCom>
ToyReact.render(a, document.body)
console.log(a)