反应反模式，在另一个组件的定义内定义一个组件

Question

我已经了解了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)} />);
};

这是我的测试

Answer 1

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

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

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

  

这是不好的做法吗？

将Todo移到TodoList外面绝对是性能明智的选择，因为React可以更好地协调，但是您失去了闭包的好处。因为您在这里没有关闭任何内容，所以我将其移到外面，但这就是优先选择的问题。