Reactjs 如何返回组件和函数，或者什么'；还有什么选择？

[反应]组件之间发送/共享功能的“方式”是什么

用（无用的）代码更好地解释

• 这里我没有问题，因为所有内容都在同一个组件中（）

import React，{useState}来自“React”；
导出默认函数App（）{
const[bookmarks，setBookmarks]=useState（）；
const letbook=（）=>setBookmarks（“你好”）；
康斯特卡=（）=>嘿；
常量MyCom=（）=>{
返回；
};
返回(
你好，代码沙盒
{书签}
);
}

• 但是，如果现在我想拆分代码，我该怎么做呢？问题是如何共享letbook（此代码不起作用）

import React，{useState}来自“React”；
导出默认函数App（）{
康斯特卡=（）=>嘿；
返回(
你好，代码沙盒
{书签}
);
}
常量MyCom=（）=>{
const[bookmarks，setBookmarks]=useState（）；
const letbook=（）=>setBookmarks（“你好”）；
返回(
);
};

---

• 我可以使用一个钩子返回组件和函数

const[letbook，MyCom]=useMyCom

但不建议这样做（）

• 然后我可以使用一个钩子和一个组件，就像下面的代码一样，但是代码本身对我来说似乎很模糊，以至于我怀疑是否应该拆分代码

除非（这就是问题所在）是否有更聪明的方法来实现这一点

import React，{useState}来自“React”；
导出默认函数App（）{
const[bookmarks，setBookmarks，letbook]=useMyCom（）；
返回(
你好，代码沙盒
} />
{书签}
);
}
const Card=（{letbook}）=>嘿；
const useMyCom=（）=>{
const[bookmarks，setBookmarks]=useState（）；
const letbook=（）=>setBookmarks（“你好”）；
return[书签、setBookmarks、letbook]；
};
const MyCom=（{letbook，card}）=>{card（letbook）}；

拆分组件以重用它绝对是个好主意。但请确保您正在使用和操作同一文件中的单个状态，并将其作为道具传递。此外，避免重新渲染子组件也很重要。仅当主组件更改重新渲染子组件所需的道具时

import React, { useState, memo } from "react";

const MyCom = memo(props => {
  return <div>{props.bookmarks}</div>;
});

export default function App() {
  const [bookmarks, setBookmarks] = useState();
  const letbook = () => setBookmarks("hello");

  return (
    <div className="App">
      <h1 onClick={letbook}>Hello CodeSandbox</h1>
      <MyCom bookmarks={bookmarks} />
    </div>
  );
}

import React，{useState，memo}来自“React”；
const MyCom=备忘录（道具=>{
返回{props.bookmarks}；
});
导出默认函数App（）{
const[bookmarks，setBookmarks]=useState（）；
const letbook=（）=>setBookmarks（“你好”）；
返回(
你好，代码沙盒
);
}

更新了改进示例的问题——还有，为什么示例中需要备忘录？备忘录用于防止在道具值不变时重新渲染。这对性能非常重要。是的，但是（在您的示例中）作为主组件之外的组件，是否需要memo？使用和不使用memo测试此代码。检查控制台，让我知道有什么区别。谢谢你的例子：）我看到两个按钮中的任何一个实际上都在渲染没有备忘录的所有内容，谢谢！