评论和另一个答案中有一些更高级的信息，但是我想讲一些关于React如何工作的更基本的知识，以及：

如果我有几个组件，但是假设我有15个或更多的组件可以读取/保存数据，这可能很好，是可以还是应该避免？

在React中，即使组件被“重新渲染”……从某种意义上说，它的功能被重复调用……在最重要（即昂贵）的地方，它也不会“重新渲染”：在实际的DOM中。或更确切地说，它不会除非该函数返回不同的内容。

因此，每当您在React组件中看到console.log时，这仅意味着涉及了虚拟 DOM，因此更改的成本是很多较低（同样，假设您的组件不断返回相同的JSX）。

当然，现在任何函数调用仍然需要付出一定的代价，并且您最终希望最大程度地减少组件渲染的次数，但是同时记住重要的程序员Donald Knuth的话很重要：

过早的优化是万恶之源

如果您甚至没有看到任何性能问题的提示，那么就担心组件在虚拟DOM中呈现多少次会让您错过React的一些天才：您交易大量人类甚至无法观察到的用于“性能优化”的最昂贵的资源（您的想法）。

相反，您绝对想阅读有关该库的更多信息，以了解哪些触发器触发了调用（本质上是道具/状态/上下文更改，但是有重要的细节），并尝试理解和改进以这种方式表现。学习所有在React中“升级”的部分。

但是，尤其是，如果您只是在学习库，您真的不需要担心需要额外渲染几次特定组件，因为React的设计非常巧妙，我们关注的是组件的功能，而不是确切地知道它的工作方式……或者至少在大多数情况下（我当然不想让它听起来像React还是“神奇的性能子弹”）。

如果组件中的任何状态发生更改，它将被重新呈现。如果不希望在组件之间共享状态，请考虑将状态下移到按钮组件本身中。这只会导致<AddButton/>被触发时重新渲染onClick组件。

const AddButton = () => {
 const [add,setAdd] = React.useState(0)
 const handleAdd = () => setAdd(add + 1)

  return ( <Button title="Add" onClick={handleAdd} count={add} />)
 }