反应-“专用组件中的渲染列表”是否避免对帐？

Question

https://mobx.js.org/best/react-performance.html#render-lists-in-dedicated-components

坏：

@observer
class MyComponent extends Component {
    render() {
        const { todos, user } = this.props
        return (
            <div>
                {user.name}
                <ul>
                    {todos.map(todo => (
                        <TodoView todo={todo} key={todo.id} />
                    ))}
                </ul>
            </div>
        )
    }
}

好：

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

@observer class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}

这些是MobX文档的示例。

我想知道不良和良好范例之间是否有明显的区别。

我做了一个示例项目，结果没有什么不同。

没有与SCU或PureComponent相关的代码。

如果TodosView extends PureComponent，是的，速度很快。

所以我想知道Render lists in dedicated components会避免和解。