[铁人赛 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


<<:  [Day27] NLP会用到的模型(十)-实作transformer-下

>>:  13 出牌倒数要怎麽做才好?

< 关於 React: 开始打地基| 依照条件render画面 >

09-12-2021 前言: 我们时常会在同一个页面中需要显示不同的画面,可能是因为登入时的登入画面...

大共享时代系列_018_共享爬山趣

爬山路线规划很难? 直接把别人的路线轨迹汇入到自己的地图吧! 找不到一起爬山的人?揪爬山的社群一大堆...

卡夫卡的藏书阁【Book21】- Kafka - KafkaJS 消费者 3

“Now I can look at you in peace; I don't eat you ...

Day 0x17 UVa10252 Common Permutation

Virtual Judge ZeroJudge 题意 输入 a、b 两字串,输出皆为两者的子字串 ...

Day13 用python写UI-聊聊Frame

今天学校放假,但是有老师说要上课,所以下午还是没有放到假(T_T),但其实有放假跟没放假好像没什麽差...