Reactjs 不同 UI 元件卻擁有相似行為，如何重複使用？ 什麼是 Render Props

如 Reactjs 官方所言，元件（Component) 作為程式碼最主要的基本複用單位（ primary unit of code reuse）。

官網舉例的某個情境(圖示於下)：

有一個 <h2> 的元件，想要顯示當前滑鼠座標；
有一個 <img> 的元件，想要追蹤滑鼠移動。

兩個元件內部都希望有一組 state / handler，來追蹤 滑鼠在畫面上 XY 軸的座標

一般來說，最簡單能透過 React 將滑鼠的狀態（ clientX, clientY ）與 <h2> 封裝成 <MouseTitle /> ；與<img> 封裝成 <MouseTracker />。

此時，我們的 <MouseTitle />與 <MouseTracker />能否 不重複 撰寫下列兩組一樣的狀態；也就是我們如何重用這個追蹤座標的行為？

// <MouseTitle />
const [coordinate, setCoordinate] = useState({ x: 0, y: 0 });
const handleMouseMove = (e) => 
                setCoordinate({ x: e.clientX, y: e.clientY});
// <MouseTracker />
const [coordinate, setCoordinate] = useState({ x: 0, y: 0 });
const handleMouseMove = (e) => 
                setCoordinate({ x: e.clientX, y: e.clientY});

是否有機會存在一個元件 <Mouse />，負責紀錄座標狀態及監聽其變化，讓外面其他人來決定要渲染出什麼元件？！

我們知道 React 可以透過 Props 將狀態傳遞給 子元件，所以我們就決定從上層來告訴底下的 <Mouse /> 元件要渲染什麼畫面吧！讓 Mouse 自己控制座標的狀態。

要實現這個目的，我們該往哪出發呢ＱＷＱ？父層決定渲染什麼元件，但是又必須拿到子層座標的狀態！

Render Props ！渲染你的 props …， callback function 是救星～

View = fn ( state )

因此我們透過父層傳遞一個 callback function 下來，然後在子元件內帶入 state 、執行這個 function。

這個 function 的參數吃子元件的狀態，並且回傳一組 React components。

實作如下

子元件 <Mouse />

const Mouse = props => {
  const { render } = props
  const [coordinate, setCoordinate] = useState({ x: 0, y: 0 });
  const handleMouseMove = (e) => setCoordinate({ 
            x: e.clientX,
            y: e.clientY
  });
return (<div 
            style={{ height: "100vh" }}
            onMouseMove={handleMouseMove}
          >
           { /* View = fn ( state ) */ }
           { render(coordinate) }
        </div>);
};

父元件 <App />

const App = () => {
  return (<div className="App">
    
            <Mouse render={({ x, y }) => <h2>{`Current x:${x} ,y:${y}`}</h2>} />
          </div>);
};

如此，我們便可以透過 <Mouse /> ，共用監聽、追蹤座標狀態的行為，透過 props 帶入我們需要渲染的元件！

一般來說， Render Props 這種 Pattern 的 function 名稱，習慣以 renderSomething 命名，props 名稱也大多習慣叫做 render ，也有另一種透過 children props的方式！

// 我們通常都會給一組 function 以 render 開頭的名稱，例如：
const renderTitle = ({ x, y }) => <h2>{`Current x:${x} ,y:${y}`}</h2>
        
return <div><Mouse render={renderTitle} /></div>

喵咪的 <MouseTracker /> 我也放在 codesandbox 唷！

Takeaways 要點

任何一種將 Props 放入一組會回傳元件的 function ， 都屬於 Render Props 這種 Pattern by React 官網

參考

HOC 與Render Props，談我從她們身上學到什麼 by Wendell Liu
React Render Props by Tyler McGinnis
Render Props by Reactjs

如果這篇文章對你有幫助，請幫我拍手一下
你的拍手及分享是對我最大鼓勵與書寫下篇文章的動力

1下 閱。
5–10下 你認為這篇文章還不錯。
11–20下 你認為這篇貼文對你很有幫助。
21–40下 你非常喜歡這篇貼文，覺得實用。
40–50下 希望我可以多分享關於 React 相關的文章