zoukankan      html  css  js  c++  java
  • reactjs & antd & redux 使用心得

    1 组件化 & antd

    将UI分成不同的组件,每个组件都独立封装

    缺陷

    下面这些都没有:

    • 事件系统(除了原生的 DOM 事件)
    • AJAX 功能
    • 数据层
    • Promises
    • 应用程序架构

    单单reactjs的代码压缩后也需要147k以上

    reactjs代码量最多,因为它既要管理UI逻辑,又要操心dom的渲染

    不兼容IE8

    优点总结

    1. 使用reactjs容易实现组件化。 举个栗子:https://ant.design/components/popconfirm/ 再比如 https://ant.design/components/progress/
    2. 易于维护,代码逻辑相对清晰
    3. 用状态操作管理dom,从来不需要操作dom
    4. 适合复杂的项目,要结合redux或者其他数据管理&路由管理方案,否则一团乱麻
    5. 关于antd,主要是借助reactjs这种简单的组件构建方式,特点是上手快,功能丰富,快速构建前端平台类的项目。 当然,如果UI和自己项目的出入太大,就不太好用。

    2 用redux管理数据流

    问题1 轻量级组件在渲染简单静态页面时很好用, 但是如果页面有交互,就必须在组件间传递回调函数来处理事件。 尤其是复杂的网页结构,往往需要多个组件层层嵌套,导致回调函数也必须在父子组件间层层传递, 代码变成一团乱麻,维护就很难了。

    问题2 父层组件的状态很容易传给下层组件,反过来就费事了。

    问题3 一开始写代码时就很容易再加一个状态,不知不觉就不受你控制了。

    reactjs本身的数据和视图的管理

    state => component => onChange => setState => state

    这种方式针对单个组件好用,但是一旦涉及到组件间数据传输,就变得臃肿

    redux 数据管理:

    store => state => Component => onChange => dispatch(action) => reducers => store

    特点:数据管理中心,无视reactjs组件结构和组件关系,只要下发action都能进行状态改变,从而改变视图

    缺点:涉及到数据也就涉及到业务逻辑,不利于组件化时的解耦,所以再写单个复用的组件的时候,避免引入redux

    3 用router管理页面

    解决React components 到URl之间的同步映射关系

    移动营销平台时的视图机制: http://gitlab.shinemo.com/Ub-Web/f2emobile/blob/develop/src/components/Home/SmVirtualView.jsx

    缺点:页面跳转时都要触发父组件的view状态,十分不方便。

    开发者平台的路由机制 http://gitlab.shinemo.com/Ub-Web/f2e-developer/blob/develop/src/route/index.js

    使用router管理页面就比较清晰方便了。

  • 相关阅读:
    指令周期与机器周期
    MFC使用Access数据库
    函数指针的用途
    大端模式和小端模式
    Matlab信号展开
    EL表达式的11个内置对象
    JSP 4个域对象、7个动作指令、9个内置对象
    阿里巴巴java代码规范
    HDDATA基本注意事项
    SVN相关
  • 原文地址:https://www.cnblogs.com/yuenan/p/6063938.html
Copyright © 2011-2022 走看看