川峰的博客

其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。模块加载 3 个方法，其他方法不加载。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

Class 可以通过。

本文参考自电子书《ECMAScript 6 入门》：https://es6.ruanyifeng.com/Promise 对象1. Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以

本文参考自电子书《ECMAScript 6 入门》：https://es6.ruanyifeng.com/let 和 const 命令1. let 命令尽量使用 let 声明变量，而不是 var。let 声明的变量是块级作用域， var 声明的变量是全局作用域。使用 let 变量必须先声明再使用，否则报错，不存在变量提升。相对的 var 声明的变量如果提前使用，不会报错，只会提示为undefined。let不允许在相同作用域内，重复声明同一个变量。ES6的块级作用域允许使用多层 {}

目前前端中发送网络请求的方式有很多种：选择一:传统的是基于选择二: 在前面的学习中, 我们经常会使用选择三: Fetch API选择四：axios支持多种请求方式:注意：下面的测试我都会使用https://httpbin.org这个网站来测试，是我个人非常喜欢的一个网站；我们来发送一个请求：你也可以直接发送，那么就不需要传入（当然不传入默认也是请求）当然，你也可以使用在中发送网络请求：那么，有错误的时候，中如何处理呢？使用来处理错误信息发送多个并发的请求：选读：axios(config)和axio

自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。需求：所有的组件在创建和销毁时都进行打印组件被创建：打印组件被创建了；组件被销毁：打印组件被销毁了；console.log("组件被创建了");console.log("组件被销毁了");}, [])return (console.log("组件被创建了");console.log("组件被销毁了");}, [])console.log("组件被创建了");

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。我们先来思考一下class组件相对于函数式组件有什么优势？classstateclasshooksclassrender所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。URLhashhrefhref

我们来看一下目前我们的reducerreducercounterhomecounterhome如果将所有的状态都放到一个reducer中进行管理，随着项目的日趋庞大，必然会造成代码臃肿、难以维护。reducer我们先抽取一个对counter处理的reducer再抽取一个对home处理的reducer如果将它们合并起来呢？

在之前简单的案例中，redux中保存的counter是一个本地定义的数据，我们可以直接通过同步的操作来state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。在之前学习网络请求的时候我们讲过，网络请求可以在class组件的中发送，所以我们可以有这样的结构：HomebannersrecommendsProfilebannersrecommends在reducer.js中添加state初始化数据和reducer中添加。

上面的代码是否可以实现react组件和redux结合起来呢？当然是可以的，但是我们会发现每个使用的地方其实会有一些重复的代码：比如监听store数据改变的代码，都需要在中完成；比如派发事件，我们都需要去先拿到store， 在调用其dispatch等；能否将这些公共的内容提取出来呢？我们来定义一个connect函数：这个connect参数一：里面存放component希望使用到的State属性；参数二：里面存放component希望使用到的dispatch动作；这个connect在中的。

事实上，css 一直是 React 的痛点，也是被很多开发者吐槽、诟病的一个点。.vueVue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元素上的）。childfragmentcontainer通常来讲，当你从组件的render步骤一：修改index.html添加新的节点

什么是高阶组件呢？相信很多同学都听说过，也用过 高阶函数，它们非常相似，所以我们可以先来回顾一下什么是 高阶函数。JavaScript中比较常见的都是高阶函数。高阶组件并不是React API的一部分，它是基于React的组合特性而形成的；withRouter在我们的开发中，高阶组件可以帮助我们做哪些事情呢？

在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的。如果要使用非受控组件中的数据，那么我们需要使用。在每次按键时都会执行并更新 React 的。表单的处理，这里我们再演示一下其他的情况。来获取对应的DOM呢？标签的使用也非常简单，只是它不需要通过。函数式组件是没有实例的，所以无法通过。，因此显示的值将随着用户输入而更新。而在 React 中，可变状态（在 HTML 中，表单元素（如。）之类的表单元素通常自己维护。属性，因此显示的值将始终为。

前面通过Context主要实现的是数据的共享，但是在开发中如果有跨组件之间的事件传递，应该如何操作呢？在Vue中我们可以通过Vue的实例，快速实现一个事件总线（EventBus），来完成操作；在React中，我们可以依赖一个使用较多的库events来完成对应的操作；我们可以通过npm或者yarn来安装eventsevents创建eventBus对象；eventBus.emit("事件名称", 参数列表);eventBus.addListener("事件名称", 监听函数)；

AppMainAppHeaderHeaderHeaderMainBanner总之，在一个React项目中，组件之间的通信是非常重要的环节；props。

一. 生命周期1.1. 认识生命周期很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期；React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；生命周期和生命周期函数的关系：生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；比如卸载过程（Unmount），组件从DOM树中被移除的过程；

在ES6之前，我们通过function来定义类，但是这种模式一直被很多从其他编程语言（比如Java、C++、OC等等）转到JavaScript的人所不适应。原因是，大多数面向对象的语言，都是使用class关键字来定义类的。而JavaScript也从ES6开始引入了class关键字，用于定义一个类。ES6之前定义一个Person转换成ES6中的类如何定义呢？类中有一个构造方法，当我们通过new关键字调用时，就会默认执行这个构造方法。构造方法中可以给当前对象添加属性。

目前公司多端项目开发中使用的 js/css文件结构如下：如果你也是第一次接触这种，你会好奇的发现，它的CSS的文件命名方式有点特殊，跟传统的.css文件不同，要想搞清楚这样命名，主要了解两个东西，一个是 CSS Modules, 通过该链接我们了解到 CSS Modules 就是以模块化的方式来管理 CSS，它可以避免 CSS 样式全局污染的问题，因为使用CSS Module编译后的class类名会变成一个唯一的字符串, 它是采用 css-loader 默认的哈希算法[hash:base64]来生成