为什么出现 Hooks

Hooks 就是把某个目标结果钩到某个可能会变化的数据源或事件源上，当数据源或事件源发生变化时，产生目标结果的代码会重新执行，产生更新后的结果。

  • 简化逻辑复用，原本只能使用高阶组件
  • 关注分离

    useState

    state 中不要保存可以通过计算得到的值

  1. props 传递过来的值
  2. 从 URL 中读到的值
  3. 从 cookie、localStorage 中读取的值

    useEffect

    副作用 useEffect 在每一次快照中会将其 Array Dependency 中的 state 和 返回的 cleanup 方法存储在自己的 hooks[index] 中。在下一次更新时会先执行 cleanup 方法，然后对比依赖的state 与上一次相比是否发生变化，进而决定副作用回调方法是否执行。

  1. useEffect(cb, depArray) {
  2.   const hasNoDeps = !depArray;
  3.   hooks[idx] = hooks[idx] || {};
  4.   const {deps, cleanup} = hooks[idx]; // undefined when first render
  5.   const hasChanged = deps
  6.     ? !depArray.every((el, i) => el === deps[i])
  7.     : true;
  8.   if (hasNoDeps || hasChanged) {
  9.     cleanup && cleanup();
  10.     hooks[idx].cleanup = cb();
  11.     hooks[idx].deps = depArray;
  12.   }
  13.   idx++;
  14. }

使用原则：

  1. 在复杂的副作用里，将逻辑拆分为 action 和 callback 两部分，这与 flux 思想类似：useEffect 中避免直接修改 state，只能触发 action。管理 state 的逻辑放在 callback 中，通过侦听 action 来执行具体的操作；
  2. 管理 state 逻辑的 callback 要么通过 setState 的参数获取所需 state，要么通过 useReducer，我们可以在 reducer 参数里获取到全部 state；

  3. useEffect 的 Array Dependency 里只包含触发 action 的变量；

    1. const UserContainer = () => {
    2. const [user, setUser] = useState(null);
    4. // 使用 useCallback 包裹
    5. const handleUserFetch = useCalllback(async () => {
    6.  const result = await fetchUserAction();
    7.  setUser(result);
    8. }, []);
    10. useEffect(() => {
    11.  handleUserFetch();
    12. }, [handleUserFetch]); /* 将 handleUserFetch 作为依赖项传入 */
    14. if (!user) return <p>No data available.</p>
    16. return <UserCard data={user} />
    17. };

    useRef

    在函数组件之外创建的一个容器空间。在这个容器上，我们可以通过唯一的 current 属设置一个值，从而在函数组件的多次渲染之间共享这个值。

  • 在多次渲染之间共享数据
  • 保存某个 DOM 节点的引用 ```java import React, { useState, useCallback, useRef } from “react”;

export default function Timer() { // 定义 time state 用于保存计时的累积时间 const [time, setTime] = useState(0);

// 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量 const timer = useRef(null);

// 开始计时的事件处理函数 const handleStart = useCallback(() => { // 使用 current 属性设置 ref 的值 timer.current = window.setInterval(() => { setTime((time) => time + 1); }, 100); }, []);

// 暂停计时的事件处理函数 const handlePause = useCallback(() => { // 使用 clearInterval 来停止计时 window.clearInterval(timer.current); timer.current = null; }, []);

return (

{time / 10} seconds.
); }

  1. 执行一次性的初始化逻辑
  2. ```java
  3. import { useRef } from 'react';
  5. // 创建一个自定义 Hook 用于执行一次性代码
  6. function useSingleton(callback) {
  7.   // 用一个 called ref 标记 callback 是否执行过
  8.   const called = useRef(false);
  9.   // 如果已经执行过，则直接返回
  10.   if (called.current) return;
  11.   // 第一次调用时直接执行
  12.   callBack();
  13.   // 设置标记为已执行过
  14.   called.current = true;
  15. }
  1. import useSingleton from './useSingleton';
  3. const MyComp = () => {
  4.   // 使用自定义 Hook
  5.   useSingleton(() => {
  6.     console.log('这段代码只执行一次');
  7.   });
  9.   return (
  10.     <div>My Component</div>
  11.   );
  12. };

父组件调用子组件的方法

useImperativeHandle 可以让父组件获取并执行子组件内某些自定义函数(方法)。本质上其实是子组件将自己内部的函数(方法)通过 useImperativeHandle 添加到父组件中 useRef 定义的对象中。

1、useRef 创建引用变量
2、React.forwardRef 将引用变量传递给子组件
3、useImperativeHandle 将子组件内定义的函数作为属性，添加到父组件中的 ref 对象上。

  1. import React,{useState,useImperativeHandle} from 'react'
  3. function ChildComponent(props,ref) {
  4.   const [count,setCount] =  useState(0); //子组件定义内部变量count
  5.   //子组件定义内部函数 addCount
  6.   const addCount = () => {
  7.     setCount(count + 1);
  8.   }
  9.   //子组件通过useImperativeHandle函数，将addCount函数添加到父组件中的ref.current中
  10.   useImperativeHandle(ref,() => ({addCount}));
  11.   return (
  12.     <div>
  13.         {count}
  14.         <button onClick={addCount}>child</button>
  15.     </div>
  16.   )
  17. }
  19. //子组件导出时需要被React.forwardRef包裹，否则无法接收 ref这个参数
  20. export default React.forwardRef(ChildComponent);
  1. import React,{useRef} from 'react'
  2. import ChildComponent from './childComponent'
  4. function Imperative() {
  5.   const childRef = useRef(null); //父组件定义一个对子组件的引用
  7.   const clickHandle = () => {
  8.     childRef.current.addCount(); //父组件调用子组件内部 addCount函数
  9.   }
  11.   return (
  12.     <div>
  13.         {/* 父组件通过给子组件添加 ref 属性，将childRef传递给子组件，
  14.             子组件获得该引用即可将内部函数添加到childRef中 */}
  15.         <ChildComponent ref={childRef} />
  16.         <button onClick={clickHandle}>child component do somting</button>
  17.     </div>
  18.   )
  19. }
  21. export default Imperative;

自定义 Hooks

封装通用逻辑

在 Hooks 中，你可以管理当前组件的 state，从而将更多的逻辑写在可重用的 Hooks 中。 普通的工具类中无法直接修改组件 state ，那么也就无法在数据改变的时候触发组件的重新渲染。

  1. import { useState } from 'react';
  3. const useAsync = (asyncFunction) => {
  4.   // 设置三个异步逻辑相关的 state
  5.   const [data, setData] = useState(null);
  6.   const [loading, setLoading] = useState(false);
  7.   const [error, setError] = useState(null);
  8.   // 定义一个 callback 用于执行异步逻辑
  9.   const execute = useCallback(() => {
  10.     // 请求开始时，设置 loading 为 true，清除已有数据和 error 状态
  11.     setLoading(true);
  12.     setData(null);
  13.     setError(null);
  14.     return asyncFunction()
  15.       .then((response) => {
  16.         // 请求成功时，将数据写进 state，设置 loading 为 false
  17.         setData(response);
  18.         setLoading(false);
  19.       })
  20.       .catch((error) => {
  21.         // 请求失败时，设置 loading 为 false，并设置错误状态
  22.         setError(error);
  23.         setLoading(false);
  24.       });
  25.   }, [asyncFunction]);
  27.   return { execute, loading, data, error };
  28. };
  1. import React from "react";
  2. import useAsync from './useAsync';
  4. export default function UserList() {
  5.   // 通过 useAsync 这个函数，只需要提供异步逻辑的实现
  6.   const {
  7.     execute: fetchUsers,
  8.     data: users,
  9.     loading,
  10.     error,
  11.   } = useAsync(async () => {
  12.     const res = await fetch("https://reqres.in/api/users/");
  13.     const json = await res.json();
  14.     return json.data;
  15.   });
  17.   return (
  18.     // 根据状态渲染 UI...
  19.   );
  20. }

监听数据源状态

Hooks 可以让 React 的组件绑定在任何可能的数据源上。这样当数据源发生变化时，组件能够自动刷新。

  1. import { useState, useEffect } from 'react';
  3. // 获取横向，纵向滚动条位置
  4. const getPosition = () => {
  5.   return {
  6.     x: document.body.scrollLeft,
  7.     y: document.body.scrollTop,
  8.   };
  9. };
  10. const useScroll = () => {
  11.   // 定一个 position 这个 state 保存滚动条位置
  12.   const [position, setPosition] = useState(getPosition());
  13.   useEffect(() => {
  14.     const handler = () => {
  15.       setPosition(getPosition(document));
  16.     };
  17.     // 监听 scroll 事件，更新滚动条位置
  18.     document.addEventListener("scroll", handler);
  19.     return () => {
  20.       // 组件销毁时，取消事件监听
  21.       document.removeEventListener("scroll", handler);
  22.     };
  23.   }, []);
  24.   return position;
  25. };
  1. import React, { useCallback } from 'react';
  2. import useScroll from './useScroll';
  4. function ScrollTop() {
  5.   const { y } = useScroll();
  7.   const goTop = useCallback(() => {
  8.     document.body.scrollTop = 0;
  9.   }, []);
  11.   const style = {
  12.     position: "fixed",
  13.     right: "10px",
  14.     bottom: "10px",
  15.   };
  16.   // 当滚动条位置纵向超过 300 时，显示返回顶部按钮
  17.   if (y > 300) {
  18.     return (
  19.       <button onClick={goTop} style={style}>
  20.         Back to Top
  21.       </button>
  22.     );
  23.   }
  24.   // 否则不 render 任何 UI
  25.   return null;
  26. }

拆分复杂组件

把 Hooks 就看成普通的函数，能隔离的尽量去做隔离，从而让代码更加模块化 尽量将相关的逻辑做成独立的 Hooks，然后在函数组中使用这些 Hooks，通过参数传递和返回值让 Hooks 之间完成交互。

  1. import React, { useEffect, useCallback, useMemo, useState } from "react";
  2. import { Select, Table } from "antd";
  3. import _ from "lodash";
  4. import useAsync from "./useAsync";
  6. const endpoint = "https://myserver.com/api/";
  7. const useArticles = () => {
  8.   // 使用上面创建的 useAsync 获取文章列表
  9.   const { execute, data, loading, error } = useAsync(
  10.     useCallback(async () => {
  11.       const res = await fetch(`${endpoint}/posts`);
  12.       return await res.json();
  13.     }, []),
  14.   );
  15.   // 执行异步调用
  16.   useEffect(() => execute(), [execute]);
  17.   // 返回语义化的数据结构
  18.   return {
  19.     articles: data,
  20.     articlesLoading: loading,
  21.     articlesError: error,
  22.   };
  23. };
  24. const useCategories = () => {
  25.   // 使用上面创建的 useAsync 获取分类列表
  26.   const { execute, data, loading, error } = useAsync(
  27.     useCallback(async () => {
  28.       const res = await fetch(`${endpoint}/categories`);
  29.       return await res.json();
  30.     }, []),
  31.   );
  32.   // 执行异步调用
  33.   useEffect(() => execute(), [execute]);
  35.   // 返回语义化的数据结构
  36.   return {
  37.     categories: data,
  38.     categoriesLoading: loading,
  39.     categoriesError: error,
  40.   };
  41. };
  42. const useCombinedArticles = (articles, categories) => {
  43.   // 将文章数据和分类数据组合到一起
  44.   return useMemo(() => {
  45.     // 如果没有文章或者分类数据则返回 null
  46.     if (!articles || !categories) return null;
  47.     return articles.map((article) => {
  48.       return {
  49.         ...article,
  50.         category: categories.find(
  51.           (c) => String(c.id) === String(article.categoryId),
  52.         ),
  53.       };
  54.     });
  55.   }, [articles, categories]);
  56. };
  57. const useFilteredArticles = (articles, selectedCategory) => {
  58.   // 实现按照分类过滤
  59.   return useMemo(() => {
  60.     if (!articles) return null;
  61.     if (!selectedCategory) return articles;
  62.     return articles.filter((article) => {
  63.       console.log("filter: ", article.categoryId, selectedCategory);
  64.       return String(article?.category?.name) === String(selectedCategory);
  65.     });
  66.   }, [articles, selectedCategory]);
  67. };
  69. const columns = [
  70.   { dataIndex: "title", title: "Title" },
  71.   { dataIndex: ["category", "name"], title: "Category" },
  72. ];
  74. export default function BlogList() {
  75.   const [selectedCategory, setSelectedCategory] = useState(null);
  76.   // 获取文章列表
  77.   const { articles, articlesError } = useArticles();
  78.   // 获取分类列表
  79.   const { categories, categoriesError } = useCategories();
  80.   // 组合数据
  81.   const combined = useCombinedArticles(articles, categories);
  82.   // 实现过滤
  83.   const result = useFilteredArticles(combined, selectedCategory);
  85.   // 分类下拉框选项用于过滤
  86.   const options = useMemo(() => {
  87.     const arr = _.uniqBy(categories, (c) => c.name).map((c) => ({
  88.       value: c.name,
  89.       label: c.name,
  90.     }));
  91.     arr.unshift({ value: null, label: "All" });
  92.     return arr;
  93.   }, [categories]);
  95.   // 如果出错，简单返回 Failed
  96.   if (articlesError || categoriesError) return "Failed";
  98.   // 如果没有结果，说明正在加载
  99.   if (!result) return "Loading...";
  101.   return (
  102.     <div>
  103.       <Select
  104.         value={selectedCategory}
  105.         onChange={(value) => setSelectedCategory(value)}
  106.         options={options}
  107.         style={{ width: "200px" }}
  108.         placeholder="Select a category"
  109.       />
  110.       <Table dataSource={result} columns={columns} />
  111.     </div>
  112.   );
  113. }

复杂状态管理：如何保证状态一致性

  • 保证状态最小化
  • 避免中间状态，确保唯一数据源

    保证状态最小化

    某些数据如果能从已有的 State 中计算得到，那么我们就应该始终在用的时候去计算，而不要把计算的结果存到某个 State 中。 实用 useMemo 缓存计算的结果

  1. function FilterList({ data }) {
  2.   // 设置关键字的 State
  3.   const [searchKey, setSearchKey] = useState('');
  4.   // 设置最终要展示的数据状态，并用原始数据作为初始值
  5.   const [filtered, setFiltered] = useState(data);
  7.   // 在 data 变化的时候，也重新生成最终数据 
  8.   useEffect(() => { setFiltered(data => {...}) }, [data, searchKey])
  10.   // 处理用户的搜索关键字
  11.   const handleSearch = useCallback(evt => {
  12.     setSearchKey(evt.target.value);
  13.     setFiltered(data.filter(item => {
  14.       return item.title.includes(evt.target.value)));
  15.     }));
  16.   }, [filtered])
  17.   return (
  18.     <div>
  19.       <input value={searchKey} onChange={handleSearch} />
  20.       {/* 根据 filtered 数据渲染 UI */}
  21.     </div>
  22.   );
  23. }
  1. import React, { useState, useMemo } from "react";
  3. function FilterList({ data }) {
  4.   const [searchKey, setSearchKey] = useState("");
  6.   // 每当 searchKey 或者 data 变化的时候，重新计算最终结果
  7.   const filtered = useMemo(() => {
  8.     return data.filter((item) =>
  9.       item.title.toLowerCase().includes(searchKey.toLowerCase())
  10.     );
  11.   }, [searchKey, data]);
  13.   return (
  14.     <div className="08-filter-list">
  15.       <h2>Movies</h2>
  16.       <input
  17.         value={searchKey}
  18.         placeholder="Search..."
  19.         onChange={(evt) => setSearchKey(evt.target.value)}
  20.       />
  21.       <ul style={{ marginTop: 20 }}>
  22.         {filtered.map((item) => (
  23.           <li key={item.id}>{item.title}</li>
  24.         ))}
  25.       </ul>
  26.     </div>
  27.   );
  28. }

避免中间状态，确保唯一数据源

微信截图_20210619132250.png

异步处理：如何向服务器发送请求

无论大小项目，在开始实现第一个请求的时候，通常我们要做的第一件事应该都是创建一个自己的 API Client，之后所有的请求都会通过这个 Client 发出去。

封装远程资源

Hooks 的一个特性是可以绑定任何数据源，可以把 Get 请求当作一个远程数据源

  1. import { useState, useEffect } from "react";
  2. import apiClient from "./apiClient";
  4. // 将获取文章的 API 封装成一个远程资源 Hook
  5. const useArticle = (id) => {
  6.   // 设置三个状态分别存储 data, error, loading
  7.   const [data, setData] = useState(null);
  8.   const [loading, setLoading] = useState(false);
  9.   const [error, setError] = useState(null);
  10.   useEffect(() => {
  11.     // 重新获取数据时重置三个状态
  12.     setLoading(true);
  13.     setData(null);
  14.     setError(null);
  15.     apiClient
  16.       .get(`/posts/${id}`)
  17.       .then((res) => {
  18.         // 请求成功时设置返回数据到状态
  19.         setLoading(false);
  20.         setData(res.data);
  21.       })
  22.       .catch((err) => {
  23.         // 请求失败时设置错误状态
  24.         setLoading(false);
  25.         setError(err);
  26.       });
  27.   }, [id]); // 当 id 变化时重新获取数据
  29.   // 将三个状态作为 Hook 的返回值
  30.   return {
  31.     loading,
  32.     error,
  33.     data
  34.   };
  35. };

函数组件设计模式：如何应对复杂条件渲染场景

容器模式：实现按条件执行 Hooks

把原来需要条件运行的 Hooks 拆分成子组件，然后通过一个容器组件来进行实际的条件判断，从而渲染不同的组件，实现按条件渲染的目的。

  • Hooks 必须按顺序被执行到，不能放到条件判断、循环等语句中。 ```javascript // 定义一个容器组件用于封装真正的 UserInfoModal export default function UserInfoModalWrapper({ visible, …rest, // 使用 rest 获取除了 visible 之外的属性 }) { // 如果对话框不显示，则不 render 任何内容 if (!visible) return null; // 否则真正执行对话框的组件逻辑 return ; }
  1. <a name="w6xdr"></a>
  2. ## 使用 render props 模式重用 UI 逻辑
  3. > render props 就是把一个 render 函数作为属性传递给某个组件，由这个组件去执行这个函数从而 render 实际的内容
  4. > Hooks 有一个局限，那就是只能用作数据逻辑的重用，而一旦涉及 UI 表现逻辑的重用，而这可以使用 render props 来解决
  6. ```javascript
  7. import { useState, useCallback } from "react";
  9. function CounterRenderProps({ children }) {
  10.   const [count, setCount] = useState(0);
  11.   const increment = useCallback(() => {
  12.     setCount(count + 1);
  13.   }, [count]);
  14.   const decrement = useCallback(() => {
  15.     setCount(count - 1);
  16.   }, [count]);
  18.   return children({ count, increment, decrement });
  19. }
  1. function CounterRenderPropsExample() {
  2.   return (
  3.     <CounterRenderProps>
  4.       {({ count, increment, decrement }) => {
  5.         return (
  6.           <div>
  7.             <button onClick={decrement}>-</button>
  8.             <span>{count}</span>
  9.             <button onClick={increment}>+</button>
  10.           </div>
  11.         );
  12.       }}
  13.     </CounterRenderProps>
  14.   );
  15. }

事件处理：如何创建自定义事件

是否需要 useCallback ，和函数的复杂度没有必然关系，而是和回调函数绑定到哪个组件有关。这是为了避免因组件属性变化而导致不必要的重新渲染。

  • 原生的 DOM 节点，比如 button、input 等，不用担心重新渲染的
  • 自定义组件，或者一些 UI 框架的组件需要考虑性能问题

    Hooks 具备绑定任何数据源的能力 使用 Hooks 封装事件，相当于将这些动作事件看作不断变化的数据源

  1. import { useEffect, useState } from "react";
  3. // 使用 document.body 作为默认的监听节点
  4. const useKeyPress = (domNode = document.body) => {
  5.   const [key, setKey] = useState(null);
  6.   useEffect(() => {
  7.     const handleKeyPress = (evt) => {
  8.       setKey(evt.keyCode);
  9.     };
  10.     // 监听按键事件
  11.     domNode.addEventListener("keypress", handleKeyPress);
  12.     return () => {
  13.       // 接触监听按键事件
  14.       domNode.removeEventListener("keypress", handleKeyPress);
  15.     };
  16.   }, [domNode]);
  17.   return key;
  18. };
  1. import useKeyPress from './useKeyPress';
  3. function UseKeyPressExample() => {
  4.   const key = useKeyPress();
  5.   return (
  6.     <div>
  7.       <h1>UseKeyPress</h1>
  8.       <label>Key pressed: {key || "N/A"}</label>
  9.     </div>
  10.   );
  11. };

使用浮动层：如何展示对话框，并给对话框传递参数

一个实现业务逻辑的 Modal 究竟应该在哪个组件中去声明？又该怎么和它进行交互呢？

如何用一个统一的方式去管理对话框，从而让对话框相关的业务逻辑能够更加模块化，以及和其他业务逻辑进行解耦。

使用全局状态管理所有对话框

对话框这种模式的本质就是一个独立的窗口，它和一个拥有独立 URL 的页面在功能上和形式上都是极为类似的

处理对话框返回值

把用户在对话框中的操作看成一个异步操作逻辑，那么用户在完成了对话框中内容的操作之后，就认为异步逻辑完成了

  1. const modal = useNiceModal('my-modal');
  2. // 实现一个 promise API 来处理返回值
  3. modal.show(args).then(result => {});
  1. // 使用一个 object 缓存 promise 的 resolve 回调函数
  2. const modalCallbacks = {};
  3. export const useNiceModal = (modalId) => {
  4.   const dispatch = useDispatch();
  5.   const show = useCallback(
  6.     (args) => {
  7.       return new Promise((resolve) => {
  8.         // 显示对话框时，返回 promise 并且将 resolve 方法临时存起来
  9.         modalCallbacks[modalId] = resolve;
  10.         dispatch(showModal(modalId, args));
  11.       });
  12.     },
  13.     [dispatch, modalId],
  14.   );
  15.   const resolve = useCallback(
  16.     (args) => {
  17.       if (modalCallbacks[modalId]) {
  18.         // 如果存在 resolve 回调函数，那么就调用
  19.         modalCallbacks[modalId](args);
  20.         // 确保只能 resolve 一次
  21.         delete modalCallbacks[modalId];
  22.       }
  23.     },
  24.     [modalId],
  25.   );
  27.   // 其它逻辑...
  29.   // 将 resolve 也作为返回值的一部分
  30.   return { show, hide, resolve, visible, hiding };
  31. };

路由管理

  • 提供了按页面去组织整个应用程序的能力

  • 统一资源定位符：对于能够通过前端应用展现的每一个资源，你都要考虑 URL 是否能唯一地定位到这个资源

    按需加载

    使用 import 语句，定义按需加载的起始模块

    1. function ProfilePage() {
    2. // 定义一个 state 用于存放需要加载的组件
    3. const [RealPage, setRealPage] = useState(null);
    5. // 根据路径动态加载真正的组件实现
    6. import('./RealProfilePage').then((comp) => {
    7.   setRealPage(Comp);
    8. });
    9. // 如果组件未加载则显示 Loading 状态
    10. if (!RealPage) return 'Loading....';
    12. // 组件加载成功后则将其渲染到界面
    13. return <RealPage />
    14. }

    import() 这个语句完全是由 Webpack 进行处理的。Webpack 会将以“./RealProfilePage”模块为起点的所有依赖模块，单独打成一个包。并且，Webpack 还会生成代码，用于按需加载这个模块。

  • 按业务模块为目标去做隔离，尽量在每个模块的起始页面去定义这个拆分点

    使用 react-lodable，实现组件的异步加载

    ```javascript import Loadable from “react-loadable”;

// 创建一个显示加载状态的组件 function Loading({ error }) { return error ? ‘Failed’ : ‘Loading’; } // 创建加载器组件 const HelloLazyLoad = Loadable({ loader: () => import(“./RealHelloLazyLoad”), loading: Loading, }); ```

使用 service worker 缓存前端资源

d7b22ce8e29eb1a8bee2e2c44a4b82f1.webp

参考资料

  1. 两年React老兵的总结 - 如何组织React项目
  2. React Hooks 设计思想 #12
  3. React Hooks Explained: useImperativeHandle
  4. 13 useImperativeHandle基础用法