常用的react hooks

1. React 提供的 Hooks 其实非常少，一共只有 10 个，比如 useState、useEffect、useCallback、useMemo、useRef、useContext 等等。
2. 副作用是指一段和当前执行结果无关的代码。
3. useEffect 让我们能够在下面四种时机去执行一个回调函数产生副作用：

• 每次 render 后执行：不提供第二个依赖项参数。比如useEffect(() => {})。
• 仅第一次 render 后执行：提供一个空数组作为依赖项。比如useEffect(() => {}, [])。
• 第一次以及依赖项发生变化后执行：提供依赖项数组。比如useEffect(() => {}, [deps])。
• 组件 unmount 后执行：返回一个回调函数。比如useEffect() => { return () => {} }, [])。

4. Hooks 的使用规则包括以下两个：

• 只能在函数组件的顶级作用域使用；
• 只能在函数组件或者其他 Hooks 中使用。

5. useCallback解决事件处理函数的问题：

• 不仅增加了系统的开销
• 每次创建新函数的方式会让接收事件处理函数的组件，需要重新渲染。

6. useCallback和useMemo做了同一件事情：建立了一个绑定某个结果到依赖数据的关系。只有当依赖变了，这个结果才需要被重新得到

用useMemo实现useCallback：
const myEventHandler = useMemo(() => {
// 返回一个函数作为缓存结果
return () => {
// 在这里进行事件处理
}
}, [dep1, dep2]);

问题：useCallback/useMemo 什么情况下使用？是所有情况？还是个别情况，例如计算量较大等情况？

7. useRef：

• 在多次渲染之间共享数据

使用 useRef 保存的数据一般是和 UI 的渲染无关的，因此当 ref 的值发生变化时，是不会触发组件的重新渲染的，这也是 useRef 区别于 useState 的地方。

• 保存某个 DOM 节点的引用

function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// current 属性指向了真实的 input 这个 DOM 节点，从而可以调用 focus 方法
inputEl.current.focus();
};
return (
<>

Focus the input

);
}
ref 这个属性提供了获得 DOM 节点的能力，并利用 useRef 保存了这个节点的应用。这样的话，一旦 input 节点被渲染到界面上，那我们通过 inputEl.current 就能访问到真实的 DOM 节点的实例了。

8. useContext 定义全局状态

和全局的变量去保存数据的区别？
就是为了能够进行数据的绑定。当这个 Context 的数据发生变化时，使用这个数据的组件就能够自动刷新。但如果没有 Context，而是使用一个简单的全局变量，就很难去实现了。

9. useContext 的缺点：

• 会让调试变得困难，因为你很难跟踪某个 Context 的变化究竟是如何产生的。
• 让组件的复用变得困难，因为一个组件如果使用了某个 Context，它就必须确保被用到的地方一定有这个 Context 的 Provider 在其父组件的路径上。

所以在 React 的开发中，除了像 Theme、Language 等一目了然的需要全局设置的变量外，我们很少会使用 Context 来做太多数据的共享。需要再三强调的是，Context 更多的是提供了一个强大的机制，让 React 应用具备定义全局的响应式数据的能力。