反应钩子我应该在哪里执行函数?父母还是孩子?

Question

我正在使用 react 钩子开发一个 react 原生应用程序。我应该在每个功能组件中执行函数还是在屏幕组件中执行它并将数据传递回组件，但这听起来不适合 react 钩子的想法。 例如：

import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

并在屏幕组件中呈现此组件？或 哪一个是做反应钩子的最佳实践。

更新

我想说的是，我应该在父级还是子项中执行函数。在我的工作中，我的父组件包含许多函数和代码，我意识到我的孩子没有太多代码。 例如，从 api 获取数据并执行count功能。我应该在父级中执行所有代码吗？或者将 API 数据传递给子级以执行count？ 这就是我要质疑的。

Answer 1

这完全取决于哪个Components拥有该州。在上面的代码中，

Screen--> 父组件

Example-> 子组件

在这种情况下，count应该是child的本地是有意义的，parent应该不需要对计数有任何了解。如果你把它移到parent，那么parent组件将被不必要地渲染(这不是一个真正的问题，因为 React 真的很快，但如果你的应用程序开始增长，这可能是一个问题(。

如果在parent组件中需要计数来计算某些内容，那么将count计算移动到parent然后将其作为道具传递给child是有意义的。这完全取决于行为。