React深入（二）

Hook

1. React 16.8.0 是第一个支持 Hook 的版本;

使用原因

1. 使用组件之间复用逻辑更容易（对比高阶组件， props render，providers，consumers）；
2. Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）;

特性

1. 通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state；
   import React, { useState, useEffect } from 'react';
   function Example() {
   // 声明一个叫 “count” 的 state 变量。
   const [count, setCount] = useState(0);
   // 相当于 componentDidMount 和 componentDidUpdate
   useEffect(() => {
   document.title = You clicked ${count} times;
   });
   return (
   
   
   

   You clicked {count} times

   
   setCount(count + 1)}>
   Click me
   
   
   
   );
   }
2. Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class；
3. Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数；
4. 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
5. 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）
6. 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。

State Hook

定义

1. 调用useState方法定义一个 'state' 变量;
2. useState唯一参数就是变量初始值;
3. useState返回 state 以及更新 state 的函数;

读取

直接使用useState返回的变量名，如定义const [count, setCount] = useState(0)，读取时直接读取count

更新

直接通过setCount更新，如onClick={() => setCount(count+1)}

Effect Hook

1. 定义：
   useEffect(() => {
   // Update the document title using the browser API
   document.title = You clicked ${count} times;
   });

2. 作用和componentDidMount and componentDidUpdate类似;

3. 如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它;

4. 如果声明了多个effect，将按照 effect 声明的顺序依次调用组件中的每一个 effect;

5. 可以实现在特定时机更新：
   useEffect(() => {
   function handleStatusChange(status) {
   setIsOnline(status.isOnline);
   }

   ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
   return () => {
   ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
   };
   }, [props.friend.id]); // 仅在 props.friend.id 发生变化时，重新订阅

Hook规则

1. 只在最顶层使用 Hook
2. 只在 React 函数或自定义 Hook 中调用 Hook

自定义Hook

1. 自定义 Hook 必须以 “use” 开头;
2. 自定义 Hook 定义在最顶部;
3. 一般自定义Hook可以作为React自带Hook的封装，返回一个内部state值;

Hook概览

基础 Hook

1. useState
2. useEffect
3. useContext

额外的 Hook

1. useReducer
2. useCallback
3. useMemo
4. useRef
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue