摘要：這一周連續(xù)發(fā)表了兩篇關(guān)于的文章組件復(fù)用那些事兒實(shí)現(xiàn)按需加載輪子應(yīng)用設(shè)計(jì)之道化妙用其中涉及到組件復(fù)用輪子設(shè)計(jì)相關(guān)話題，并配合相關(guān)場(chǎng)景實(shí)例進(jìn)行了分析。

這一周連續(xù)發(fā)表了兩篇關(guān)于 React 的文章：

組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

React 應(yīng)用設(shè)計(jì)之道 - curry 化妙用

其中涉及到 React 組件復(fù)用、輪子設(shè)計(jì)相關(guān)話題，并配合相關(guān)場(chǎng)景實(shí)例進(jìn)行了分析。這些內(nèi)容都算是 React 設(shè)計(jì)模式，一提到 Design Patterns，讀者大可不必恐懼，事實(shí)上這都是 React 開(kāi)發(fā)應(yīng)用靈活性的體現(xiàn)。今天這篇文章，我們繼續(xù)通過(guò)一個(gè)場(chǎng)景，循序漸進(jìn)，通過(guò)一步步優(yōu)化設(shè)計(jì)來(lái)進(jìn)行加深理解。

屏幕左側(cè)大面積展現(xiàn)區(qū)塊內(nèi)容，點(diǎn)擊 continue 按鈕，切換為下條內(nèi)容信息；右側(cè)是一個(gè)導(dǎo)航條，指示當(dāng)前區(qū)塊展示信息條目。

如果看 Gif 圖不過(guò)癮，可以到 CodeSandbox 進(jìn)行在線了解。

具體代碼結(jié)構(gòu)為：

class App extends Component {
  render() {
    return (
        
    );
  }
}

Stepper 組件 "stage" prop 表示默認(rèn)開(kāi)始第幾個(gè)區(qū)塊，同時(shí)具用同名 "stage" 狀態(tài)。stage 在這里表示左側(cè)一個(gè)個(gè)內(nèi)容區(qū)塊。
handleClick 方法對(duì) this.stata.stage 進(jìn)行切換。

class Stepper extends Component {
  state = {
    stage: this.props.stage
  }
  static defaultProps = {
    stage: 1
  }
  handleClick = () => {
    this.setState({ stage: this.state.stage + 1 })
  }
  render() {
    const { stage } = this.state;
    return (
      

            
            
      
    );
  }
}

我們看到，Stepper 組件包含 Progress 組件（左側(cè)導(dǎo)航）以及 Steps 組件。
這樣的代碼運(yùn)行良好，但是在復(fù)用性和靈活性上有一些問(wèn)題。比如：

如果我們需要切換 Progress 和 Steps 組件（左右）展示順序怎么辦？

如果我們的 Stepper 需要承載更多的 stages 怎么辦？

如果我們需要更改某個(gè) stage 內(nèi)容怎么辦？

如果我們想要切換 stages 順序該怎么辦？

現(xiàn)有代碼基礎(chǔ)上，這些問(wèn)題都可以解決。但是需要重新更改組件編寫(xiě)內(nèi)容。如果某天又新增或者調(diào)整了需求，組件內(nèi)容同樣又需要改寫(xiě)。

接下來(lái)，我們用另一種方式實(shí)現(xiàn)需求，使得代碼更加靈活，復(fù)用性更強(qiáng)。

仔細(xì)觀察 Stepper 組件：它包含了當(dāng)前區(qū)塊 stage，以及一個(gè)更改 stage 的方法，渲染了兩個(gè)子組件。

我們使用 Function as Child Component 手段，將 Stepper 組件重構(gòu)。（如果對(duì) Function as Child Component 不熟悉，請(qǐng)參考我之前文章 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子）

如下圖：

Progress 和 Steps 組件不再直接出現(xiàn)在 Stepper 組件的 render 方法中。我們使用 this.props.children 對(duì) Stepper 組件的所有子組件進(jìn)行渲染。這樣 Stepper 組件渲染的內(nèi)容更加靈活。

但是僅僅這樣的修改是不可能完成需求的，當(dāng)用戶點(diǎn)擊 continue 按鈕，stage 并不會(huì)進(jìn)行切換。因?yàn)?Progress 和 Steps 組件無(wú)法再通過(guò) props 感知 stage 和 handleClick 方法。

為了解決這個(gè)問(wèn)題，我們可以手動(dòng)遍歷 Stepper 組件的子節(jié)點(diǎn)，并對(duì)相應(yīng) props 一一注入。如下代碼：

const children = React.Children.map(this.props.children, child => {
        return React.cloneElement(child, {stage, handleClick: this.handleClick})
    })

借助 React.Children.map 進(jìn)行子節(jié)點(diǎn)遍歷，并通過(guò) React.cloneElement 方法對(duì)子組件進(jìn)行拷貝，這個(gè)方法通過(guò)第二個(gè)參數(shù)，具有添加額外 props 的能力。Stepper 組件的 render 方法只需要具體應(yīng)用：

const { stage } = this.state;
const children = React.Children.map(this.props.children, child => {
    return React.cloneElement(child, {stage, handleClick: this.handleClick})
})
return (
    

        {children}
    
    );

這樣一來(lái)，應(yīng)用又一次正確運(yùn)轉(zhuǎn)！

class App extends Component {
  render() {
    return (
      

        
          
          
        
      
    );
  }
}

同樣的手段，我們也可以應(yīng)用到 Progress 組件當(dāng)中。這里不再一一展開(kāi)。

值得一提的是，我們可以使用 Static Properties 增強(qiáng)代碼的可讀性。Static Properties 允許我們?cè)?class 當(dāng)中直接對(duì)方法進(jìn)行調(diào)用。首先，我們?cè)?Stepper 組件中創(chuàng)建兩個(gè) static 方法，并賦值給 Progress 組件和 Steps 組件：

static Progress = Progress;
static Steps = Steps

現(xiàn)在，在 App.js 中我們可以直接：

import React, { Component } from "react";
import Stepper from "./Stepper"

class App extends Component {
  render() {
    return (
      
        
        
      
    );
  }
}
export default App;

這樣的好處體現(xiàn)在不用一次次地 import 進(jìn)來(lái) Progress 組件和 Steps 組件，它們都將作為 Stepper 的靜態(tài)屬性出現(xiàn)。我個(gè)人并不是很喜歡這種做法。

我們使用 React Transition Group 對(duì) Steps 組件內(nèi)容添加過(guò)渡動(dòng)畫(huà)。只有當(dāng) props.num 與 this.props.stage 相等時(shí)，區(qū)塊內(nèi)容設(shè)置為可見(jiàn)：

class Steps extends Component {
    render() {
        const {stage,handleClick} = this.props
        const children = React.Children.map(this.props.children, child => {
            console.log(child.props)
            return (
                stage === child.props.num &&
                
                    {child}
                
            )
        })
        return (
            

                

                    
                        {children}
                    
                
                

                    Continue
                
            
        );
    }
}

我們也可以給 Steps 組件添加任意個(gè)內(nèi)容：

import Stepper from "./Stepper"

class App extends Component {
  render() {
    return (
        
          
            
            
            
          
          
            
            
            
            
          
        
    );
  }
}

重新設(shè)計(jì)之后，整個(gè)應(yīng)用變得更加靈活，復(fù)用性更強(qiáng)。我們可以指定任意個(gè) stages，每一個(gè) stage 文本內(nèi)容也可以自定義設(shè)置，同樣 stages 排列順序等都可以隨意搭配。

重構(gòu)代碼以及效果可以訪問(wèn)這里查看。

如果你覺(jué)得上述代碼完美無(wú)懈可擊，那顯然想簡(jiǎn)單了。需求是變化多端的，如果我們想在 Steps 區(qū)塊上，加一個(gè)大標(biāo)題呢？

class App extends Component {
  render() {
    return (
        
          
            
            
            
          
          

            
Title
            
              
              
              
              
            
          
        
    );
  }
}

如圖，

這樣一來(lái)，Stepper.Steps 組件再也不是 Stepper 組件的直接唯一子節(jié)點(diǎn)了，那預(yù)期之中的 props 自然又一次無(wú)法取得！

問(wèn)題也不僅僅于此。筆者本人不是很喜歡類似 React.cloneElement 頂層 API，除了偏好以外，也有一個(gè)難以規(guī)避的問(wèn)題：在使用 React.cloneElement 擴(kuò)充 props 時(shí)，如果出現(xiàn) props 命名沖突怎么辦？

比如一個(gè) 遇見(jiàn)了命名為 value 的 prop，后果可想而知。

那么問(wèn)題來(lái)了，是否有更優(yōu)雅高效的方法解決上述問(wèn)題？或者，是否有更好的方式，實(shí)現(xiàn)更靈活的設(shè)計(jì)？

答案一定是有的，我將會(huì)留在下一篇文章進(jìn)行講解。

本文源于：How To Master Advanced React Design Patterns，部分內(nèi)容有改動(dòng)。

廣告時(shí)間：
如果你對(duì)前端發(fā)展，尤其對(duì) React 技術(shù)棧感興趣：我的新書(shū)中，也許有你想看到的內(nèi)容。關(guān)注作者 Lucas HC，新書(shū)出版將會(huì)有送書(shū)活動(dòng)。

Happy Coding!

PS: 作者?Github倉(cāng)庫(kù)?和?知乎問(wèn)答鏈接?歡迎各種形式交流！

我的其他幾篇關(guān)于React技術(shù)棧的文章：

從setState promise化的探討 體會(huì)React團(tuán)隊(duì)設(shè)計(jì)思想

React 應(yīng)用設(shè)計(jì)之道 - curry 化妙用

組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

通過(guò)實(shí)例，學(xué)習(xí)編寫(xiě) React 組件的“最佳實(shí)踐”

React 組件設(shè)計(jì)和分解思考

從 React 綁定 this，看 JS 語(yǔ)言發(fā)展和框架設(shè)計(jì)

做出Uber移動(dòng)網(wǎng)頁(yè)版還不夠 極致性能打造才見(jiàn)真章**

React+Redux打造“NEWS EARLY”單頁(yè)應(yīng)用 一個(gè)項(xiàng)目理解最前沿技術(shù)棧真諦