前端小誌(轉型中)

一個用來記錄人老會忘記的地方

render prop正夯

2017年10月07日
前陣了寫了跟HOC有關的文章,我從來沒用過mixin,雖然介紹了HOC,但自己使用的時候總覺得哪裡怪怪的,看了最近蠻紅的影片,終於恍然大悟,讓我們來介紹render props吧。

一切要從Michael Jackson的影片開始,或是你也可以看他寫的文章。(他是react-router的創始人之一)

mixin

本來mixin的出現是為了code的reusable,這邊不特別介紹mixin的寫法,在我開始寫的時候,就已經不流行了。

mixin的問題

  1. 不支持es6 class
    沒錯,就是這點,所以我沒寫過,我也以前也只知道這點XDD。

  2. 無方向性
    我是看文章翻譯的,簡言之,mixin使用了state,這樣會使被附加的component不知道state從哪裡來,尤其是一個component內用了不只一個mixin,code會變的implict。

  3. 命名衝突
    如果有兩個mixin操作了相同名稱的state,這時候就會發生命名衝突,而且程式會直接掛掉,無法跑。

HOC

採用了decorator的方式,跟mixin相比支援es6 class。想了解的可以去翻我之前寫的文章。

HOC的問題

  1. 一樣無方向性。

  2. 一樣命名衝突,但是可以跑,後面的會覆蓋前面的,react不會警告。比起mixin,這樣應該算更不好的缺點。

render prop

在render裡面做處理,跟前兩種很不一樣的點,前面兩種被視為static composition,你只會做一次composition,在你create class的時候,而render prop為dynamic composition,每一次render的時候都會。我對這些是沒辨法自己想到見解,但我覺得這是蠻有道理的。

雖然我寫render prop,但其實常見的是Function as children?不過原理是一模一樣的,請安心使用。

試寫Function as children

class A extends Component {
  state = {

  }
  render() {
    return (
      <div>
      {this.props.chilren(this.state)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <A>
      { AState => (
          ...
        )
      }
      </A>
    )
  }
}

無方向性解決,你可以很簡單的從function的params得知是哪來的。

命名衝突解決,function的params就像module or block一樣。隸屬於不同的params,永遠不會衝突。

唯一的問題(我想的),因為變成兩個class,多了一個<div>Root,我個人很討厭react的一堆div(炸)。

打完啦,我是看影片學的,影片裡面有更多有趣的說法,像是問題就像nail,而mixin就是hammer,然後敲敲敲,react-router其實不想寫HOC,但是因為社群需要...建議聽的懂英文而有時間的可以看看影片,很精采。

我個人是覺得應該還是各有優缺點(雖然原文是render prop必勝),HOC有recompose這個套件,render prop有react-powerplugin這個套件,目前在寫的時候目標是往render prop走,再看看會遇到什麼坑囉。


展開Disqus
分類
最近文章
友站連結
© 2019 Ernie Yang