将组件存储在状态中是个好主意吗？

将整个 React 组件存储在组件状态或 redux 状态中是一个好习惯吗？是的，它是可选的，因为我们可以在状态中存储字符串并有条件地渲染组件，但在某些情况下，将组件存储在状态中更简单。

例如，

const [ components ]  = useState([
    { id: 1, component: <Login />, title: `Login` },
    { id: 2, component: <Register />, title: `Register` },
])

但组件可能很大，我想知道这是否有什么区别。这是一个不好的做法吗？

我不会推荐它。但并不是因为这些实例会以某种方式给国家增加太多的规模（我认为它们不会）。

我认为最有力的论据是：实例化的组件已经过时了；它们的属性仅具有实例化时分配的值。 这可能会也可能不会导致未来出现问题。它肯定会为您的应用程序中的错误引入额外的 RISC。 通常，所有组件都是在渲染函数运行时创建并参数化的；接收最新的房产价值；对于那些保留在状态中的人来说，情况不会如此。

实例化组件通常不是一个昂贵的操作；并且它并不意味着相应的 DOM 更新，因为 React 使用 diff 机制来决定 DOM 的哪些部分需要更新。

我能想到的所有用例（可以考虑在状态中存储实例化组件）都可以通过更反应惯用的方式来解决：

• 有条件渲染的元素：

  const [showPrompt, setShowPrompt] = useState(false);
  // ...
  <div>{showPrompt && <ConfirmationPrompt />}</div>;
  

  or

  const MyComponent = ({showPrompt}) => {
  // ...
  <div>
    { showPrompt && <ConfirmationPrompt /> }
  </div>
  

• 优化创建新反应元素的次数：
  如果您有理由认为您的渲染函数相当繁重并且您想减少它运行的次数，您可以使用useMemo https://reactjs.org/docs/hooks-reference.html#usememo钩子（在渲染函数中记住计算结果）或者您可以将整个组件包装在React.memo() https://reactjs.org/docs/react-api.html#reactmemo所以只有当 props 改变时才会重新渲染。

  const primeNumbers = useMemo(() => calculatePrimeNumbers(limit), [limit]);
  

  const MyComponent = React.memo((props) => {
    /* render using props */
  });
  

我最初的回答是刻薄的。我对其进行了编辑，保留了推理，但删除了无用的部分。