Hooks核心05

创建自定义 hooks

声明名字以 use 开头的函数，比如 useCounter，这个函数在形式上和普通的 js 函数没有任何区别，你可以传递任意参数给这个 hook，也可以返回任何值。但是要注意，hooks 和普通函数的区别是自定义 hooks 一定要用到其他的 hooks。

1. 名字一定是以 use 开头的函数，这样 react 才能够知道这个函数是一个 hooks
2. 函数内部一定调用了其他的 hooks，可以是内置的 hooks，也可以是其他自定义 hooks。这样能够让组件刷新，或者去产生副作用。

四个典型的使用场景：

1. 抽取业务逻辑；
2. 封装通用逻辑；
3. 监听浏览器状态；
4. 拆分复杂组件。

要经常撕开哪些逻辑应该封装到一个独立的 hook，保证每个 hook 的短小精悍，从而让代码更加清晰，易于理解和维护。

React 中的状态管理

react 中的 ui 完全是通过状态驱动的。所以在任何时候，整个应用程序的状态数据就完全决定了当前 ui 上得展现。毫不夸张地说，react 的开发其实就是>复杂应用状态的管理和开发。因此，需要你思考，该怎么去用最优、最合理的方式，去管理你的应用程序的状态。

以下两个原则可以帮助我们避免复杂的状态管理逻辑，简化应用程序的开发。

1. 状态最小化原则，也就是说要避免冗余的状态；
2. 唯一数据源原则，避免中间状态。

所以在任何时候想要定义新状态时，都要问问自己：这个状态有必要吗？是否能通过计算得到？是否是一个中间状态？

React 中的原生事件

React17 之前所有的事件都是绑定在 document 上，而从 react17 开始绑定在整个 App 的根节点上，这主要为了以后页面上可能存在的多版本 React 的考虑。
具体来说，React 这样做得原因主要有两个。

1. 虚拟 Dom render 的时候，dom 很可能还没有真实的 render 到页面上，所以无法绑定事件。
2. React 可以屏蔽底层事件的细节，避免浏览器的兼容性问题。同时，对于 React Native 这种不是通过浏览器 render 的运行时，也能提供一致的 API。

为什么事件绑定在某个根节点上，也能触发实际 dom 节点的事件？

因为浏览器的事件冒泡模型，根节点可以通过事件的 srcElement 属性知道哪个节点发出的事件，这样 React 就可以收集所有的事件，然后再以一直的 API 暴露出来。