React 钩子需要返回一个值吗?

Question

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

例：

// custom hook
export const useSetup() {
useEffect(() => {
if (data) fetch().then(data => dispatch(setInit(data)))
}, [dispatch])
}

// functional component
export function Details() {
useSetup()

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

Answer 1

是的，你的方法是正确的。React 钩子不需要返回任何东西。React 文档指出：

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

作为参数传递给钩子的函数的返回值在其所属的 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.

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

如果将钩子更改为以下内容：

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

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