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管理页面就比较清晰方便了。

时间: 2024-08-01 22:43:28

reactjs & antd & redux 使用心得的相关文章

Rails + React +antd + Redux环境搭建

前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍) 1.nvm.node 2.npm or yarn装一个就好 3.rvm.ruby on rails 4.foreman 一.新建一个rails项目后加入react gem包 1.Gemfile文件添加gem 'react_on_rails', '~>6' # use latest gem version > 62.bundle install安装gem包3.rails generate react_on_

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

Redux状态管理方法与实例

状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http://cn.redux.js.org/index.html 前言 虽然官方文档上说只需几分钟就能上手 Redux,但是我个人认为即便你看个两三天也可能上手不了,因为文档里面的知识点不仅数量较多,而且还艰涩难懂,不结合一些实例来看很难用于实际项目中去. 但是不要担心自己学不会,这不我就给大家带来了这篇干

react-router 4.0踩到的坑

接手的项目需要二次开发,项目是使用的react+react-router4.0+antd+redux来开发的,由于之前用的是react-router2.0,react-router2.0和4.0之间变化还是挺多的,在这里记录一下踩到遇到的问题 1.dom组件不再在react-router中引入,而是在react-router-dom中引入 2.不再使用<Router history={}>来定义history属性,4.0加入了BroswerRouter和HashRouter组件,引入时可以im

纯函数和可观察副作用

当我第一次听到 “纯函数 (Pure Function)” 这个术语的时候我很疑惑.常规的函数做错了什么?为什么要变纯? 为什么我需要纯的函数? 除非你已经知道什么是纯函数,否则你可能会问同样的疑惑.不过这个概念其实很简单.我们可以花个 5 分钟一起来看以下. 什么函数是纯的? 纯函数的定义是: 如果函数的调用参数相同,则永远返回相同的结果.它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数. 该函数不会产生任何可观察的副作用,例如网络请求,输入和输出设备或数据突变(mu

Reactjs 列表优化的一些心得

前言 在应用开发中,列表是我们使用频率非常高的一种展现形式,在reactjs项目中更是如此.无处不在的使用更是需要我们小心触发性能瓶颈的深水炸弹. 下面就我最近的总结出的几点心得分享给大家,有什么问题欢迎批评指正. 不要用索引当key值 reactjs要求我们对列表中的每一项设置一个唯一的key值,这个虚拟dom的diff算法有很大关系.简单的说,在同一级dom树中,有2种情况会引起元素(这里的元素指的是虚拟dom,而不是真正的dom元素)的增删. 1.元素的类型改变2.key值变化 在列表中,

redux的中间层 --reactjs学习

React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux 负责Model 一开始学习Redux的中间层 有点 摸不到头, 其实只要你注意观察,这个所谓的middlerware其实就是一个 责任链 import { applyMiddleware, createStore } from "redux"; const reducer = (initialState=0, action) => { if (action.t

Springboot + mybatis + React+redux+React-router+antd+Typescript(二): React+Typescrip项目的搭建

前言: 后台搭建完以后开始搭建前端,使用create-react-app搭建项目非常方便. 前端主要是如何向后台请求数据,以及如何使用redux管理state,路由的配置. 前端github地址: https://github.com/www2388258980/rty-web 后台github地址: https://github.com/www2388258980/rty-service 项目访问地址:          http://106.13.61.216:5000/          

React + Redux + express+ antd 架构的认识

在过去的两周里,我使用这套技术栈进行项目页面的开发.下面是我个人的对于项目的一些看法: 首先:是项目的调试,我深表压力很大,项目是使用fibber去抓包调试的,也不知道我们项目的负责人,怎么能的我在每次更改代码,webpack重新打包压缩的时候总是很慢,当然也有可以是领导的电脑配置高.但是对于我这种刚来的菜鸟来说这样自测真的很慢啊,也不知道后期会不会更改了.刚入门的菜鸟表示压力很大. 第二:对于redux,我不知道前人是什么逻辑去使用这个状态管理器的,总感觉他们写的代码很乱,我理解起来很有难度,