英文:
Are there pitfalls with return value from cleanup function in useEffect of React 16+?
问题
以下是您要翻译的部分：
React文档包含了带有花括号的清理函数示例，不带返回语句，并写在一行内：
- 带有花括号且省略返回语句
useEffect(() => {
// 设置函数代码
// 清理函数代码
return () => {
connection.disconnect();
};
}, []);
- 省略花括号且不带返回语句
useEffect(() => {
// 设置函数代码
// 清理函数代码
return () => connection.disconnect();
}, []);
在Theo模拟面试中，当Dan Abramov担任面试对象时，在23:20分钟（https://youtu.be/uqII0AOW1NM?t=1400）时提到他遇到了从清理函数中不返回undefined的问题。再次强调：我重新阅读了文档，但没有找到任何提及此问题的地方。
在这里我有一个困境：如何正确编写重置函数？
英文:
React documentation contains code samples with the cleanup function with curly braces without return and written on one line:
- with curly braces and omitted return
useEffect(() => {
// setup function code
// cleanup function code
return () => {
connection.disconnect();
}
}, []);
- with curly braces omitted and without return
useEffect(() => {
// setup function code
// cleanup function code
return () => connection.disconnect();
}, []);
In Theo mock-interview where was Dan Abramov as Interviewee, at 23:20 min (https://youtu.be/uqII0AOW1NM?t=1400) said he had a problem with no returning undefined from the cleanup function. Again: I reread the doc and couldn't find any mention of this.
And here I have a dilemma: how to write the reset functions correctly at the moment?
答案1
得分: 0
以下是您要翻译的内容：
"在当时，useEffect 的类型定义是这样的（现在也是） - 只是为了用户体验。
现在明确指定类型必须是 void。您可以在编辑器中打开类型定义（您可以从 useEffect 的任何地方跳转）。
当库的作者写下 void 时 - 通常表示回调函数的结果不会以任何方式使用。
根据经验，如果 useEffect 是异步的并依赖于 Promise，直接写在没有花括号的情况下将不起作用（类似于 https://javascript.plainenglish.io/commons-mistakes-with-react-useeffect-hook-and-how-to-prevent-them-d0ca253fb1f7 中的类似示例）。
类型定义的作者额外增加了一些保护，防止返回某些内容（例如防止返回 Promise）。
他们通常是出于良好的目的而这样做的 - 以改善开发体验，避免麻烦和一些意外行为。
对于 React 本身来说，这可能并不重要。您甚至可以检查：
在排除异常并查看堆栈跟踪时，例如，以便找到调用析构函数的地方。
可以在源代码中看到有关反应器的所有类型定义 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts。
如果有的话，这些类型并不是由 React 本身的作者创建的。
英文:
At the time useEffect typings was like this (it is now too) - just for ux.
Now explicitly the type must be void. You can open typings in your editor (you can go from anywhere you useEffect)
When authors of libraries write void - it usually indicates that the result of the callback function will not be used in any way.
In experience, if useEffect is asynchronous and relies on promis, direct writing without curly braces won't work here (similar example from https://javascript.plainenglish.io/commons-mistakes-with-react-useeffect-hook-and-how-to-prevent-them-d0ca253fb1f7).
The authors of typings additionally threw in protections against something being returned (to protect against a Promise return, for example).
They did it in general more for a good purpose - to improve DX, to keep it out of trouble and some unexpected behaviour
For the react itself, it probably doesn't matter. You could even check:
inside throw out the exceptions and look at the stacktrace, for example, so come out to the place where Destructor is called.
All the typings for the reactor can be seen in the sources https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts.
If anything, the types are not created by the authors of React itself.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论