0x000 概述 剩余参数将没有对应形参的参数聚合成一个数组 0x001 语法 {代码...} 0x002 只聚合未对应形参参数 剩余参数只会将没有对应形参的参数聚合成一个数组, 而arguments则是包含了所有的参数。 {代码...} 0x003 剩余参数是数组 剩余参数始终是一个数组，而不像arguments是一个伪数组 {代码...} 0x004 解构剩余参数 {...

0x000 语法 {代码...} 0x001 使用 {代码...} 使用babel翻译一下 {代码...} 0x002 传值检测 从babel翻译的结果可以看出，默认参数只检查两种情况 不传参数 传入undefined {代码...} 0x003 前参后用 前面的参数可以作为后面参数的默认值，甚至可以对前面的参数做一些特别的操作，比如简单的加减乘除 {代码...} 0x004 默认...

0x001 var 语法 {代码...} 使用 {代码...} var变量提升使用var声明的变量将会被提升到函数的顶部 {代码...} 以上代码相当于 {代码...} 0x002 let 语法 {代码...} 使用 {代码...} 不再提升 {代码...} 注意：猜测， 使用babel翻译一下代码发现，只是let变成了var，所以使用babel转义之后的代码依旧会提升 不能重复声明 {代...

0x000 概述 箭头函数有两个作用： 更简短的写法 不绑定this 0x001 语法一表览 {代码...} 0x002 写法 正规一点 {代码...} 声明了一个add变量，该变量是一个加法函数，该函数有两个形参：num1、num2，返回值为这两个参数相加的结果 单参数 {代码...} 上面声明了一个increment变量，该变量是一个自增函数，该参数只有一个形...

0x000 概述 这篇文章是说链表，链表这种数据结构非常普遍，有时候我们根本就没有意识到用的是链表 0x001 啥是链表 链表就是用绳子连起来的酒瓶子，酒就是数据，每个酒瓶子都连着下一个酒瓶子。 链表一共有两个操作 插入：将一个新的节点插入链表 删除：将一个节点从链表中删除 0x001 初始化 链表不像数组、队列、栈一样...

0x000 概述 这篇文章说的是队列，队列的用处也贼大，削峰、限流、消息异步化等等等 0x001 什么是队列 队列就是先入先出的数组，就和平常银行排队一样，先排队的人先处理事务，如图 只有两个操作： 入队：将数据放入队列 出队：将数据取出并处理 0x002 初始化 js中的队列依旧可以使用数组实现 {代码...} 0x003 入队 入队...

0x000 概述 今天玩得是栈，栈的用处非常广泛啊，比如函数的调用栈啊，h5的history的state的api啊，之类的，一坨一坨的。 0x001 什么是栈 栈就是一个后入先出的数组，并且这个数组只能从一端进来，再从这一端出去，就像是放在长筒纸盒里面的羽毛球，他只有两个动作 push： 将数据推入栈中 pop：将数据弹出栈 0x002 初始化...

数据：图中的data1-data5可以通过索引找到某个数据，然后对这个数据操作，而这里的数据是泛指，因为数组是一种通用的数据结构，可以存储任意的数据，比如数字、对象、字符串，甚至数组也可以。

0x000 概述 这一章终于大集成了 0x001 集成react 源码 {代码...} 效果 说明： 集成react主要是用到react、react-router库 0X002 集成react-router 源码 {代码...} 效果 说明 主要用到react-router-dom库，是针对react-router库在dom环境下的封装 withRouter组件，注入match、location、history等属性 BrowserRouter接管...

0x000 概述 这一章仔细讲一讲 react-route 的使用栗子 0x001 简单使用 源码 {代码...} 效果 0x002 带导航激活效果 源码 {代码...} 效果 说明NavLink: Link增强版，如果当前路由命中，将会启用activeStyle或者activeClassName。 {代码...} 0x003 重定向 源码 {代码...} 效果当我们访问http://localhost:8081/时，会自动跳...

0x000 概述 上一章使用的是自己实现的route，当然已经有现成的库给我们用了，那就是react-route。 0x001 history Api说明 在说这个库之前，得先对history新的api做一个了解 window.history.pushState(data,title,?url) data：数据 title：标题 url：地址 当我们调用该函数的时候，将改变地址栏的地址，但是却不会导致页...

回顾一下上一章讲的页面切换，我们通过LeactDom.render(new ArticlePage(),document.getElementById('app'))来切换页面，的确做到了列表页和详情页的切换，但是我们可以看到，浏览器的网址始终没有变化，是http://localhost:8080，那如果我们希望直接访问某个页面，比如访问某篇文章呢？也就是我们希望我们访问的地址是h...

从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现而已，而不是路由本身。

0x000 概述 前面虽然简单的讲了如何在react中集成redux，但是那只是简单的讲讲而已，这一章将会仔细讲讲如何在react中使用reudx 0x001 问题分析 查看前边的栗子： {代码...} 为了让组件可以响应redux的变化，我们写了一些代码： {代码...} 如果我们有大量的组件需要绑定redux，那么写这些代码就显得非常冗余了这一章要做...

之前写的所有关于redux的文章都是纯粹的redux，是和框架无关、环境无关的redux，所以我没有将redux和react一起讲，为的是吧redux和react分开，作为独立的个体来分析，redux提现的是一种思想，而不是一个思维定式。而现在我们可以尝试在react中来使用了。

在项目中，我们经常会有记录一些事件或者在某些事件发生的时候做某些事的需求，比如api接口鉴权操作、日志记录操作等，一般我们都可以用中间件来完成，中间件具有可拔插、可扩展的特点。我们也可以使用中间件来扩展redux的功能。

其实很多框架在技术上没有太大的难度，真正难的是思想，思想的突破远远比技术突破难多了。redux就为我带来了一种应用状态管理的新思想，其间充斥着许多个概念，state、reduce等，乍一看头大，等到仔细理解了它的思想，或许就很简单了，Action Creators也是其中一种。

就是这么简单了，核心函数是：combineReducers(reducers)，将多个reducer并成一个，拆分之后呢，每个reducer单独管理一个state

0x000 概述 这一章讲一些栗子 0x001 原生+redux实现counter 修改模板 {代码...} 修改入口文件 {代码...} 查看浏览器 说明：dispatch其实就是发出一个请求，比如store.dispatch({type: ACTION_NUM_INCREMENT})发出的其实是一个增加的请求，当然这个只是一个名字而已，如何处理还看我们自己，是一个简单的js对象，我们发出...

这一章开始讲redux，其实是承接前面的react，但其实作为一个框架来说，redux和react并没有太多的关系，本身是独立存在的。在我看来它们的关系不会比共用re开头更深了，所以我就重新开了一个头，但其实是基于前面写的...

0x000 概述 这一章讲组件间通信，组件通信分为很多种： 父组件向子组件发起通信 子组件向父组件发起通信 兄弟组件间通讯 远程组件通信 在组件通信中，有一种错误的说法，那就是父组件调用子组件，子组件调用父组件，这种说法其实是错误的，并没有什么父组件调用子组件，这是一种传统的说法，从传统dom的操作方式来的，但...

内联样式： 内联样式可以写在标签的style属性中 我们先尝试传统写法 {代码...} 查看浏览器，会发现报错，因为style期待的是一个像{background:'red'}一样键值对对象 修改写法： {代码...} 查看浏览器，可以了那为什么要两个{}呢？其实不是两个大括弧，第一个大括弧代表这里边执行js表达式，第二个括弧则代表对象，我们换...

如果你只给input绑定了value，会发现无法输入任何内容，因为在react中，有受控组件的说法，有点不大好理解，直接换种说法比较好，在form表单中我们需要完成数据的双向绑定。如果你只给input绑定了value，那么state的数据将会被绑定到input上就和你使用{this.state.name}一样，但是这只是完成了数据到视图的绑定，我们还...

0x000 概述 上一章讲咯生命周期，这一章就是事件处理咯 0x001 事件绑定 {代码...} {代码...} 0x002 解决函数绑定的this问题 上面的栗子有个问题：在handleClick内无法访问App内的资源，比如this.state {代码...} 可以这么解决这个问题： {代码...} 或者 {代码...} 或者 {代码...} 第三中方式需要babel-plugin-transform-...

上一章说明了生命周期的概念，本质上就是框架在操作组件的过程中暴露出来的一系列钩子，我们可以选择我们需要的钩子，完成我们自己的业务，以下讲的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同

0x000 概述 上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念 这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从出现到消亡都有个过程，而这个过程大抵可以分为： {代码...} 而web开发中，组件也有类似的过程，当然作为...

0x000 概述 这一章讲state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 问题 在上一章节的栗子中，我们取出一个栗子稍作修改： {代码...} 查看浏览器： 已经知道了如何渲染数据，但是怎样更新数据呢？比如我希望栗子中的date根据时间变化，我们可以如下做： {代码...} 但是React提供了一个更优...

0x000 概述 这一章讲组件，组件才是React的核心，也是React构建的项目中最小的单元。 0x001 组件 上面的章节有一个类似下面的栗子： {代码...} 查看浏览器 我们可以给他参数 {代码...} 查看浏览器 由此，我们可以自定义一些特别的组件了，比如： {代码...} 查看浏览器 0x002 组件的函数写法和参数传递 组件也可以使用jsx...

0x000 概述 在React中，渲染数据的形式有多种多样，但是万变不离其中，都是用js。 0x001 渲染文本 {代码...} 使用babel转义：babel --plugins transform-react-jsx index.js {代码...} 查看浏览器 0x002 渲染数字字面量 {代码...} 使用babel转义：babel --plugins transform-react-jsx index.js {代码...} 查看浏览器 0x...

说起来react，我喜欢的还是他的思想，在react中，实际上没有html、css、js的区别，全部都是js，就和webpack一样，可以将所有的资源等同视之。但是这在一开始，就让很多人感觉很难受，毕竟在这之前，我们看过的大部分关于web的书、文章，提出的最佳实践就是html、js、css分开来，因为前端受够了在js中拼接模板，php、java...