摘要：概述上一章只是稍微了解了一下和相關(guān)的簡單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現(xiàn)一個類似的吧。

上一章只是稍微了解了一下state和setState相關(guān)的簡單用法，這一章需要講一下組件的生命周期。

這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現(xiàn)一個類似的吧。大凡事物從出現(xiàn)到消亡都有個過程，而這個過程大抵可以分為：

出現(xiàn)->變化->消亡

而web開發(fā)中，組件也有類似的過程，當(dāng)然作為組件的創(chuàng)造者，我們可以干預(yù)這個過程，在每個過程加入自己的行為，也就是hook這個過程：

         (出現(xiàn)之前)->出現(xiàn)->（出現(xiàn)之后）
                     ↓
->(循環(huán))[（變化之前）->變化->(變化之后)]
                    ↓
->      （消亡之前）->消亡->（消亡之后）

這個就是生命周期了，轉(zhuǎn)化成組件：

（組件聲明->構(gòu)造組件->組件掛載之前）->組件掛載->(組件掛載之后)
                                   ↓
->          (循環(huán))[(組件更新之前)->組件更新->(組件更新之后)]
                                   ↓
->               （組件卸載之前）->組件卸載->（組件卸載之后）

上面(...)中的便是我們的hook，接下來我們來實現(xiàn)它

復(fù)制項目

$ cp 006-state 007-life-cycle

完成框架主文件-ReactLikeDom.js

$ cd 0x007-life-cycle/src
$ vim ReactLike.js
// ReactLikeDom.js 模擬 ReactDom
class ReactLikeDom {
    static render(component, container) {
    }
}
export default ReactLikeDom   

完成框架主文件-ReactLike.js

// ReactLike.js 用來模擬 React
class ReactLike {
    static createElement(type, props) {
    }
}

export default ReactLike

完成框架主文件-Component.js

// 用來模擬 React.Component
class Component {

}
export default Component

完成框架主文件-ReactLikeNode.js

// 用來模擬 React Element ，每一個組件都將會被抽象成一個 ReatLikeElement
class ReactLikeElement {
    constructor() {

    }

}

export default ReactLikeElement

當(dāng)前項目文件

+ 0x007-life-cycle
+ src
    - Component.js
    - index.html
    - index.js
    - ReactLike.js
    - ReactLikeDom.js
    - ReactLikeElement.js
- .babelrc
- package.json
- webpack.config.js

// index.js
import ReactLikeDom from "./ReactLikeDom";
import ReactLike from "./ReactLike";
import Component from "./Component";

// 聲明一個組件
class App extends Component {
    render() {
        return "hello " + this.props.name
    }
}
// 將組件掛載到容器中
ReactLikeDom.render(
    ReactLike.createElement(App, {name: "reactLike"}, null),
    document.getElementById("app")
)

打開瀏覽器查詢最終的效果：

這個類其實沒有太多需要做的，只是為了繼承而已，
而在React中每一個組件都必須有一個render方法，該方法返回一個React Element，
而這個方法實在具體的組件完成的，而不是在這里完成，所以我們這里聲明一下就好了

class Component {
    render() {
        
    }
}

export default Component

該類有一個方法：createElement，作用是將一個類組件轉(zhuǎn)化成ReactLikeElement

import ReactLikeElement from "./ReactLikeElement";

class ReactLike {
    static createElement(type, props) {
        // 直接創(chuàng)建一個 ReactLikeElement 并返回, 具體的實現(xiàn)由 ReactLikeElement 自己完成
        return new ReactLikeElement(type, props)
    }
}

export default ReactLike

該類的所有事物都在構(gòu)造器中完成

class ReactLikeElement {
    constructor(type, props) {
        // 實例化組件
        let component = new type(props)
        // 將 props 賦予 該組件實例
        component.props = props
        // 將該組件的真實 dom 保存在 ref 中
        this.ref = component.render()
    }

}

export default ReactLikeElement

// index.js
class App extends Component {
    render() {
        let div = document.createElement("div")
        div.append("hello " + this.props.name)

        return div
    }
}

該組件返回一個div，div中包含一個字符串，該字符串的構(gòu)成是hello 和這個組件的props中的name構(gòu)成，我們期望外部傳入一個name屬性。

可以使用該自定義組件測試一下ReactLikeElement，看看一個組件究竟會被轉(zhuǎn)化成什么樣：

console.log(new ReactLikeElement(App, {name: "reactLike"}))

查看瀏覽器

class ReactLikeDom {
    static render(reactLikeElement, container) {
        container.append(reactLikeElement.ref)
    }

}

export default ReactLikeDom

ReactLikeDom.render接受一個元素和一個容器，組件是ReactLikeElement，容器是dom，這個方法會將組件掛載到容器上。
這個時候整個流程就已經(jīng)完成了，查看瀏覽器

我們梳理一下整個流程:

// index.js
class App extends Component {
    // 該方法返回一個`dom`，構(gòu)建這個`dom`用到了`props`中的屬性`name`
    render() {
        let div = document.createElement("div")
        div.append("hello " + this.props.name)

        return div
    }
}

/*
 * ReactLikeDom.render 可以將一個`ReactLikeElement`掛載到容器上
 * 而 ReactLike.createElement 正好可以創(chuàng)建一個`ReactLikeElement`
 * 在 ReactLike.createElement 中會構(gòu)造一個 App 實例
 * 然后將 props 傳遞給該 App 實例
 * 然后調(diào)用 App.render
 * 這時候 render 中便可以訪問 props 中的屬性了
 * 接著將 App.render 返回的 dom 保存在 ref 變量中
 * ReactLikeDom.render 其實是把 ref 中的 dom 掛載到 容器上
 */

ReactLikeDom.render(
    ReactLike.createElement(App, {name: "react"}, null),
    document.getElementById("app")
)

在Component中添加兩個方法，代表其中兩個生命周期

class Component {
    componentWillMount() {

    }

    componentDidMount() {

    }


    render() {

    }
}

export default Component

然后在App組件中實現(xiàn)它：

class App extends Component {
    componentDidMount() {
        console.log("componentDidMount")
    }

    componentWillMount() {
        console.log("componentWillMount")
    }

    render() {
        let div = document.createElement("div")
        div.append("hello " + this.props.name)

        return div
    }
}

接著讓他起作用：

// ReactLikeDom.js
class ReactLikeDom {
    static render(reactLikeElement, container) {
        reactLikeElement.componentWillMount()
        container.append(reactLikeElement.ref)
        reactLikeElement.componentDidMount()
    }

}

export default ReactLikeDom

// ReactLikeElement
class ReactLikeElement {
    constructor(type, props) {
        let component = new type(props)
        component.props = props
        this.ref = component.render()
        this.component = component // 新添加一個屬性
    }

}

export default ReactLikeElement

查看瀏覽器

我們已經(jīng)實現(xiàn)了其中兩個生命周期，其他的聲明周期也是如此類似的實現(xiàn)，只是插入的位置和時期不同而已，也造成在每個階段我們所能訪問的資源也不同。

react

transform-react-jsx

源碼