iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

React 從 0.5 到 1系列 第 12

[鐵人賽 Day12] 來讀 Hooks FAQ 文件吧! - Hooks 取代 render props 跟 HOC 的用法了嗎?

  1. 版本與支援

Hooks 是 React 16.8 版本推出的語法,React Native 則是在 0.59 版本開始支援,讓你不用寫 class component 也可以使用 state 和其他 React 功能。

目前 Hooks 在 React DOM、React Native、React Test Renderer、React Shallow Renderer 都有穩定的支援。如果你要使用 Hooks,請記得所有的 React Packages 都要是 16.8.0 以上的版本(如果其中一個沒有更新,也是無法運作)。

  1. 有哪些 use cases 是 Hook 缺少(而 classes 有)的?

以下的 lifecycles getSnapshotBeforeUpdategetDerivedStateFromError 以及 componentDidCatch(這個的 use case 可以去看 error-boundaries 那一篇文章) ,目前在 Hook 中並沒有相對應的方法,但是有在更新計畫中。

  1. Hooks 取代 render props 跟 HOC 的用法了嗎?

通常 render props 跟 HOC 只會 render 出單獨一個 child,Hooks 可以更簡單的實作出這種使用情境,在大多數的情境裡,Hooks 都可以幫助你降低 DOM tree nesting 的程度。

但這兩種模式還是有無法替代的情境,例如:一個 virtual scroller component 的實作可能會有 renderItem 作為 prop。(因為對 virtual scroller component 的情境不太清楚,所以我找了一個套件 https://www.npmjs.com/package/react-virtualscroll 當作案例來補充)

react-virtualscroll

這個模組適合用在實作 infinite scroll,當使用者滑動頁面的時候,使用同一個 DOM element 來展示內容,藉由固定 DOM elements 的數量來節省效能,僅顯示剛剛好能夠填滿 viewport 的一小部分的內容。以下是這個模組的用法:

<VirtualScroll
    items={this.state.items}
    onChange={(event) => this.setState(event)}
		// 這裡會傳入一個 renderItem 的 function
    renderItem={this.renderItem.bind(this)} />
// 這是傳入 <VirtualScroll> 的 renderItem function,用來 return 你希望資料被展現的樣子
renderItem(item) {
  return <div key={item.index} className="flx mb1 divider-b primary">
    <div className="fw1">{item.name}</div>
  </div>
}

ref
https://reactjs.org/docs/hooks-faq.html
https://stackoverflow.com/questions/55075604/react-hooks-useeffect-only-on-update


上一篇
[鐵人賽 Day11] React 原始碼的初見面 ——官方 codebase 指南
下一篇
[鐵人賽 Day13] 來讀 Hooks FAQ 文件吧!- Effect dependencies 太常改變,可以做些什麼嗎?
系列文
React 從 0.5 到 115

尚未有邦友留言

立即登入留言