Question

我最近开始在我的react应用程序中构建自定义钩子，并一直关注reacts网站上的文档，但是，我正在构建的钩子不需要返回值，因为它们在init上为redux设置了数据。

示例；


protected Object toJsonObject() {
    Map<String, Object> result = Maps.newLinkedHashMap();

    if (arrayElement()) {
      return handleArrayElement(result);
    }

    for (NameValue value : values) {
      result.put(value.getName(), toJsonValue(value.getValue()));
    }

    return result;
  }

我找不到明确说明钩子需要返回任何东西的文档，但是，我找不到钩子不返回任何东西的示例。有人可以建议这种方法是否正确吗？

Answer 1

是的，您的方法是正确的。 React 钩子不需要返回任何东西。 React documentation 声明：

<块引用>

我们不必从效果中返回命名函数。我们称之为在此处进行清理以阐明其目的，但您可以返回一个箭头函数或称之为不同的东西。

作为参数传递给钩子的函数的返回值在它所属的 React 组件的生命周期中有特殊用途。本质上，该返回值应该是一个函数，并在带有钩子的组件重新渲染或卸载之前执行。 React 文档将这种钩子称为“清除效果”。

React 文档使用下面的示例来展示 useEffect 钩子的样子：

const [count, setCount] = useState(0);

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
  // Update the document title using the browser API
  document.title = `You clicked ${count} times`;
});

如您所见，用作 useEffect 参数的匿名函数没有 return 语句。

您可以通过稍微更改函数以记录返回值来验证这一点：

const count = 0;

const a = () => {
  // Update the document title using the browser API
  document.title = `You clicked ${count} times`;
}

console.log(a());

这会打印 undefined。

您还可以在 console.log 函数上使用 useEffect 以查看它也返回 undefined。

如果你把钩子改成这样：

useEffect(() => {
  // Update the document title using the browser API
  document.title = `You clicked ${count} times`;
  return () => {
    console.log('cleanup');
  }
});

每次重新渲染或卸载组件时，您都会看到 "cleanup" 消息。您必须通过某种方式更新组件的状态来触发重新渲染。

做反应挂钩需要返回一个值

1 个答案: