如何将类组件中的setState重写为功能组件中的useState？答案

【问题标题】：How to rewrite setState from class component to useState in functional component?如何将类组件中的setState重写为功能组件中的useState？
【发布时间】：2021-03-10 18:39:06
【问题描述】：

我想在我的 React 项目中使用这个颜色选择器https://casesandberg.github.io/react-color/#about

这是来自文档的示例

import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <SketchPicker
        color={ this.state.background }
        onChangeComplete={ this.handleChangeComplete }
      />
    );
  }
}

但它是类组件。我在我的项目中使用了 useState 功能。其中之一是

const [projectColor, setProjectColor] = useState("#F9A8D4");

默认选择颜色。 如何重写这个类示例以与 usestate 一起使用？我不明白...

onChangeComplete={ this.handleChangeComplete }

就像 setState？这个颜色变量是从哪里来的？

handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

这是我的完整代码（我不知道传递给 setProjectColor 的是什么）。 Colors 是包含颜色的数组，颜色是默认选择的颜色。

const [projectColor, setProjectColor] = useState("#F9A8D4");
  const colors = [
    "#FECACA",
    "#F9A8D4",
    "#FDE68A",
    "#A7F3D0",
    "#BFDBFE",
    "#E5E7EB",
  ];

  const colorPicker = () => {
    return (
      <div className="p-4">
        <CirclePicker
          colors={colors}
          color={projectColor}
          onChangeComplete={(e) => setProjectColor(projectColor)}
        />
      </div>
    );
  };

【问题讨论】：

标签： reactjs react-hooks use-state color-picker

【解决方案1】：

只需要使用onChangeComplete回调的color对象即可：

onChangeComplete={(color) => setProjectColor(color.hex)

完整示例：

const [projectColor, setProjectColor] = useState("#F9A8D4");

return (
  <div className="p-4">
    <CirclePicker
      colors={colors}
      color={projectColor}
      onChangeComplete={(color) => setProjectColor(color.hex)}
    />
  </div>
);

【讨论】：

【解决方案2】：

你可以重写你的函数：

 handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

进入：

const handleChangeComplete = React.useCallback((color) => setProjectColor(color), []);

【讨论】：

你不需要useCallback，因为useState的setter函数是稳定的。
不，您需要，因为在onChangeComplete={(color) => setProjectColor(color.hex)} 的情况下，您的回调将在每次重新渲染组件时重新创建。此外，它还会影响所有子组件的重新渲染，因为引用已更改
在你的例子中你可以通过onChangeComplete={setProjectColor}
是的，没关系，虽然我更喜欢单独的回调，因为通常一段时间后你需要添加一些额外的逻辑，所以无论如何你都要重构你的代码并添加一个单独的回调。