自己的工具自己造，咱們來造 React Hooks!

說起 React hooks 應該無人不知無人不曉，在去年轟轟烈烈的出世，是 React 16.8 中增加的新功能。
以往只能在 class 裡寫 states，在能夠使用 hooks 以後， function 裡也可以操作 states 了。傑克，這真是太神奇了！
這讓原本寫 class components 的人紛紛改轉寫 functional components，也更能掌握 components 的渲染時機，減少不必要的渲染次數。究竟這些神奇的 hooks 是怎麼實做出來的？
本講座將帶大家一同推測常使用的 useEffect 以及 useState 的 hooks 實作原理。

2020 JSDC: https://2020.jsdc.tw/
影片連結：https://fb.watch/5IMGkVnfqQ/

Transcript

1. Mindy Tai。JSDC ⾃⼰的⼯具⾃⼰造，咱們來造 React Hooks! How React hooks work ?
2. 哇 ，我再也不⽤ setState 了！
3. Compare
4. Compare
5. What problems hook can resolve? Can reuse stateful logic between components
6. Reuse stateful logic between components
7. Reuse stateful logic between components
8. What problems hook can resolve? Let you split components to small pieces not based on lifecycle methods
9. What problems hook can resolve? Yeah, you don’t have to understand class
10. Rules of hooks Only call Hooks at the top level Only call Hooks from React function components or custom hooks Why?? ( not loops, nested functions, conditions )
11. Fiber!
12. Hooks Order Hooks are stored according to their calling order on the fiber object. How React know which hook to call ?
13. Manipulate a set of arrays Hooks Concept
14. Build our own simple React Basic version of React engine Return a component with props Component Console
15. useState Return 1) a stateful value 2) function( is used to update the state) Setter
16. useEffect A function which runs after the initial render and after every update Effects run after every completed render Effects can be fired only when certain values (dependency) have changed Effects may return a clean-up function( unmount )
17. Personal Info Mindy Tai
18. Q & A
19. Have fun with React