成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Render props、render callback 和高階組件皆可互換

姘擱『 / 2267人閱讀

摘要：現(xiàn)在來(lái)看看怎么使用高階組件來(lái)達(dá)到同樣的目的。在這個(gè)新的組件里包含了加強(qiáng)的和等內(nèi)容。有時(shí)會(huì)遇到一個(gè)提供了的庫(kù)，但是你喜歡的是高階組件。我們來(lái)根據(jù)上面的例子來(lái)加一些方法可以讓高階組件和模式可以互相轉(zhuǎn)換。總結(jié)，回調(diào)繪制和高階組件都是可以互換的。

讓 render-xxx 模式都可以互換。

基礎(chǔ)

所有上面提到的三種模式都是為了處理 mixin 要處理的問(wèn)題的。在我們繼續(xù)之前，我們來(lái)看一些例子。

如果你已經(jīng)掌握這兩個(gè)概念，可以直接跳過(guò)這一節(jié)看后面的內(nèi)容

Render Prop

首先，我們來(lái)寫一個(gè)組件來(lái)記錄 count，并繪制 render prop 里的繪制都在 render 方法里調(diào)用了。

class CounterComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  update = type => {
    if (type === "Inc") {
      this.setState(({ count }) => ({ count: count + 1 }));
    } else if (type === "Dec") {
      this.setState(({ count }) => ({ count: count - 1 }));
    }
  };

  render() {
    return this.props.render({
      ...this.state,
      ...this.props,
      update: this.update
    });
  }
}

注意：callback 屬性也可以叫個(gè)別的名字，不一定就是 render。只不過(guò)這個(gè)模式叫做 render prop。

接下來(lái)我們需要一個(gè)組件來(lái)把需要的內(nèi)容繪制到屏幕上：

const Counter = ({ count, update }) => {
  

    
    {count}
    
  
;
};

Counter組件接受 count 值和一個(gè) update 方法，然后顯示一個(gè)增加、一個(gè)減少按鈕以及當(dāng)前的 count 值。

最后我們可以用CounterComponent組件來(lái)給Counter增加一些其他的功能：

render(
   >} />,
  document.getElementById("root")
);
高階組件

上文講解了 render prop 模式?，F(xiàn)在來(lái)看看怎么使用高階組件來(lái)達(dá)到同樣的目的。

const withCounter = Component =>
  class Hoc extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }

    update = type => {
      if (type === "Inc") {
        this.setState(({ count }) => ({ count: count + 1 }));
      } else if (type === "Dec") {
        this.setState(({ count }) => ({ count: count - 1 }));
      }
    };

    render() {
      return 
    }
  };

看上面的例子，我們可以要把需要繪制的組件放到另外一個(gè)全新的組件里面去。在這個(gè)新的組件里包含了加強(qiáng)的 state 和 props 等內(nèi)容。

const CounterExample = withCounter(Counter);
render(, document.getElementById("root"));

目前我們已經(jīng)覆蓋了基本的概念。我們可以使用不同的模式來(lái)達(dá)到相同的目的。下面我們來(lái)關(guān)注一下如何讓這幾個(gè)模式達(dá)到互換的目的。

在 render props 和高階組件之間轉(zhuǎn)換

有的時(shí)候你用的庫(kù)提供了一個(gè)高級(jí)組件，但是你最喜歡的是通過(guò)JSX的方式來(lái)使用組件。有時(shí)會(huì)遇到一個(gè)提供了 render props 的庫(kù)，但是你喜歡的是高階組件。一個(gè)很有趣的事實(shí)是這些模式可以幻想轉(zhuǎn)換。

我們來(lái)根據(jù)上面的例子來(lái)加一些方法可以讓高階組件和 render props 模式可以互相轉(zhuǎn)換。

fromHoc: HOC -> RenderProp
toHoc: RenderProp -> HOC

toHoc方法可以歸結(jié)為：

toHoc: Render => Comp => props => (
   } />
);

你也可以看使用 Render Props來(lái)作為替代實(shí)現(xiàn)。

它會(huì)把一個(gè) render prop 模式轉(zhuǎn)化為高階組件。

const withCounter = toHoc(CounterComponent);
const CounterExample = withCounter(Counter);

從高階組件轉(zhuǎn)化為 render prop 有一點(diǎn)麻煩。我們需要把一個(gè) render prop 的組件傳入到高階組件里。多虧了 Brent Jackon 的這篇文章。

fromHoc: hoc => {
  class Render extends React.Component {
    render() {
      return this.props.children(this.props);
    }
  }

  return hoc(Render);
};

或者，使用兩外一種不用 class 的方式。這次要感謝 Rodrigo Pombo 的這個(gè)例子。

fromHoc: hoc => hoc(props => props.render(props));

我們可以寫一個(gè)輕量的 helper 方法來(lái)實(shí)現(xiàn)高階組件和 renderprops 的轉(zhuǎn)化。注意，我們也可以在初始化 toHoc 方法的時(shí)候使用另外的 render name，因?yàn)?render prop 可以能有一個(gè)不一樣的名字，或者是一個(gè)子 prop。

const iso = {
  fromHoc: hoc => hoc(props => props.render(props)),
  toHoc: Render => Compo => props => (
     } />
  )
};
總結(jié)

Render prop，回調(diào)繪制和高階組件都是可以互換的。大多數(shù)的時(shí)候 render props 可以滿足要求。但是你也可以通過(guò)某些方法讓它在這些模式之間互相轉(zhuǎn)換。

非常感謝 Brent Jackson，Kent C. Dodds 以及 Rodrigo Pombot 提供了fromHoc方法的實(shí)現(xiàn)，幫我們解決了不少的問(wèn)題。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95885.html

相關(guān)文章

  • 從Preact了解一個(gè)類React的框架是怎么實(shí)現(xiàn)的(三): 組件

    摘要：組件渲染首先我們來(lái)了解組件返回的虛擬是怎么渲染為真實(shí)，來(lái)看一下的組件是如何構(gòu)造的可能我們會(huì)想當(dāng)然地認(rèn)為組件的構(gòu)造函數(shù)定義將會(huì)及其復(fù)雜，事實(shí)上恰恰相反，的組件定義代碼極少。 前言 　　首先歡迎大家關(guān)注我的掘金賬號(hào)和Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫東西沒(méi)法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)?！　≈胺窒磉^(guò)幾篇關(guān)于React的文章: React技術(shù)內(nèi)幕: k...

    AlphaWatch 評(píng)論0 收藏0

  • React組件設(shè)計(jì)技巧

    摘要：我們可以通過(guò)剛剛高階函數(shù)的思想來(lái)創(chuàng)建一個(gè)中間組件，也就是我們說(shuō)的高階組件。僅傳遞組件所需要的屬性。在受控組件中，表單數(shù)據(jù)由組件負(fù)責(zé)處理。作為頂層組件接收一個(gè)名為的，可以接收任意需要被放入中的字符串，數(shù)字，甚至是函數(shù)。 React組件設(shè)計(jì) 組件分類 展示組件和容器組件 展示組件 容器組件 關(guān)注事物的展示 關(guān)注事物如何工作 可能包含展示和容器組件，并且一般會(huì)有DOM標(biāo)簽和cs...

    Luosunce 評(píng)論0 收藏0

  • [譯] React.js 模式

    摘要：此時(shí)，我將它寫下來(lái)討論和分享這些我發(fā)現(xiàn)的模式。正確的姿勢(shì)應(yīng)該是通過(guò)的方式獲取子組件的一些信息。高階組件是需要另外一個(gè)有用的模式依賴注入。也有部分人稱它是一種模式。最直接的方式是通過(guò)每一層通過(guò)來(lái)傳遞。 原文出自：http://krasimirtsonev.com/blog/article/react-js-in-design-patterns 前言 我想找一個(gè)好的前端前端框架，找了很久。...

    mumumu 評(píng)論0 收藏0

  • React的組件模式

    摘要：有狀態(tài)組件通常使用和生命周期相關(guān)事件。組件模式是使用時(shí)的最佳實(shí)踐，最初引入組件模式是為了將數(shù)據(jù)邏輯和表現(xiàn)層進(jìn)行分離。這是一種可以對(duì)輸入組件的進(jìn)行修改增刪改查然后返回全新的修改后的組件強(qiáng)大模式，想想和。 showImg(https://segmentfault.com/img/bVborAV?w=2560&h=1440); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著...

    Muninn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<