如何设计更优雅的 React 组件?( 三 ) _React

useEffect(() => {  setLogo(theme === "dark" ? "white" : "black");}, [theme]);任何包含在effect之内但是在其外部定义的变量，都应该包含在依赖项的数组中。
除此之外，还应该使用return来清理副作用：
useEffect(() => {  function onScroll() {    /*...*/  }  window.addEventListener("scroll", onScroll);  return () => window.removeEventListener("scroll", onScroll);}, []);6. 渲染内容组件的核心就是它的内容，React 组件的内容使用 JSX 语法定义并在浏览器中呈现为 HTML 。所以，推荐将函数组件的 return 语句尽可能靠近文件的顶部。其他一切都只是细节，它们应该放在文件较下的位置。
function Article(props: Props) {  // 变量声明  // effects  // ? 自定义的函数不建议放在 return 部分的前面  function getInitials() {    /*...*/  }  return /* content */;}export default Article;function Article(props: Props) {  // 变量声明  // effects  return /* content */;  // ? 自定义的函数建议放在 return 部分的后面  function getInitials() {    /*...*/  }}export default Article;难道return不应该放在函数的最后吗？其实不然，对于常规函数，肯定是要将return放在最后的。然而，React组件并不是简单的函数，它们通常包含具有各种用途的嵌套函数，例如事件处理程序。最后的return语句以及前面的一堆其他函数，实际上阻碍了代码的阅读，使得很难找到组件渲染的内容：

很难搜索该return语句，因为可能有来自其他嵌套函数的多个 return 语句；
在文件末尾滚动查找 return 语句并不能很容易找到它，因为返回的 JSX 块可能非常大。

当然，可以根据个人喜好来决定函数定义的位置。如果将函数放在return的下方，那么如果想要使用箭头函数来自定义函数，那就只能使用var来定义，因为let和const不存在变量提升，不能在定义的箭头函数之前使用它。
7. 部分渲染在处理大型 JSX 代码时，将某些内容块提取为单独的函数来渲染组件的一部分是很有帮助的，类似于将大型函数分解为多个较小的函数。

function Article(props: Props) {  // ...  return (    <article>      <h1>{props.title}</h1>      {renderBody()}      {renderFooter()}    </article>  );  function renderBody() {    return /* article body JSX */;  }  function renderFooter() {    return /* article footer JSX */;  }}export default Article;

可以给这些拆分出来的函数前面加上render前缀，以将它们与其他不返回 JSX 的函数区分开；
可以将这些函数放在return语句之后，以便将与内容相关的所有内容组合在一起；
无需向这些函数传递任何参数，因为它们可以访问props和组件定义的所有变量；

那为什么不将它们提取为组件呢？关于部分渲染函数其实是存在争议的，一种说法是要避免从组件内定义的任何函数中返回 JSX，另一种说法是将这些函数提取为单独的组件。

function Article(props: Props) {  // ...  return (    <article>      <h1>{props.title}</h1>      <ArticleBody {...props} />      <ArticleFooter {...props} />    </article>  );}export default Article;function ArticleBody(props: Props) {}function ArticleFooter(props: Props) {}

在这种情况下，就必须手动将子组件所需的局部变量通过