如何使用 React hooks 生成随机颜色？

介绍

React Hooks 是 React16.8 推出的新特性，它可以让我们在无需编写 class 的情况下使用 state 和其他 React 特性。在 React 应用中，有时我们需要为组件动态生成颜色，本文将介绍如何使用 React Hooks 生成随机颜色。

实现

我们先来看下使用 React Hooks 如何在组件中生成随机颜色：

import React, { useState } from "react";

function RandomColor() {
  const [color, setColor] = useState("#000");

  const changeColor = () => {
    setColor(`#${Math.random().toString(16).slice(2, 8)}`);
  };

  return (
    <div>
      <h1 style={{ color: color }}>Hello World!</h1>
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

export default RandomColor;

我们首先使用 useState() 方法创建状态 color，并将其初始值设置为黑色 (#000)。接着我们编写 changeColor() 方法，该方法使用了 JavaScript Math.random() 方法生成 16 进制随机数，然后通过 slice() 方法将一个字符串转换为 6 位随机字符串，最终拼接成颜色字符串作为 color 的新值。最后在 JSX 中通过 style 属性将 color 应用到文本上，并使用 onClick 事件绑定到按钮上，使按钮被点击时生成一个随机颜色。

结语

通过本文的介绍，我们学习了如何使用 React Hooks 在组件中生成随机颜色。这个小技巧可以为我们在构建 React 应用时提供很大的灵活性，你可以为你的组件生成风格独特的配色方案。