React 反模式，定义一个组件里面定义另一个组件答案

【问题标题】：React anti pattern, defined a component inside the definition of another componentReact 反模式，定义一个组件里面定义另一个组件
【发布时间】：2018-08-05 16:41:37
【问题描述】：

我已经阅读了 React 中的嵌套组件。

我尝试了这个例子，发现每次我更新父组件（todolist）的状态。 DOM 树重新渲染整体而不是添加新的。

我的问题是：这是我们应该避免的反模式吗？

const TodoList = ({ todos, onTodoClick }) => {
  const Todo = ({ completed, text, onClick }) => {
    return (
      <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }}>
        {text}
      </li>
    );
  };
  return todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />);
};

这是我的测试

【问题讨论】：

我知道您只是在试验，但您是说如果您在TodoList 之外定义Todo 组件，则整个列表不会在DOM 中更新？
是的。我注意到它只是将新的待办事项添加到列表中

标签： javascript reactjs anti-patterns

【解决方案1】：

问题是，当你调用TodoList 两次时，你会得到Todo 的两个不同的闭包版本，这意味着React 会认为你正在返回不同的组件，因为对构造函数的引用不相等：

 function TodoList() {
   return function Todo() { }
 }

 console.log(TodoList() === TodoList()); // false

这是一种不好的做法吗？

将 Todo 移出 TodoList 绝对是性能方面的明智之举，因为 React 可以更好地协调，但是您失去了关闭的好处。由于您在这里没有关闭任何东西，所以我会将其移到外面，但这是一个偏好问题。

【讨论】：