【教程】Pastate.js 響應式 react 框架（二）多組件應用

這是 pastate 系列教程的第二章，歡迎關注，持續(xù)更新。

這一章，我們在上一章的 state 結構中添加多一些信息，并用多個組件來組織 pastate 應用。

更新 state 結構

我們把上一章的個人基本信息數(shù)據(jù)包裝為 state.basicInfo 屬性的對象，并向 state 中添加 address 屬性，保存?zhèn)€人地址信息：

const initState = {
    basicInfo: {
        name: 'Peter',
        isBoy: true,
        age: 10
    },
    address: {
        country: 'China',
        city: 'Guangzhou'
    }
}

由于 JavaScript 語言的限制，pastate 不能檢測到通過賦值來為對象添加新屬性，以自動把新屬性轉化為響應式節(jié)點。所以你應該在 initState 中把需要用到的 state 屬性都定義出來，把屬性值初始化為 null 或空數(shù)組都是可以的。下面是個錯誤的例子：

const initState = {
    basicInfo: ...,
    address: ...
}
const store = new Pastore(initState)
const state = store.state

state.hobby = 'coding'  // 錯誤，state.hobby 屬性不具有受 pastate 控制，不具有響應式特點

即使支持這種特性，它也會使開發(fā)者難以完全把握 state 的結構，導致應用難以開發(fā)和維護，所以我們應該在 initState 里對 state 的結構進行完整的定義。

分別開發(fā) basicInfo 和 address 的視圖組件

我們先使用一種簡單臨時的方式來構建子組件：

...
/** @type {initState} */
const state = store.state;

class BasicInfoView extends Component {
    render(){
        return (
            <div style={{padding: 10, margin: 10}}>
                <strong>Basic info:</strong><br/>
                My name is {state.basicInfo.name}.<br/>
                I am a {state.basicInfo.isBoy == true ? "boy" : "girl"}.<br/>
                I am {state.basicInfo.age} years old.<br/>
            </div>
        )
    }
}

class AddressView extends Component {
    render(){
        return (
            <div style={{padding: 10, margin: 10}}>
                <strong>Address:</strong><br/>
                My country is {state.address.country}.<br/>
                My city is {state.address.city}.<br/>
            </div>
        )
    }
}

可以看到，BasicInfoView 組件直接引用 store.state.basicInfo 的值，AddressView 組件直接引用 store.state.address 的值。接著修改原來的 AppView 父組件，把這兩個子組件嵌套進去，同時增加一個方法來修改 address.city 的值：

...
class AppView extends Component {
    increaseAge(){
        state.basicInfo.age += 1
    }
    decreaseAge(){
        state.basicInfo.age -= 1
    }
    changeCity(){
        state.address.city += '!'
    }
    render() {
        return (
            <div style={{padding: 10, margin: 10, display: "inline-block"}}>
                <BasicInfoView />
                <AddressView />
                <button onClick={this.decreaseAge}> decrease age </button> 
                <button onClick={this.increaseAge}> increase age </button> 
                <button onClick={this.changeCity}> change city </button>
            </div>
        )
    }
}
...
新的組件結構

完成！讓我們運行一下：

多組件應用

點擊按鈕，看起來一切正常！我們通過 Chrome 的 react dev tools 來觀察一下當 state 改變時，各個組件的渲染情況。打開瀏覽器的開發(fā)者工具，選擇 react 標簽，勾選上 Highlight Updates, 這時當組件重新渲染時，會被帶顏色的方框框起來。

Chrome 的 react dev tools

我們點擊頁面上 decrease age 按鈕試試，組件重新渲染的結果如下：

組件重新渲染情況

我們可以發(fā)現(xiàn)，當只有 state.basicInfo.age 更改時，AppView、BasicInfoView 和 AddressView 3個組件都會被重新渲染，即使 AddressView 所引用的數(shù)據(jù)沒有發(fā)生任何改變！這是 react 多組件渲染的通常情況，當應用組件簡單、嵌套層級不多時，我們不會感覺到這種模式會帶來什么明顯的影響；但是當應用組件的嵌套關系變得比較復雜的時候，會帶來性能隱患，我們需要來關注這個問題。

store.imState 與 store.state

先介紹一下 store 中的兩個不同的 state：store.imState 和 store.state ，你可以嘗試了解一下：

  • store.imState 是應用狀態(tài)的數(shù)據(jù)實體，它被 pastate 使用 immutable 的機制進行管理，當節(jié)點的內容更新時，該節(jié)點的所有祖先的“引用”都會被更新。imState 的每個節(jié)點值除了 null 或 undefined 外，都是包裝類型(String, Number, Boolean, Object, Array)。
  • store.state 是 store.imState 的 響應式影子, 可以對 store.state 任何節(jié)點進行直接賦值修改，pastate 會把修改結果作用到 store.imState，并異步觸發(fā)視圖更新。

或者簡化為以下兩點：

  • store.imState 用來渲染視圖
  • store.state 用來操作數(shù)據(jù)

這兩個概念對于沒有使用過 redux 和沒了解過 vue.js 原理的人來說可能有點難以理解。不過沒關系，不理解這兩個概念并不妨礙你使用 pastate，你可以在使用 pastate 的過程中完全感覺不到 imState 的存在。pastate 的理念就是封裝復雜概念，讓你可以用一種簡單的方式去實現(xiàn)復雜的功能。

如果你想要理解 pastate 的詳細原理，可以查看原理章節(jié)。

使用 props 接收 imState，實現(xiàn)組件的按需渲染

當一個 component 與 store 連接時，store 會把 imState 傳遞到 component 的 props
.state 中，因此我們可以在 AppView 組件的 props 中接收 state，同時把 AppView 組件的基類改為 react 純組件 PureComponent，這樣就開啟了組件按需渲染效果：

import React, { PureComponent } from 'react'; // 1. 改用 PureComponent 代替 Component
...
class AppView extends PureComponent { // 1. 改用 PureComponent
    ...
    render() {
        /** @type {initState} */
        let state = this.props.state; // 2. 從 props 接收 state
        return (
            <div style={{padding: 10, margin: 10, display: "inline-block"}}>

                {/**  3. 把 state 的子節(jié)點傳遞給對于的子組件 */}

                <BasicInfoView state={state.basicInfo}/>
                <AddressView state={state.address}/>
                ...
            </div>
        )
    }
}
...

注意上面代碼的第3點注釋，我們把 state 數(shù)據(jù)的子節(jié)點通過 props 傳遞給子組件：
<BasicInfoView state={state.basicInfo}/>。對于不直接與 store 直接連接的子組件，我們同樣也需要修改為從
props 獲取 state, 并把組件的基類改成 PureComponent：

class BasicInfoView extends PureComponent { // 1. 基類改為 PureComponent
    render(){
        let state = this.props.state; // 2. 從 props 接收 state
        return (
            <div style={{padding: 10, margin: 10}}>
                <strong>Basic info:</strong><br/>

                {/**  3. 這里的 state 是 basicInfo 對象 */}

                My name is {state.name}.<br/>
                I am a {state.isBoy == true ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
            </div>
        )
    }
}

class AddressView extends PureComponent { // 1. 基類改為 PureComponent
    render(){
        let state = this.props.state;  // 2. 從 props 接收 state
        return (
            <div style={{padding: 10, margin: 10}}>
                <strong>Address:</strong><br/>

                {/**  3. 這里的 state 是 address 對象 */}

                My country is {state.country}.<br/>
                My city is {state.city}.<br/>
            </div>
        )
    }
}

可以看到，分配到子組件的 props 中的 state 是 根state 的子節(jié)點。因此在 BasicInfoView 中的 this.props.state 是 basicInfo 對象, 而在 AddressView 中的 this.props.state 是 address 對象。

完成！我們來看看運行效果！

  • 點擊 decrease age 按鈕或 increase age 按鈕，我們看到的組件重新渲染情況是：
只渲染 state 更新的 BasicInfoView 子組件
  • 點擊 change city 按鈕，我們看到的組件重新渲染情況是：
只渲染 state 更新的 AddressView 子組件

Amazing！可以看到當我們點擊按鈕改變 state 節(jié)點時，只有引用被改變的 state 節(jié)點的組件才會進行重新渲染， 我們成功地實現(xiàn)了多組件按需渲染的效果！當應用具有大量不與 store 直接連接的子組件時，這種按需渲染的策略可以大幅提高應用的渲染性能。

使用 imState 渲染視圖的注意事項

從 props 中接收到的 state 的每個節(jié)點都是特殊的包裝類型 , 當需要在 if(...) 語句或 ... ? A : B 使用其布爾值結果時， 需要使用 == 進行顯式比較來獲取，如下

class BasicInfoView extends PureComponent {

    render() {
        /** @type {initState['basicInfo']} */
        let state = this.props.state;
        return (
            <div style={{ padding: 10, margin: 10 }}>

               {state.isBoy == true ? "boy" : "girl"}  {/* 正確 */}
               {state.isBoy ? "boy" : "girl"}  {/* 錯誤 */}

               {state.age != 0 ? "Not 0" : "0"}  {/* 正確 */}
               {state.age ? "Not 0" : "0"}  {/* 錯誤 */}

            </div>
        )
    }
}

了解 PureComponent

React 的 PureComponent 會在渲染前對新的 props / state 與老的 props / state 進行淺層比較( shallow comparison)，僅當發(fā)現(xiàn) props / state 發(fā)生改變時，才執(zhí)行重新渲染。淺層比較即是比較 props / state 的根級屬性值是否改變，如果屬性值是數(shù)組 / 對象類型，比較的結果使其引用是否相等:

console.log(["a"] == ["a"]) // 結果是 false

let a = ["a"]
console.log(a == a) // 結果是 true

console.log({a: "a"} == {a: "a"}) // 結果是 false

let a = {a: "a"} 
console.log(a == a) // 結果是 true

Pastate 符合 immutable data 規(guī)范的 state 數(shù)據(jù)，可以確保當某個 state 節(jié)點改變時，其祖先節(jié)點的引用都會進行更新，所以可以配合使用 PureComponent 實現(xiàn)高效的按需渲染。

按需渲染時需要對 state 的結構進行模塊化設計，如果把所有的屬性都放在 state 根節(jié)點上，就沒法實現(xiàn)按需渲染了：

// 注意：這樣的 state 設計無法實現(xiàn)子組件的按需渲染
initState = {
     name: 'Peter',
     isBoy: true,
     age: 10,
     country: 'China',
     city: 'Guangzhou'
}

當然，只有當應用的 state 比較復雜且對 state 的操作比較繁多時候，才會體現(xiàn)按需渲染對性能的提升；當應用比較簡單的時候，不一定要對 state 和視圖進行太詳細的劃分。

子組件 state 的 intelliSense

同樣，我們可以使用 jsDoc 注釋讓子組件中 state 的具有智能提示，如下：

class BasicInfoView extends PureComponent {
    render(){
        /** @type {initState['basicInfo']} */
        let state = this.props.state;
        ...
    }
}

class AddressView extends PureComponent {
    render(){
        /** @type {initState['address']} */
        let state = this.props.state;
        ...
    }
}

請使用 xxx['xxx'] 的格式指明對象的子節(jié)點：/** @type {initState['address']} */。在 vs code 里，暫時無法使用 xxx.xxx 的嵌套格式指定一個變量的類型。

子組件 state 的 intelliSense 的效果

單實例子組件

如果某組件只在視圖中出現(xiàn)一次，那么這種組件被稱為單實例組件。這種組件可以把對子組件設計的 state 操作函數(shù)簡單地封裝在子組件內部，提高組件的內聚性，便于維護管理。下面以 BasicInfoView 為例，把操作按鈕移入子組件，并把兩個操作函數(shù)移入子組件：

...
class BasicInfoView extends PureComponent {

    increaseAge(){
        state.basicInfo.age += 1
    }
    
    decreaseAge(){
        state.basicInfo.age -= 1
    }

    render(){
        /** @type {initState['basicInfo']} */
        let state = this.props.state;
        return (
            <div style={{padding: 10, margin: 10}}>
                ...
                <button onClick={this.decreaseAge}> decrease age </button> 
                <button onClick={this.increaseAge}> increase age </button> 
            </div>
        )
    }
}
...

同樣，你也可以對 AddressView 做類似的處理。

下一章, 我們將會介紹如何在 pastate 中渲染和操作 state 中的數(shù)組。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容