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 以上的版本(如果其中一个没有更新,也是无法运作)。
以下的 lifecycles getSnapshotBeforeUpdate
, getDerivedStateFromError
以及 componentDidCatch
(这个的 use case 可以去看 error-boundaries 那一篇文章) ,目前在 Hook 中并没有相对应的方法,但是有在更新计画中。
通常 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-下
09-12-2021 前言: 我们时常会在同一个页面中需要显示不同的画面,可能是因为登入时的登入画面...
爬山路线规划很难? 直接把别人的路线轨迹汇入到自己的地图吧! 找不到一起爬山的人?揪爬山的社群一大堆...
“Now I can look at you in peace; I don't eat you ...
Virtual Judge ZeroJudge 题意 输入 a、b 两字串,输出皆为两者的子字串 ...
今天学校放假,但是有老师说要上课,所以下午还是没有放到假(T_T),但其实有放假跟没放假好像没什麽差...