容器组件一般以’高阶组件’形式存在, 它一般 ① 从外部数据源(redux 这些状态管理器或者直接请求服务端数据)获取数据, 然后 ② 组合展示组件来构建完整的视图....容器组件(业务逻辑)也可以被复用于不同’平台’的展示组件
展示和容器组件更好的分离,有助于更好的理解应用和 UI, 两者可以被独立地维护
展示组件变得轻量(无状态/或局部状态), 更容易被测试
了解更多...这些状态管理器通常都在组件树的外部维护一个或多个状态库, 然后通过依赖注入形式, 将局部的状态注入到子树中. 通过视图和逻辑分离的原则, 来维持组件树的纯净性....比如Button, Label, Input
例如下图, List/List.Item 就是布局组件,而 Input,Address 则是内容组件
image.png
将布局从内容组件中抽取出来,分离布局和内容...>
)
}
纯逻辑拆分: 按照逻辑和视图分离的原则, 将逻辑控制部分抽离到 hooks 或高阶组件中
逻辑和渲染拆分: 将相关的视图和逻辑抽取出去形成一个独立的组件