美文网首页React
React(傻瓜组件与容器组件)

React(傻瓜组件与容器组件)

作者: 余生筑 | 来源:发表于2017-10-26 21:16 被阅读144次

Redux下的react类别

容器组件

  • 负责与Store交互
  • 容器组件自身不会触发action(他只是披在傻瓜组件上的一层壳)
  • 内:向傻瓜组件传递由Store获得的props
  • 外:向Store派发用户操作傻瓜组件引起的action

傻瓜组件

  • 专注于渲染视图
  • 没有state(无状态组件)
  • 所有数据源于props
  • 一般表示为函数式组件
let Counter=(props)=>{

    const {caption, onIncrement, onDecrement, value} = props;

    return (
      <div>
        <button style={buttonStyle} onClick={onIncrement}>+</button>
        <button style={buttonStyle} onClick={onDecrement}>-</button>
        <span>{caption} count: {value}</span>
      </div>
    );
}

相关文章

  • React(傻瓜组件与容器组件)

    Redux下的react类别 容器组件 负责与Store交互 容器组件自身不会触发action(他只是披在傻瓜组件...

  • React(React-Redux)

    React-Redux是一个封装好的第三方库它主要封装了两方面的功能 connect:连接容器组件与傻瓜组件 Pr...

  • 【学习笔记 】React ⑧ react-redux的使用

    UI组件、容器组件、无状态组件 在学习react-redux之前,需要了解UI组件、容器组件和无状态组件的知识。 ...

  • react-router

    安装 示例 容器组件 react-router的容器组件,就是最外层包括所有路由的组件,所有路由活动需要在容器组件...

  • React中UI组件和容器组件的拆分

    UI组件,也叫傻瓜组件,负责页面的渲染。 容器组件,也叫聪明组件,负责处理逻辑。 拿todolist组件举例,to...

  • react-redux

    react-redux 主要: react-redux与redux并不完全一样 主要特征 ui组件 容器组件由 R...

  • 记录react相关一些功能使用(持续更新)

    React-redux connect功能:连接容器组件和展示组件使用 React Redux 库的 connec...

  • React 容器组件与UI组件

    react 官方推出的 react-redux 插件对构建 react 项目中的 redux 进行了优化。 Rea...

  • React中UI组件与容器组件的拆分

    本篇文章,我们接着对React组件进行优化。React中存在UI组件和容器组件的概念。顾名思义,UI组件主要控制组...

  • React-Redux

    UI 组件和容器组件 React-Redux 将所有组件分为两大类:UI ( presentational com...

网友评论

    本文标题:React(傻瓜组件与容器组件)

    本文链接:https://www.haomeiwen.com/subject/fpclpxtx.html