React 反模式,在另一个组件的定义中定义了一个组件
React anti pattern, defined a component inside the definition of another component
我已经了解了 React 中的嵌套组件。
我尝试了这个例子并注意到每次我都更新了父组件 (todolist) 的状态。 DOM 树 re-render 整体而不是添加新的。
我的问题是:我们应该避免 anti-pattern 吗?
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
,这意味着 React 会认为你正在返回不同的组件作为对构造函数不相等:
function TodoList() {
return function Todo() { }
}
console.log(TodoList() === TodoList()); // false
Is that a bad practice?
将 Todo 移到 TodoList 之外绝对是性能明智的,因为 React 可以更好地协调,但是你失去了闭包的好处。由于这里没有关闭任何东西,我会把它移到外面,但这是一个偏好问题。
我已经了解了 React 中的嵌套组件。
我尝试了这个例子并注意到每次我都更新了父组件 (todolist) 的状态。 DOM 树 re-render 整体而不是添加新的。
我的问题是:我们应该避免 anti-pattern 吗?
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
,这意味着 React 会认为你正在返回不同的组件作为对构造函数不相等:
function TodoList() {
return function Todo() { }
}
console.log(TodoList() === TodoList()); // false
Is that a bad practice?
将 Todo 移到 TodoList 之外绝对是性能明智的,因为 React 可以更好地协调,但是你失去了闭包的好处。由于这里没有关闭任何东西,我会把它移到外面,但这是一个偏好问题。