owned this note   changed 7 years ago  
Linked with GitHub

Use React Patterns To Build Large Scalable App - 鍾曜年 (Jay Chung)

歡迎來到 Modern Web 2018 共筆 :mega:
共筆入口：https://hackmd.io/c/MW18
手機版請點選上方 按鈕展開議程列表。

App 由 Components 組成。

Pattern 是專家經過不斷的嘗試，所找出解決某個情況問題的方法

Pattern 可以見微知著
eg. 動物毛皮、畢氏定理

React Patterns

  • children as function
  • higher order render props
  • higher order component
  • provider pattern

code: https://github.com/xJkit/modern-web-2018-demo

Container Component Patterns

Presentational and Container compinents – Dan Abramov 原文連結

  • Container Component

    • 負責處理邏輯
    • 無形的東西，不會渲染出 HTML

  • Presentational Component

    • 定義 UI 組建
    • 沒有狀態 stateless

  • How to custom UI Styles ?

    • You need more props!
      • props 會越來越多

  • 問題：

    • 跟 UI 做溝通時，包了一個 container，需要很多 props

Compound Component Patterns

Ryan Florence - Compound Components

關鍵方法：使用 React.Children 將子組件暴露出來。

問題：無法取得 children 的 children
解法：使用 Provider

Render Prop Patterns

Def: A render prop is a function prop that a compoent uses to know what to render

Michael Jackson - Use a Render Prop!

react doc: https://reactjs.org/docs/render-props.html

use case:

  1. react-motion
  2. react-powerplug - renderless containers
  3. react goodbye

Higher Order Component Patterns

use case:

  1. recompose

Provider Patterns

解決的問題：Props drilling

tags: MW18
Select a repo