React 钩子需要返回一个值吗? [英] Do React hooks need to return a value?

问题描述

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

I've recently started to build out custom hooks in my React application and have been following the documentation on the React website. However, the hooks which I am building require no return value as they set up data for Redux on initialization.

示例:

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


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

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

I can't find documentation explicitly stating that a hook needs to return anything. However, I cannot find an example of a hook not returning something. Can someone advise on if this approach is correct?

推荐答案

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

Yes, your approach is correct. React hooks are not required to return anything. The React documentation states that:

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

We don’t have to return a named function from the effect. We called it cleanup here to clarify its purpose, but you could return an arrow function or call it something different.

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

The return value of a function that is passed as an argument to a hook has a special use in the lifecycle of the React component it belongs to. Essentially, that return value is expected to be a function and executes before the component with the hook re-renders or is unmounted. React documentation call this kind of hook an "effect with cleanup."

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

The React documentation uses the example below to show what a useEffect hook looks like:

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 语句.

As you can see, the anonymous function that is used as an argument to useEffect does not have a return statement.

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

You can verify this by changing the function a little bit to log the return value:

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.

You can also use console.log on the useEffect function to see that it also returns undefined.

如果你把钩子改成这样:

If you changed the hook to this:

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

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

You would see the "cleanup" message every time the component re-renders or is unmounted. You would have to trigger the re-render by updating the state of the component in some way.

这篇关于React 钩子需要返回一个值吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！