React hooks 学习笔记

组件类缺点：

• 大型组件很难拆分和重构，也很难测试。
• 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
• 组件类引入了复杂的编程模式，比如 render props 和高阶组件。

React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。

---

入门hooks：

https://reactjs.org/docs/hooks-intro.html
https://www.ruanyifeng.com/blog/2019/09/react-hooks.html

---

最佳实践：

https://juejin.im/post/5d75ae7a6fb9a06b0f2407e8
精读《React Hooks》
Scheduling in React

---

原理级别：

https://juejin.im/post/5daee8b7e51d4524ce222825
https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
降低程序熵
useState 解析
https://juejin.im/post/5dc6e1b35188251ab9183c7d

---

hooks 专题讲座

useEffect

1. useEffect 的设计意图就是要强迫你关注数据流的改变，然后决定我们的effects该如何和它同步 - 而不是忽视它直到我们的用户遇到了bug。
2. 而在useEffect的思维模型中，默认都是同步的。副作用变成了React数据流的一部分。对于每一个useEffect调用，一旦你处理正确，你的组件能够更好地处理边缘情况。

useCallback

1. useCallback 本质上是添加了一层依赖检查。它以另一种方式解决了问题 - 我们使函数本身只在需要的时候才改变，而不是去掉对函数的依赖。

2. 使用useCallback，函数完全可以参与到数据流中。我们可以说如果一个函数的输入改变了，这个函数就改变了。如果没有，函数也不会改变。感谢周到的useCallback，属性比如props.fetchData的改变也会自动传递下去。

class VS hooks

1. 在使用React的class组件这么多年后，我已经如此习惯于把不必要的props传递下去并且破坏父组件的封装以至于我在一周之前才意识到我为什么一定要这样做。
2. 在class组件生命周期的思维模型中，副作用的行为和渲染输出是不同的。UI渲染是被props和state驱动的，并且能确保步调一致，但副作用并不是这样。这是一类常见问题的来源。

robin教你如何通过hooks拿数据

1. https://www.robinwieruch.de/react-hooks-fetch-data

react-redux 在hooks上的实践

https://react-redux.js.org/api/hooks

hooks在react-router上的实践