React Native项目中能否在Redux初始状态存储React组件？是否为最佳实践？

绝对不建议这么做，这完全违背Redux的设计原则和最佳实践。

为什么不能这么做？ #

• Redux核心是存序列化纯数据：Redux状态应该由可序列化的JS值（纯对象、数组、字符串、数字等）组成，React组件（JSX编译后的React元素）是包含组件引用、内部状态的复杂对象，无法被序列化。这会导致Redux DevTools无法正常追踪状态变化，调试难度陡增。
• 状态与UI易脱节：把组件存在store后，当组件props或内部状态变化时，store里的组件实例和实际渲染的组件会失去同步，引发UI与状态不一致的诡异bug。
• 额外性能损耗：React元素是引用类型，Redux的浅比较机制会因为引用变化触发不必要的重渲染，增加性能开销。
• 违反单一数据源原则：Redux应该存业务数据，而非UI组件本身。UI是数据渲染的结果，不该作为状态的一部分存储。

正确的做法是什么？ #

把组件需要的纯业务数据存在Redux store中，在UI组件里根据这些数据渲染对应的React组件。

以你的场景为例，应该把Tache组件的props数据存在store：

// reducer初始状态只存纯数据
const initialState = {
  taches: [
    {
      nom: "Nom",
      id: "0",
      isDetail: false,
      listeMembre: ["Hugo", "Theo"],
      desc: "Description",
      date: "Date",
      url: "www"
    }
  ]
};

然后在React组件中从store取数据，渲染Tache：

import Tache from '../components/Tache';
import { useSelector } from 'react-redux';

function TacheList() {
  const taches = useSelector(state => state.taches);

  return (
    <>
      {taches.map(tache => (
        <Tache
          key={tache.id}
          nom={tache.nom}
          id={tache.id}
          isDetail={tache.isDetail}
          listeMembre={tache.listeMembre}
          desc={tache.desc}
          date={tache.date}
          url={tache.url}
          parentFunction={() => { /* 编写你的父组件逻辑 */ }}
        />
      ))}
    </>
  );
}

如果需要动态渲染不同类型组件，也应该存储组件的标识（比如字符串"Tache"）或配置信息，渲染时根据标识选择对应组件，而非直接存储组件实例。

内容的提问来源于stack exchange，提问作者Théo Pantecouteau