用 React Hooks 做 Image

2023-09-28 10:28:18

好的，以下是使用 React Hooks 实现 Image 组件的文章：

在 React 中，利用 hooks 可以更轻松地编写函数式组件，让组件的代码更具可读性和可维护性。本文将通过实现一个 Image 组件的例子，详细讲解如何从需求分析到利用 hooks 具体实现一个函数式组件，并对 React Hooks 的使用进行深入剖析。

需求分析

首先，我们先来分析一下 Image 组件的需求：

该组件需要接受一个 src 属性，用于指定要加载的图片的路径。
该组件需要接受一个 alt 属性，用于指定图片的替代文本，以便在图片无法加载时显示。
该组件需要能够响应式地调整图片的大小。
该组件需要能够处理图片加载失败的情况。

利用 hooks 实现 Image 组件

了解了 Image 组件的需求后，我们就可以开始利用 hooks 来实现它了。

首先，我们需要创建一个新的 React 函数式组件：

import React from 'react';

const Image = ({ src, alt }) => {
  return (
    <img src={src} alt={alt} />
  );
};

export default Image;

这个组件接受两个属性：src 和 alt。src 属性用于指定要加载的图片的路径，而 alt 属性用于指定图片的替代文本。

接下来，我们需要使用 hooks 来实现图片的响应式调整和加载失败的处理。

首先，我们使用 useState hook 来创建一个名为 size 的状态变量，用于存储图片的大小。

import React, { useState } from 'react';

const Image = ({ src, alt }) => {
  const [size, setSize] = useState('small');

  return (
    <img src={src} alt={alt} style={{ width: size }} />
  );
};

export default Image;

然后，我们使用 useEffect hook 来监听图片的加载状态。

import React, { useState, useEffect } from 'react';

const Image = ({ src, alt }) => {
  const [size, setSize] = useState('small');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const image = new Image();
    image.onload = () => {
      setLoading(false);
      setSize('large');
    };
    image.onerror = () => {
      setLoading(false);
    };
    image.src = src;
  }, [src]);

  return (
    <img src={src} alt={alt} style={{ width: size }} />
  );
};

export default Image;

这个 useEffect hook 在组件挂载后立即执行。它首先创建一个新的 Image 对象，然后监听 Image 对象的加载事件和错误事件。如果图片加载成功，则将 loading 状态变量设置为 false，并将 size 状态变量设置为 large。如果图片加载失败，则将 loading 状态变量设置为 false。

最后，我们在组件中使用 loading 状态变量来控制图片的显示。如果 loading 状态变量为 true，则显示一个加载中占位符。如果 loading 状态变量为 false，则显示图片。

import React, { useState, useEffect } from 'react';

const Image = ({ src, alt }) => {
  const [size, setSize] = useState('small');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const image = new Image();
    image.onload = () => {
      setLoading(false);
      setSize('large');
    };
    image.onerror = () => {
      setLoading(false);
    };
    image.src = src;
  }, [src]);

  return (
    <>
      {loading && <div>Loading...</div>}
      {!loading && <img src={src} alt={alt} style={{ width: size }} />}
    </>
  );
};

export default Image;