工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的。

总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点:

一、React-Router的使用

Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,API文档如下:

https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/API.md

二、Redux和React-Redux的使用

我最初学的时候,看了网上很多Redux教程,简直是乱七八糟。为什么?不是那些人太傻比了(但也有一定的原因),而是Redux的版本发展史真的比较长。加上后来出来的React-Redux,所以各种各样的教程都有。

我这里使用的是Redux 3.5和React-Redux 4.4。这个就不放API文档了,我觉得我的demo里面写的非常清晰了。

下面以最简单的“人话”来说明下Redux的核心工作原理。

使用Redux的原因很简单,为了统一管理state。比如我的demo里的app夜间模式,可能这个参数多个component中都需要用到,所以类似这种我们必须弄成全局的。

而众所周知,React是一个通过state来render界面的框架,这就遇到一个问题,比如我要设置夜间模式,我修改普通的全局参数,并不能在修改后触发重新render,所以我们需要引入一个全局state。而Redux就是这样一个可以管理全局state的框架。

它的组成分为:

(1)store:存储全局state的对象

(2)action: 计算新state的函数(如点击开启夜间模式,darkMode参数变为true),并交给reducer

(3)reducer:根据action拿来的新参数,生成新的全局state

你肯定会说,真他妈简单。简单那就对了。网上乱七八糟的东西太多,希望我这几句话就让你明白其中的道理。

那具体如何使用Redux?

看demo就知道了,这里需要注意几点:

(1)在某个component内使用connet函数获取全局state和action中的部分,各取所需

(2)使用redux-thunk,可以进行action的同步/异步操作,因为我demo中默认使用thunk,反正异步是经常会出现的,比如我们更新用户信息,可能请求服务器需要几秒后新的用户信息才会返回,所以这个action的dispatch需要几秒后异步去触发,而默认是不支持的。

(3)存储并在app启动时初始化,我的demo中的设置夜间模式,关闭网页重新打开依旧会维持,就是我在action触发的时候做了缓存,初始化store的时候,又先从缓存取再根据这些内容,初始化store的结果。

三、antDesign的使用

demo中演示了antDesign和antDesign-mobile的两种加载(需要修改.babel)。antDesign是一款自定义component库,类似的还有amazeui,materialUI等等。antDesign-mobile就不说了,懒得评价了,那高清模式的兼容性,就像读书的时候交课堂作业一样。蚂蚁金服作为大厂,我觉得这样唐突的去发布这么一个东西实在是不合适。

antDesign相对来说成熟一点,在使用上可能需要配置一些babel等东西,这些东西,配熟练了,也就懂了。

四、webpack-dev-server和webpack的配置

webpack配置,总的来说有几块:

(1)webpack-dev-server是我推荐的一个热更新的调试组件,可以根据配置好的webpack来直接hot reload,不需要额外配其他参数。

(2)css-loadder:cssloader主要为了支持一些自定义的css写法:比如postcss,less等,demo中使用postcss去书写css,相对来说这种树形结构的css是我比较喜欢的。

(3)babel:babel是为了支持不同版本的JS语言,转换成浏览器能运行的JS。因为前端JS的版本太过零零碎碎,有时候为了支持一个小的功能,就给babel加一个小插件,以至于babel有各种乱七八糟的插件。但这种碎片化,也是JS这们开源语言能够热门、发展起来的原因。

demo地址:https://github.com/rayshen/reactjs-universal-project

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例的更多相关文章

  1. 用react + redux + router写一个todo

    概述 最近学习redux,打算用redux + router写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 我只实现了Footer组件的router,其它组件的实现方法是类 ...

  2. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  3. 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用

    先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...

  4. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  5. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  6. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  7. React+Redux开发实战项目【美团App】,没你想的那么难

    README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...

  8. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

  9. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

随机推荐

  1. Ninja介绍

    什么是Ninja 在Unix/Linux下通常使用Makefile来控制代码的编译,但是Makefile对于比较大的项目有时候会比较慢,看看上面那副漫画,代码在编译都变成了程序员放松的借口了.所以这个 ...

  2. JS加载相对路径脚本的方法 - 汇总

    js加载脚本的方式有很多,但是各有各的用途. 最近公司https项目改造,对于资源文件这一块,也是遇到一些问题,现在就来总结一下,怎样改造https的脚本吧~! 方法1.借助服务端语言如PHP,输入当 ...

  3. GDB中的backtrace命令

    backtrace命令,可以用于回溯函数调用栈. 例如:当出现段错误的时候,执行backtrace,可以看到是哪里的调用,产生的这个段错误.

  4. 不常见但很有用的chrome调试工具使用方法

    前面的话   对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...

  5. Android开发知识体系总结

  6. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  7. oracle 12c安装详细教程

    数据库下载:www.orcale.com访问官网自行下载. 一,将下载好的两个压缩包在同一目录中进行解压(文件目录尽量用英文) 解压后如下使用管理员身份运行setup安装程序 注意:对于学习阶段,这一 ...

  8. Thinkpad W540通过扩展坞连接显示器后蓝屏原因

    问题:Thinkpad W540通过扩展坞连接显示器后蓝屏 描述:直接扩展连接显示器重启电脑,一直黑屏,等待光标,进不了桌面.分离扩展,进入后,再连接显示器,蓝屏死机. 解决:用尽办法,重装显示驱动, ...

  9. Python学习--17 进程和线程

    线程是最小的执行单元,而进程由至少一个线程组成.如何调度进程和线程,完全由操作系统决定,程序自己不能决定什么时候执行,执行多长时间. 进程 fork调用 通过fork()系统调用,就可以生成一个子进程 ...

  10. 根据dba_hist_osstat统计CPU占用情况

    在11g里面,视图dba_hist_osstat用来记录OS级别的time时间指标.视图dba_hist_osstat_name显示了相关的指标名称. SYS@/dzgddb> select * ...