Forem: Yao

React forwardRef()：如何将引用传递给子组件

Yao — Wed, 19 Apr 2023 06:59:06 +0000

要访问在组件中渲染的 DOM 元素，你可以使用由 useRef() 钩子创建的 ref。

但是，如果你需要访问子组件的 DOM 元素怎么办？那么一个简单的 ref 是不够的，你必须将 refs 与 React.forwardRef() 结合起来：一种称为 refs 转发的技术。

让我们看看它是如何工作的。

1.子组件中的引用

有些情况下你必须使用 DOM，因为现有的 React 抽象（组件、状态、props、钩子、context）没有涵盖所有可能的用例：

在 DOM 元素上调用方法来管理焦点、滚动和文本选择
集成不了 React 抽象的第三方脚本
使用动画库

如何直接从组件主体访问 DOM 元素：

import { useRef, useEffect } from 'react'
export function Parent() {
  const elementRef = useRef() // create the ref
  useEffect(() => {
    // after mounting
    console.log(elementRef.current) // logs <div>Hello, World!</div>
  }, [])
  return <div ref={elementRef}>Hello, World!</div> // assign the ref
}

const elementRef = useRef() 创建一个引用。然后将 elementRef 赋给标签的 ref 属性：<div ref="elementRef">。

挂载后的 elementRef 将包含 DOM 元素实例（当组件挂载时 deps 会检测到带有空数组的 useEffect() 挂钩）。

那么这种方法的局限性是什么？当元素不是直接呈现在组件内，而是呈现在子组件中时，就会出现问题。

通过将 <div>Hello, World!</div> 提取到子组件中来修改前面的示例。此外，让我们在上创建一个 prop ref，为其分配 elementRef：

import { useRef, useEffect } from 'react'
export function Parent() {
  const elementRef = useRef()
  useEffect(() => {
    // Does not work!
    console.log(elementRef.current) // logs undefined
  }, [])
  return <Child ref={elementRef} /> // assign the ref
}
function Child({ ref }) { // a new component
  return <div ref={ref}>Hello, World!</div>
}

这段代码有效吗？挂载后会发现 elementRef.current包含undefined。

<Parent> 无法从子组件访问 DOM 元素。

React 还会抛出一个有用的警告：Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

2.forwardRef()

现在是介绍 forwardRef() 的时候了。

forwardRef() 是包装 React 组件的高阶组件。包装组件的工作方式与原始组件相同，但还接收作为第二个参数的 ref：来自父组件的转发 ref。

将子组件包装到 forwardRef() 中，目的是将父组件的 elementRef 与子组件的 <div>Hello, World!</div> 连接起来：

import { useRef, useEffect, forwardRef } from 'react'
export function Parent() {
  const elementRef = useRef()
  useEffect(() => {
    // Works!
    console.log(elementRef.current) // logs <div>Hello, World!</div>
  }, [])
  return <Child ref={elementRef} /> // assign the ref
}
const Child = forwardRef(function(props, ref) {
  return <div ref={ref}>Hello, World!</div>
})

父组件将 elementRef 赋值给子组件。然后，由于被包装到 forwardRef() 中，子组件从第二个参数获取 ref 并在其元素

上使用它。

在父组件中安装 elementRef.current 后，包含来自子组件的 DOM 元素。打开演示：有效

这就是 forwardRef() 的目的：让父组件访问子组件中的 DOM 元素。

3. useImperativeHandle()

如果你想从子组件访问其他东西怎么办？例如，一个简单的函数来聚焦输入。

这就是 useImperativeHandle() 钩子可以帮助你的地方。

import { forwardRef, useImperativeHandle } from 'react'
const MyComponent = forwardRef(function(props, ref) {
  useImperativeHandle(ref, function getRefValue() {
    return {
      // new ref value...
      method1() { },
      method2() { }
    }
  }, []) // dependencies
  return <div>...</div>
}

useImperativeHandle(ref, getRefValue, deps) 是内置的 React 钩子，它接受 3 个参数：转发的 ref、返回新 ref 值的函数和依赖项数组。

getRefValue() 函数的返回值成为转发 ref 的值。这是 useImperativeHandle() 的主要好处：可以根据需要自定义转发的 ref 值。

例如，使用钩子并为父级提供一个具有方法 focus() 和 blur() 的对象：

import { useRef, forwardRef, useImperativeHandle } from 'react'
export function Main() {
  const methodsRef = useRef()
  const focus = () => methodsRef.current.focus()
  const blur = () => methodsRef.current.blur()
  return (
    <>
      <FocusableInput ref={methodsRef} />
      <button onClick={focus}>Focus input</button>
      <button onClick={blur}>Blur input</button>
    </>
  )
}
const FocusableInput = forwardRef(function (props, ref) {
  const inputRef = useRef()
  useImperativeHandle(ref, // forwarded ref
    function () {
      return {
        focus() { inputRef.current.focus() },
        blur() { inputRef.current.blur() }
      } // the forwarded ref value
    }, [])
  return <input type="text" ref={inputRef} />
})

useImperativeHandle(ref, ..., []) 为父级提供一个具有 focus() 和 blur() 方法的对象。

记住 useImperativeHandle() 只能在包裹在 forwardRef() 中的组件内部使用。

4.深层次的 refs 转发

可以在组件层次结构中向下转发超过 1 级的引用。只需将每个子组件、孙组件等包装在 forwardRef() 中，然后向下传递 ref 直到到达目标 DOM 元素。

将 elementRef 转发两次以从孙组件访问 DOM 元素：

import { forwardRef, useRef, useEffect } from "react";
export function Parent() {
  const elementRef = useRef()
  useEffect(() => {
    console.log(elementRef.current); // logs <div>Deep!</div>
  }, [])
  return <Child ref={elementRef} />
}
const Child = forwardRef(function (props, ref) {
  return <GrandChild ref={ref} />
})
const GrandChild = forwardRef(function (props, ref) {
  return <div ref={ref}>Deep!</div>
})

elementRef 被转发给子组件，然后子组件将相同的 ref 转发给孙组件，孙组件最终将 ref 连接到 <div ref={ref}>Deep!</div>。

使用两次转发父组件 elementRef 可以访问孙组件中的 <div ref={ref}>Deep!</div>。

尽量将转发保持在最低限度，以避免增加代码的复杂性。

如何使用 JavaScript 下载文件

Yao — Thu, 05 Jan 2023 10:50:14 +0000

下载文件是上网的一个重要方面。每天从 Internet 下载大量文件，从二进制文件（如应用程序、图像、视频和音频）到纯文本文件。
Web 开发人员想将此功能添加到应用程序中，那么可以按照以下方法进行操作。

我们将检查 3 种不同的方法：

仅使用 HTML 元素的基本模式；
使用带有 Fetch API 和 HTML 元素的 JavaScript；
使用 XMLHttpRequest 和 HTML 元素，但在更复杂的场景中，我们实施一个系统来衡量进度；

方法一

第一种也是最简单的方法意味着创建一个具有 download 属性的 a 标签。
根据定义，download 属性指定当用户单击超链接时将下载目标（href 属性中指定的文件）。

此外，使用此下载属性，我们可以在下载文件后指定文件的新名称。因此，如果我们想下载具有特定名称的文件，我们可以使用此属性来控制它。但是，当本机下载窗口出现时，用户仍然可以更改名称，但我们提供的名称将是默认名称。

如果省略该值，则使用原始文件名。

<a href="https://t-bucket.sfo3.digitaloceanspaces.com/100mb.txt" download>Download 100mb.txt</a>

当我们不需要根据这个下载过程做任何操作时，这个方法就很棒。同时，即使我们无法使用 JavaScript 呈现 a 标签，我们也可以使用此方法：

function downloadUsingAnchorElement() {
  const anchor = document.createElement('a');
  anchor.href = IMG_URL;
  anchor.download = FILE_NAME;

  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}

上面的函数做同样的事情，只是我们动态创建 a 标签，仅用于此下载操作，然后我们将其删除。

IMG_URL 是我们要下载的图片的URL；
FILE_NAME 为文件下载后的新名称；

此方法的局限性在于它必须遵循同源策略，因此该属性适用于同源 URL。

一个常见的场景是，当你想从另一台服务器下载图像时，浏览器没有下载它，而是在新选项卡中打开它。

此方法的关键方面是下载过程将自动开始，并且可以在浏览器中本地查看。

方法二

第二种方法和第三种方法使用与 a 标签相同的技术，但我们不提供图像 URL，而是将文件的内容转换为 Blob，然后使用 createObjectURL 方法从中创建 DOMString。

async function downloadUsingFetch() {
  const image = await fetch(IMG_URL);
  const imageBlog = await image.blob();
  const imageURL = URL.createObjectURL(imageBlog);

  const anchor = document.createElement('a');
  anchor.href = imageURL;
  anchor.download = FILE_NAME;

  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);

  URL.revokeObjectURL(imageURL);
}

请注意，最后我们使用了 URL.revokeObjectURL ，这在内存管理方面很重要。使用 URL.createObjectURL 时会创建一个新的对象 URL，即使它是使用相同的 blob 对象调用的。

无论何时创建对象 URL，它都会在创建它的文档的整个生命周期内保持不变。浏览器将在卸载文档时释放所有对象 URL。但是，重要的是在不再需要对象 URL 时释放它们，以提高性能并最大限度地减少内存使用。

此方法的关键方面是下载过程将自动开始，但在我们的应用程序内，只有在下载完成后才会传递给浏览器。

请注意，在上面的 GIF 中，一旦我们单击“下载”按钮，似乎什么也没有发生，因为下载在我们的应用程序中作为异步任务发生，一旦完成，它将传递给浏览器。

一旦该浏览器窗口出现并且我们单击保存，该文件将自动保存在我们的计算机上。

使用这种方法，我们现在可以下载任何类型的文件，而不管源服务器是什么。然而，问题是因为下载发生在我们的应用程序内部，用户可能认为他点击时什么也没发生，因此我们需要通过实施进度测量来管理大文件下载。

同时，当我们需要在文件下载完成后在应用程序中执行某些操作时，此方法很有用。显示一条消息，向后端发送请求渲染一个新页面，等等......

方法三

第三种方法与第二种方法类似，我们仍将使用 Blob 和 createObjectURL，但我们将使用 XMLHttpRequest 而不是使用 Fetch API。

我们使用 XMLHttpRequest 而不是 Fetch，因为目前 Fetch API 不提供进度测量接口，而 XMLHttpRequest 提供。

function downloadWithProgress() {
  const startTime = new Date().getTime();

  request = new XMLHttpRequest();

  request.responseType = "blob";
  request.open("get", IMG_URL, true);
  request.send();

  request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      const imageURL = window.URL.createObjectURL(this.response);

      const anchor = document.createElement("a");
      anchor.href = imageURL;
      anchor.download = FILE_NAME;
      document.body.appendChild(anchor);
      anchor.click();
    }
  };

  request.onprogress = function (e) {
    const percent_complete = Math.floor((e.loaded / e.total) * 100);

    const duration = (new Date().getTime() - startTime) / 1000;
    const bps = e.loaded / duration;

    const kbps = Math.floor(bps / 1024);

    const time = (e.total - e.loaded) / bps;
    const seconds = Math.floor(time % 60);
    const minutes = Math.floor(time / 60);
    console.log(
      `${percent_complete}% - ${kbps} Kbps - ${minutes} min ${seconds} sec remaining`
    );
  }
}

开始和 onreadystatechange 块类似于第二个函数。将响应下载为 Blob 对象，创建 DOMString，并使用锚元素下载文件。

Insideonprogress 我们使用 e.loaded 和 e.total 值来计算进度的百分比和经过的时间，以及下载速度和剩余时间。

请注意，在上面的 GIF 中，我们的行为与第二种方法相同，只是现在我们可以监控进度。文件下载完成后，将被发送到浏览器，然后立即保存到磁盘。

总结

上述每个方法都代表了对前一个方法的更新。

第一种方法是最简单的。在此，我们只是将下载过程转发给浏览器以在本地进行管理。当应用程序不必根据加载状态执行某些操作时，此方法是首选方法。

在第二种情况下，我们在内部管理下载并仅在下载完成后才将其发送到浏览器。通过这种方式，我们可以控制应用程序内部的下载，我们可以根据其状态做出反应。此方法适用于快速下载的小文件，但当文件太大时，如果 UI 上没有任何提示用户正在下载，用户可能会认为应用程序有问题。

在最后一个方法中，我们实现了自己的进度测量，这与浏览器中的类似。

利用 svg 实现折线图

Yao — Sun, 30 Oct 2022 08:21:18 +0000

在web开发中数据可视化在企业中后台是很重要的一部分，常见的图表有折线图、柱状图、饼图...等等。开发者为了效率和效果会使用第三方图表库，例如：echarts、antV、D3，这些图表库的底层实现包括 canvas、SVG、webGL，接下来我会使用 svg 来实现一个简单的折线图。

创建折线图组件

创建一个名为 <LineChart /> 的新组件并将文件命名为 line-chart.js。

组件接受一个名为 data 的 props。

import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';

const LineChart = ({ data }) => {
  return null;
};

LineChart.propTypes = {
  /** The shape of the data  */
  data: PropTypes.arrayOf(
    PropTypes.shape({
      total: PropTypes.number.isRequired,
      date: PropTypes.string.isRequired
    })
  ).isRequired
};

export default LineChart;

设置这线图

这步设置折线图不同部分的变量

import React from 'react';
import PropTypes from 'prop-types';

const LineChart = ({ data }) => {
  const chartWidth = 1200; // SVG 视图框的宽度
  const chartHeight = 600; // SVG 视图框的高度
  const offsetY = 40; // 用于定位刻度
  const paddingX = 50; // 折线图周围的左右内边距
  const paddingY = 90; // 折线图周围的上下内边距
  const maxY = Math.max(...data.map((item) => item.total)); // 数据数组中的最大总值
  const guides = [...Array(16).keys()]; // 一个空数组，用于确定指南的数量

  return null;
};

LineChart.propTypes = {
  /** The shape of the data  */
  data: PropTypes.arrayOf(
    PropTypes.shape({
      total: PropTypes.number.isRequired,
      date: PropTypes.string.isRequired
    })
  ).isRequired
};

export default LineChart;

properties 是使用来自 data prop 的值和上一步中定义的变量的组合创建的。每个返回值都用于折线图的不同部分。

const LineChart = ({ data }) => {
  // ...

  const properties = data.map((property, index) => {
    const { total, date } = property;
    const x = (index / data.length) * (chartWidth - paddingX)  paddingX / 2;
    const y = chartHeight - offsetY - (total / maxY) * (chartHeight - (paddingY + offsetY)) - paddingY + offsetY;
    return {
      total: total,
      date: date,
      x: x,
      y: y
    };
  });

  return null;
};

这里要查看的两个重要值是 x 和 y。这些变量是通过组合前面定义的一些变量和 .map 中的索引值来创建的。

创建 X 坐标

x 坐标用于创建标记的位置、值和折线点的 x 值。

const x = (index / data.length) * (chartWidth - paddingX) + paddingX / 2;

x 坐标是通过使用 .map 中的索引值并将其除以在 data prop 上传递的数据的长度来创建的。将其乘以 chartWidth 并减去 paddingX 值可确保 x 坐标值永远不会超过图表宽度的范围。

创建 Y 坐标

y 坐标用于创建标记的位置、值和折线点的 y 值。

const y = chartHeight - offsetY - (total / maxY) * (chartHeight - (paddingY + offsetY)) - paddingY + offsetY;

y 坐标是通过将总数除以 maxY 值再乘以 chartHeight 减去 paddingY 值来创建的。作为一个额外的步骤，减去 paddingY 加上 offsetY 值，这为图表底部的刻度创建了一些额外的空间。

创建点数组

SVG Polyline 元素可用于创建由点连接的线。要为折线创建点，您可以使用属性数组中的 x 和 y 值，并将它们作为 x、y 位置的数组返回。

  const points = properties.map((point) => {
    const { x, y } = point;
    return `${x},${y}`;
  });

点数组将返回类似于下面的内容。数组中的每个索引都包含 x 和 y 坐标。

[
  '25,25', '47,232', '69,40', '91,235' ...
]

创建 SVG

创建一个新的元素，定义 viewBox 属性并将角色设置为presentation。

const LineChart = ({ data }) => {
   // ... 
  return (
   <svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} role="presentation">

   </svg>
  );
};

创建折线

创建一个新的 <polyline /> 元素，将填充设置为 none 并添加相关 class来设置样式。还可以使用属性定义strokeWidth。使用 points 属性，可以传递 points 数组返回的值。

<polyline fill="none" className="stroke-gray-400" strokeWidth={2} points={points} />

创建标记和值

使用 properties 数组的返回值，现在可以添加和定位 svg 元素以显示数据数组中的总数。

  return (
    <svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} role="presentation">
      <polyline fill="none" className="stroke-gray-400" strokeWidth={2} points={points} />
      {properties.map((property, index) => {
        const { total, date, x, y } = property;

        return (
          <g key={index}>
            <circle className="stroke-gray-400 fill-white" cx={x} cy={y} r={12} strokeWidth={2} />
            <text x={x} y={y + 2.8} textAnchor="middle" fontSize={8} className="font-bold fill-gray-800 select-none">
              {total}
            </text>
          </g>
        );
      })}
    </svg>
  );

元素使用 x 和 y 属性使用 cx 和 cy 属性定位，并使用 r 属性指定半径为 12。您可以添加自己的类名和 strokeWidth 的值以实现所需的外观。

元素也使用 x 和 y 属性使用 x 和 y 属性定位。元素接受子元素，因此添加 total 属性以显示它。我在 y 中添加了一个额外的 2.8，以确保文本在中垂直居中。可以添加自己的类名或属性来获得所需的外观。

创建刻度

return (
          <g key={index}>
            ...
            <g transform={`translate(${x} ${chartHeight - (paddingY - offsetY)})`}>
              <text transform="rotate(45)" textAnchor="start" transformorigin="50% 50%" fontSize={10} className="fill-gray-800 select-none">
                {new Date(date).toLocaleDateString(undefined, { year: '2-digit', month: 'numeric', day: 'numeric' })}
              </text>
            </g>
          </g>
        );

刻度的创建方式略有不同，元素被包裹在中。

这是为了创建一个新的坐标系，以便在对文本应用旋转时，其顶部/左侧位置是根据而不是元素的顶部和左侧位置计算的。

元素不支持 x 或 y 属性，因此您将使用 transform 属性并为 x 和 y 位置提供平移值。我还减去了 paddingY 和 offsetY 值来正确定位刻度。

创建指南

指南是最后添加的元素；但是这次你将迭代guides数组，而不是遍历properties数组。
这只是一个空数组，索引用于为 React 提供键。 y 坐标的创建方式与以前类似，其中创建了一个比率以确保 y 位置保持在边界内并且不与刻度重叠。

const LineChart = ({ data }) => {
  return (
    <svg viewBox={`0 0 ${chartWidth} ${chartHeight}`} role="presentation">
       ...
      {guides.map((_, index) => {
        const ratio = index / guides.length;
        const y = chartHeight - paddingY - chartHeight * ratio;

        return <polyline key={index} className="stroke-gray-200" fill="none" strokeWidth={1} points={`${paddingX / 2},${y} ${chartWidth - paddingX / 2},${y}`} />;
      })}
       ...
    </svg>
  );
};

使用从属性数组返回的值，可以添加任意数量的不同 SVG 元素，以帮助显示来自不同类型数据的不同值。

x 和 y 属性应该是您所需要的。虽然创建它们有点棘手，但它们为您想添加到图表中的任何新元素创建了边界。

为你的应用添加明暗主题

Yao — Mon, 08 Aug 2022 08:12:00 +0000

在我们开发的 React、Vue 等现代应用中，经常可以看到明暗主题切换功能（如下图），它是如何实现的呢？市面有很多种实现方案，接下来让我们逐个绍并分析它们的优劣。

方案一：CSS 变量

方案二：CSS in JS

方案三：Less/Sass 变量 + 两份主题 css 构建产物

javascript 中常见的可中断执行编程范式

Yao — Mon, 04 Jul 2022 09:21:23 +0000

如何跳出嵌套循环语句？

在日常开发中，有时候会通过编写双重 for 循环语句来完成业务逻辑，跳出 for 循环使用 break; 语句，如果需要跳出双重 for 循环就需要定义 label 语句了

let num = 0;
outermost:
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    if (i === 5 && j === 5) {
      break outermost;
    }
    num++;
  }
}
console.log(num);

如何实现脚本执行“睡眠”

在 debug 阶段有时候需要用到下面的 sleep 函数来中断代码执行：模拟网络请求、暂停执行逻辑查看过渡效果。

function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

(async function () {
    console.log('开始执行' + new Date());
    await sleep(3000);
    console.log('等待3s后继续执行' + new Date());
})();

如何中止已经发起的网络请求

当用户频繁点击“提交”或“查询”按钮向后台发起请求时，为了获得优秀的用户体验和节省网络带宽，开发者需要对用户的点击行为进行约束，常见的方式有切换 loading 态处理，如下图所示

在点击按钮后切换成 loading 样式，这时在请求返回前是不能发起新的请求的，这样做有个弊端：当网络请求时间长一些的时候，用户无法取消当前请求，切换新的请求入参，发起新的请求。

解决方案：可以利用 JS 新特性 AbortController 来实现 fetch 请求的中断。演示代码如下：

function FooComponent(props) {
    useEffect(() => {
      const controller = new AbortController();
      const { signal } = controller;

      const request = (async () => {
        const data = await fetch(url, query, { signal });
        // perfom setData
      })();

      return () => controller.abort();
    }, [query]);

    return <>...</>;
}