react hooks

[Huauauaa]

• https://mp.weixin.qq.com/s/rAw_9tvkxPpneI-Mdxp-pQ
• https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
• https://zhuanlan.zhihu.com/p/92211533

[Huauauaa]

useEffect VS useLayoutEffect

• 优先使用 useEffect，因为它是异步执行的，不会阻塞渲染
• 会影响到渲染的操作尽量放到 useLayoutEffect中去，避免出现闪烁问题
• useLayoutEffect和componentDidMount是等价的，会同步调用，阻塞渲染
• 在服务端渲染的时候使用会有一个 warning，因为它可能导致首屏实际内容和服务端渲染出来的内容不一致。

[Huauauaa]

pros & cons

pros

• 更容易复用代码
  • 每调用useHook一次都会生成一份独立的状态，函数每次调用都会开辟一份独立的内存空间。
  • 虽然状态(from useState)和副作用(useEffect)的存在依赖于组件，但它们可以在组件外部进行定义。这点是class component做不到的，你无法在外部声明state和副作用（如componentDidMount）
• 清爽的代码风格+代码量更少
  • 函数式编程风格，函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽，更优雅。
  • 对IDE更友好，对比类组件，函数组件里面的unused状态和unused-method更容易被编辑器发现。
  • 使用typescript的话，类型声明也变得更容易。
  • 向props或状态取值更加方便，函数组件的取值都从当前作用域直接获取变量，而类组件需要先访问实例this，再访问其属性或者方法，多了一步。
  • 更改状态也变得更加简单, this.setState({ count:xxx })变成 setCount(xxx)。

cons

• 响应式的useEffect
• hooks不擅长异步的代码（旧引用问题）
• custom hooks有时严重依赖参数的不可变性