我一直在阅读（我只是使用react来创建测试应用程序来查看反应是如何工作的）状态应该存储在根组件中，当状态改变时，应该重新呈现整个树 .
目前我已经创建了一个bootstrap导航栏 .
root
--> NavBar
--> NavHeader
--> NavMenuBar
--> NavMenuItem
...
--> PageContent
--> Footer
我将活动菜单项存储在NavMenuBar组件中 . 然后，当单击菜单项或其中一个子项时，将使用回调来更新NavMenuBar中的状态，并对重新呈现的菜单项进行反应 .
这工作正常，但现在我想知道我是否应该将活动菜单项存储在NavMenuBar组件中 . 我应该将状态存储在根组件中并移动回调方法以更新菜单状态吗？我不明白为什么root应用程序需要跟踪活动菜单项，但很多博客/文章建议我应该使用所有状态的根组件，但在这个FB页面上：
https://facebook.github.io/react/docs/thinking-in-react.html
在“第4步：确定你的国家应该在哪里”，他们说你应该找到一个共同的父母来存储国家，而不是提到将所有东西存储在根目录中 .
PS：我知道有一个用于渲染BS导航栏的NPM组件，但我自己这样做是为了更多地了解反应 .
3 回答
哪个组件存储状态数据，哪个不存储完全是您的选择 .
主要有两种类型的组件，一种具有数据，另一种不具有数据 . 这有很多名字，略有不同，有利有弊 .
https://jaketrent.com/post/smart-dumb-components-react/
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
人们建议解决一些反复出现的问题 . 如果您没有问题，那么您将永远不需要解决方案 .
说实话，突出显示活动菜单项不会对应用程序产生太大影响，所以我坚持在子组件中使用它，因为通过所有这些组件传播舞台只会创建不必要的样板代码 .
仅存储根组件中的所有状态完全是 not a good way ！
原因是（你已经知道并说明了这个^^）：当根组件更新（我的意思是重新渲染）时，它的所有子孙，孙子孙以及所有其他曾孙子也将被不必要地更新 . 我们只需要更新必要的子组件，这意味着：
=> [https://facebook.github.io/react/docs/thinking-in-react.html - "Step 4: Identify Where Your State Should"他们说你应该找到 a common parent 来存储状态]是正确的
因此，在您的情况下，将活动菜单项存储在NavMenuBar组件中是一种好方法 .
实际上，所有NavMenuItems的“active " will be applied on your NavMenuItem, and the " common”父级肯定是NavMenuBar .
通过这种方式，当活动菜单项更改时，NavMenuBar将自行更新，并重新渲染其所有子项（NavMenuItems，最后一个活动项将恢复正常，新活动项将激活^^，其他菜单-items不会被重新渲染因为那里有's no change for those other items, you can read more about React'的虚拟DOM，但这是另一个故事^^，这里只有一篇关于此的文章，你肯定能找到更多：[https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/]