精华内容
下载资源
问答
  • 容器组件和展示组件

    千次阅读 2019-01-22 14:56:31
    redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。 不区分容器和展示组件的...

    redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。

    不区分容器和展示组件的情况:

    // CommentList.js
    class CommentList extends React.Component {
      constructor() {
        super();
        this.state = { comments: [] }
      }
      componentDidMount() {
        $.ajax({
          url: "/my-comments.json",
          dataType: 'json',
          success: function(comments) {
            this.setState({comments: comments});
          }.bind(this)
        });
      }
      render() {
        return <ul> {this.state.comments.map(renderComment)} </ul>;
      }
      renderComment({body, author}) {
        return <li>{body}—{author}</li>;
      }
    }
    
    

    可用性:CommentList不可以复用

    那么来看下分离的情况:

    // CommentListContainer.js
    class CommentListContainer extends React.Component {
      constructor() {
        super();
        this.state = { comments: [] }
      }
      componentDidMount() {
        $.ajax({
          url: "/my-comments.json",
          dataType: 'json',
          success: function(comments) {
            this.setState({comments: comments});
          }.bind(this)
        });
      }
      render() {
        return <CommentList comments={this.state.comments} />;
      }
    }
    
    
    // CommentList.js
    class CommentList extends React.Component {
      constructor(props) {
        super(props);
      }
      render() { 
        return <ul> {this.props.comments.map(renderComment)} </ul>;
      }
      renderComment({body, author}) {
        return <li>{body}—{author}</li>;
      }
    }
    
    
    

    这样就做到了数据提取和渲染分离,CommentList可以复用,CommentList可以设置PropTypes判断数据的可用性

    二者的区别:在这里插入图片描述
    容器组件和展示组件分离的好处:

    1. 展示和容器更好的分离,更好的理解应用程序和UI
    2. 重用性高,展示组件可以用于多个不同的state数据源重用性高,展示组件可以用于多个不同的state数据源
    展开全文
  • 容器组件(Container)可以理解为在Android中的RelativeLayout或LinearLayout等,在其中你可以放置你想布局的元素控件,从而形成最终你想要的页面布局。这篇文章主要介绍了Flutter实现容器组件、图片组件 的代码,...
  • iOS容器框架,包括容器组件和路由组件,实现事件解耦和组件解耦。
  • 主要介绍了React为 Vue 引入容器组件和展示组件的教程详解,文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下
  • Flutter中的容器组件

    2021-01-07 22:37:11
    容器组件用于包含能够应用样式属性的子组件。 如果Container组件没有子项,它将自动填满屏幕上的给定区域,否则它的尺寸取决于给定子元素的高度和宽度。 注意:在没有任何父组件的情况下,不应直接使用容器组件。 您...
  • React UI组件和容器组件

    千次阅读 2019-02-17 12:02:02
    UI组件负责页面的渲染,容器组件负责页面的逻辑。 拆分TodoList中页面渲染部分的代码: import React, { Component } from 'react'; import { Input, Button, List} from 'antd'; class TodoListUI extends ...

    UI组件负责页面的渲染,容器组件负责页面的逻辑。

    拆分TodoList中页面渲染部分的代码:

    import React, { Component } from 'react';
    import { Input, Button, List} from 'antd';
    
    class TodoListUI extends Component{
        render() {
            return (
                <div style={{marginTop:'10px', marginLeft: '10px'}}>
                    <div>
                        <Input value={this.props.inputValue} placeholder='todo info' style={{width:'300px', marginRight: '10px'}}
                               onChange={this.props.handleInputChange}/>
                        <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
                    </div>
                    <List
                        style={{marginTop: '10px', width:'300px'}}
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item, index) => (<List.Item onClick={(index) =>{
                            this.props.handleItemDelete(index)
                        }}>{item}</List.Item>)}
                    />
                </div>
            )
        }
    }
    
    export default TodoListUI;
    import React, { Component } from 'react';
    import 'antd/dist/antd.css';
    import { Input, Button, List} from 'antd';
    import store from './store/index.js';
    import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./store/actionTypes";
    import {getInputChangeAction, getAddItemAction, getDeleteItemAction} from "./store/actionCreators";
    import TodoListUI from './TodoListUI';
    
    class ReduxTodoList extends Component{
    
        constructor(props) {
            super(props);
            this.state = store.getState();
            console.log( this.state);
            this.handleInputChange = this.handleInputChange.bind(this);
            this.handleStoreChange = this.handleStoreChange.bind(this);
            this.handleBtnClick = this.handleBtnClick.bind(this);
            // this.handleItemClick = this.handleItemClick.bind(this);
            this.handleItemDelete = this.handleItemDelete.bind(this);
            store.subscribe(this.handleStoreChange);
        }
    
        render() {
            return (
                <TodoListUI
                 inputValue={this.state.inputValue}
                 list = {this.state.list}
                 handleInputChange={this.handleInputChange}
                 handleBtnClick={this.handleBtnClick}
                 handleItemDelete={this.handleItemDelete}
                />
            )
        }
    
        handleInputChange(e) {
            // const action = {
            //     type:CHANGE_INPUT_VALUE,
            //     value:e.target.value
            // }
            const action = getInputChangeAction(e.target.value);
            store.dispatch(action);
        }
    
        handleStoreChange() {
            console.log("handleStoreChange");
            //替换当前组件中的数据
            this.setState(store.getState());
        }
    
        handleBtnClick() {
            const action = getAddItemAction();
            console.log('handleBtnClick ....');
            store.dispatch(action);
        }
    
        handleItemDelete(index) {
            //alert(index);
            const action = getDeleteItemAction(index);
            store.dispatch(action);
        }
    }
    
    export default ReduxTodoList;

     

    TodoList中主要修改部分:
    import TodoListUI from './TodoListUI';
    
    
    render() {
        return (
            <TodoListUI
             inputValue={this.state.inputValue}
             list = {this.state.list}
             handleInputChange={this.handleInputChange}
             handleBtnClick={this.handleBtnClick}
             handleItemDelete={this.handleItemDelete}
            />
        )
    }

     

    容器组件也是逻辑组件,主要关注业务逻辑,不关注ui渲染。负责整个组件的功能实现的。所以也被称为聪明组件。

    UI组件主要负责ui渲染。页面渲染相关的代码拆分到ui组件中。也称为傻瓜组件。

     

    记录一个小错误

    import {ADD_TODO_ITEM, CHANGE_INPUT_VALUE, DELETE_TODO_ITEM} from "./actionTypes";
    
    export const getInputChangeAction = (value) => ({
        type: CHANGE_INPUT_VALUE,
        value
    });
    
    export const getAddItemAction = () => ({
        type:ADD_TODO_ITEM
    });
    
    export const getDeleteItemAction = (index) =>({
        type:DELETE_TODO_ITEM,
        index
    })

    第一个错误是在getDeleteItemAction中,这个action没有设置index,所以导致后面的reducer中获取不到index值。

     

    import React, { Component } from 'react';
    import { Input, Button, List} from 'antd';
    
    class TodoListUI extends Component{
        render() {
            return (
                <div style={{marginTop:'10px', marginLeft: '10px'}}>
                    <div>
                        <Input value={this.props.inputValue} placeholder='todo info' style={{width:'300px', marginRight: '10px'}}
                               onChange={this.props.handleInputChange}/>
                        <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
                    </div>
                    <List
                        style={{marginTop: '10px', width:'300px'}}
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item, index) => (
    
                                <List.Item onClick={() =>{
                                    console.log('index_click:' + index );
                                    this.props.handleItemDelete(index);
                                }}>{item}</List.Item>)
                        }
                    />
                </div>
            )
        }
    }
    
    export default TodoListUI;

     

    修改2:应该使用最外层的index值,内层箭头函数中index是一个对象,而不是下标。

    下面是正确代码:

     

     

    下面是错误代码:

    下面的写法index是有问题的。

     

     

     

     

     

    展开全文
  • 容器组件和展示组件react-redux

    千次阅读 2017-01-05 16:49:25
    react-redux的作用是连接(connect)store和容器组件的。store是redux提供的,容器组件是react提供的。 5.1 组织应用的组件 组织应用的组件 容器组件 展示组件 容器组件:位于应用最顶层的组件,用来与...

    react-redux

    react-redux的作用是连接(connect)store和容器组件的。store是redux提供的,容器组件是react提供的。

    5.1 组织应用的组件

    • 组织应用的组件

      • 容器组件

      • 展示组件

    容器组件:位于应用最顶层的组件,用来与redux连接的。从redux中获取数据作为props。展示组件:位于应用的中间或者子组件,是纯粹的组件,与redux没有关系。他们从自己的父组件获取数据作为props,他们的共同根组件是应用的唯一的容器组件。展示组件可以维持少量的自身状态信息。

    5.2 连接Store与组件

    react-redux仅仅提供两个关键模块:Provider和connect。

    源码:

    import Provider from './components/Provider'
    import connect from './components/connect'
    
    export { Provider, connect }
    • Provider:是一个组件,接受一个store属性和一个子组件(也就是上面说到的:store是redux提供的,容器组件是是react提供的。)

    例子:

    ReactDOM.render(
        <Provider store={store}>
          {/* note "routerState" here: important to pass it down */}
          <Handler routerState={routerState} />
        </Provider>,
        document.getElementById('root')
      );
    • connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]):connect返回一个函数,它接受一个React组件的构造函数作为连接对象,最终返回连接好的组件构造函数。

    例子:

    import * as actionCreators from './actionCreators'
    
    function mapStateToProps(state) {
      return { todos: state.todos }
    }
    
    export default connect(mapStateToProps, actionCreators)(MyRootComponent)

    参考:

    展开全文
  • 微信小程序 UI与容器组件总结  1.总结与概述  2.容器组件  2.1 组件容器(view)  2.2 可滚动视图容器(scroll-view)  2.3 滑块视图容器(swiper) 1.总结与概述 1.1 UI组件总结图  1.2 概述  小程序的UI...
  • 容器组件:只负责业务逻辑和数据的处理3.无状态组件:把UI组件用函数表示(可以省去生命周期函数,优化代码)二:具体代码 注意:以上一篇文章举例点击打开链接 1.普通组件TodoList.js(拆分成TodoListUi.js(UI...

    一:三种组件的简单理解

    1.UI组件:只负责页面的渲染

    2.容器组件:只负责业务逻辑和数据的处理

    3.无状态组件:把UI组件用函数表示(可以省去生命周期函数,优化代码)

    二:具体代码

           注意:以上一篇文章举例点击打开链接

            1.普通组件TodoList.js(拆分成TodoListUi.js(UI组件)和TodoList.js(容器组件))

    import React ,{Component}from 'react';
    import 'antd/dist/antd.css'
    import {Input,Button,List} from 'antd'
    import store from './store/index';
    
    import {getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator'; 
    
    class TodoList extends  Component{
        constructor(props){
            super(props);
            this.state=store.getState();
            store.subscribe(this.handleStoreChange)
        }
        render(){
            return(
                <div style={{margin:'10px',marginLeft:'10px'}}>
                    <div>
                        <Input
                            value={this.state.inputValue}
                            placehoder="todo list "
                            style={{width:'300px'}}
                            onChange={this.handleInputChange}
                        />
                        <Button
                            type= "primary"
                            onClick={this.handleBtnClick}
                        >提交</Button>
                    </div>
                    <List
                        style={{marginTop:'10px',width:'300px'}}
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => (<List.Item onClick={this.handleItemDelet} >{item}</List.Item>)}//这个这个参考antd官网
                    />
                </div>
            )
        }
        handleInputChange=(e)=>{
            const action=getInputChangeAction(e.target.value);
            store.dispatch(action);
        };
    
        handleStoreChange=()=>{
            this.setState(store.getState());   
        };
    
        handleBtnClick=()=>{
            
            const action=getAddItemActiom();
            store.dispatch(action);
        };
    
        
        handleItemDelet=(index)=>{
             
            const action=getDeleteItemAction(index);
            store.dispatch(action);
        }
    }
    
    export default TodoList;

        2:普通组件拆分成之一TodoListUi.js(UI组件)

    import React ,{Component}from 'react';
    import 'antd/dist/antd.css'
    import {Input,Button,List} from 'antd'
    
    class TodoListUi extends Component{
        render(){
            return(
                <div style={{margin:'10px',marginLeft:'10px'}}>
                    <div>
                        <Input
                            value={this.props.inputValue}
                            placehoder="todo list "
                            style={{width:'300px'}}
                            onChange={this.props.handleInputChange}
                        />
                        <Button
                            type= "primary"
                            onClick={this.props.handleBtnClick}
                        >提交</Button>
                    </div>
                    <List
                        style={{marginTop:'10px',width:'300px'}}
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item,index) => (<List.Item onClick={(index)=>{this.props.handleItemDelet(index)}} >{item}</List.Item>)}
                        //调用父组件带参数的函数用箭头函数
                    />
                </div>
            )
        }
    }
    export default TodoListUi;
    

        3:普通组件拆分成之二TodoList.js(容器组件)

    import React ,{Component}from 'react';
    
    import store from './store/index';
    
    import {getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator';
    import TodoListUi from './TodoListUi';
    
    
    class TodoList extends  Component{
        constructor(props){
            super(props);
            this.state=store.getState();
            store.subscribe(this.handleStoreChange)
        }
        render(){
            return(
                <TodoListUi
                    inputValue={this.state.inputValue}
                    list={this.state.list}
                    handleInputChange={this.handleInputChange}
                    handleBtnClick={this.handleBtnClick}
                    handleItemDelet={this.handleItemDelet}
                />
            )
        }
        handleInputChange=(e)=>{
            const action=getInputChangeAction(e.target.value);
            store.dispatch(action);
    
        };
    
    
        handleStoreChange=()=>{
            this.setState(store.getState())
        };
    
        handleBtnClick=()=>{
    
            const action=getAddItemActiom();
            store.dispatch(action);
        };
    
    
        handleItemDelet=(index)=>{
    
            const action=getDeleteItemAction(index);
            store.dispatch(action);
        }
    }
    
    export default TodoList;
    4:UI组件TodoListUi.js把类换成函数(无状态组件)

    import React ,{Component}from 'react';
    import 'antd/dist/antd.css'
    import {Input,Button,List} from 'antd'
    const TodoListUi=(props)=>{
        return(
            <div style={{margin:'10px',marginLeft:'10px'}}>
                <div>
                    <Input
                        value={props.inputValue}
                        placehoder="todo list "
                        style={{width:'300px'}}
                        onChange={props.handleInputChange}
                    />
                    <Button
                        type= "primary"
                        onClick={props.handleBtnClick}
                    >提交</Button>
                </div>
                <List
                    style={{marginTop:'10px',width:'300px'}}
                    bordered
                    dataSource={props.list}
                    renderItem={(item,index) => (<List.Item onClick={(index)=>{props.handleItemDelet(index)}} >{item}</List.Item>)}
                    //调用父组件带参数的函数用箭头函数
                />
            </div>
        )
    };
    
    
    export default TodoListUi;
    

           

    展开全文
  • 安卓视图组件和容器组件

    千次阅读 2013-12-30 20:49:39
    Android应用的大部分UI组件都放在...View类还有一个重要的子类:ViewGroup,丹ViewGroup通常作为其他组件容器使用。     ViewGroup继承了View类,当然也可以当成普通的View来使用,但ViewGroup主要还是当成容器类使用
  • 3、实战容器组件和展示组件的玩法 如果学过 redux 的话,会知道, redux 的思想是容器组件和展示组件分离,容器组件存数据,展示组件秀样式。 但是光看不练,恐怕很难理解这种玩法。 我在这里,不使用 Redux,...
  • ScrollView容器组件的用法

    千次阅读 2012-01-12 19:06:35
    ScrollView容器组件可以对其中包含的子组件进行竖向的滚动显示(开发者可以选择是否显示滚动条)。ScrollView容器组件居右FrameLayout属性,因此它只能包含一个子组件,该组件通常为一个LinearLayout(线性)布局,...
  • 容器组件(Container)

    千次阅读 2019-07-01 18:10:15
    容器组件(Container)是一个组合Widget,内部绘制Widget、定位Widget和尺寸Widget,包含一个子Widget,自身具备如alignment、pading等基础属性,方便布局过程中摆放child。Container组件常用属性如下表: ...
  • 在使用React中,你是否会出现过一个文件的代码很多,既存在...首先我们来看一个容器组件和展示组件一起的例子吧。 class TodoList extends React.Component{ constructor(props){ super(props); this.state ={ ...
  • 视图容器组件 视图容器组件共有5种: view视图容器 scroll-view可滚动视图区域 swiper滑块视图容器 movable-view可移动视图容器 cover-view覆盖原生组件的视图容器 view视图容器 view视图容器是WXML界面布局的基础...
  • 如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?...
  • 主要介绍了微信小程序 视图容器组件的详解及实例代码的相关资料,这里对基础知识进行了详细介绍并附有简单实例代码,需要的朋友可以参考下
  • WEB组件:的三种关联关系 WEB应用程序如此强大的原因之一就是他们能彼此链接和聚合信息资源。WEB组件之间存在三种关联关系: l  请求转发 l  URL重定向 l  包含关系 存在以上关联关系的Web组件可以是JSP或...
  • 在使用React中,你是否会出现过一个文件的代码很多,既存在...首先我们来看一个容器组件和展示组件一起的例子吧。 class TodoList extends React.Component{ constructor(props){ super(props); this.state ={ ...
  • flex组件容器组件实例源码,包括according、viewstack等20个实例
  • 自定义容器组件也是我一直想要实现的,就像<View></View>一样,其中可以放置很多的View组件,来实现我们想要的UI效果;然而这种容器组件可以通过 this.props.children 来实现
  • 这个就是组件化,回归初心,从容器化到组件化,精华PPT,可以打开新世纪大门,彻底理解清楚这个容器化,插件化,组件化本质的关系与演进过程核心点
  • Element el-container 布局容器组件详解

    千次阅读 2021-01-27 11:32:19
    element为了方便开发人员使用,直接提供了布局容器组件,可以很方便的直接生成上述的布局栏。 2. 全局样式 为了让网页的布局占满屏幕,一般在开始布局之前,设定下全局样式,修改index.html,添加全局样式代码如下。...
  • java容器组件之间关系

    千次阅读 2018-11-19 15:39:27
    也是一个容器类。这个框子可以嵌入几个玻璃窗。JFrame自带了一个玻璃窗。可以通过语句 Container c=getContentPane(); 获得该内容窗格。 也可以定制一个新的玻璃面板替换原来的自带的玻璃窗,代码如下: JPanel ...
  • 容器组件预览 Accordion Accordion(empty) AnchorPane BorderPane FlowPane GridPane HBox Pane ScrollPane ScrollPane(empty) SplitPane(empty) SplitPane(horizontal) SplitPane(vertical)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 419,422
精华内容 167,768
关键字:

容器的组件有哪些