31.UI组件与容器组件 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

UI组件负责页面的渲染

所以需要把render函数return的内容新建放到一个UI组件中。这样,容器组件中只包含页面的逻辑。

容器组件负责页面的逻辑


TodolistUI.js---UI组件:

import React, { Component } from 'react'

class TodolistUI extends Component {
  render() {
    return (
     //...
    )
  }
}

export default TodolistUI

Todolist.js---容器组件:

import TodolistUI from './TodolistUI'

render() {
    return <TodolistUI />
}

总结:

就是把页面渲染部分抽为单独的一个组件。它就是UI组件,也叫傻瓜组件。只负责页面的显示,并没有任何的逻辑

Todolist组件就是一个容器组件或者聪明组件,不关注页面渲染,只负责功能实现,涉及到的都是页面的逻辑。