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

Question

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

例如，

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

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

Answer 1

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

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

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

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

• 有条件渲染的元素：

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

  或者

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

• 优化创建新的 React 元素的次数：
  如果你有理由认为你的渲染函数相当繁重，并且你想减少它运行的次数，你可以使用useMemo钩子（在你的内部存储计算结果） render 函数）或者你可以将整个组件包装在React.memo()中，这样它只会在 props 更改时重新渲染。

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

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

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