1.react
在使用 react的时候，一定会有以下引用:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
（原理看这里）：React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。这就是Virtual DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，换句话说：根据React的设计，所有的DOM变动，都现在虚拟DOM上发生，然后再将实际发生变动的部分反映在真实DOM上，这种算法叫做diff算法，它可以极大提高网页的性能表现，就是因为React有个diff算法，更新Virtual DOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。所以虚拟DOM也是react的特色之一。
但快速要了解react ，只要了解一下五个核心：
（1）组件
1.1 定义：
React 组件的意思就是可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。
1.2如何创建react组件？
三种方式：
1.函数式定义的无状态组件
2.es5原生方式React.createClass定义的组件（这个方法是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件）
3.es6形式的extends React.Component定义的组件（当前项目）
问题：无状态组件和有状态组件的区别又是什么？
答：无状态组件是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，所以该组件是无state状态的，不能使用this,而其他的有状态的组件是可以的，它有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，和使用state。
1.3组件怎么用？
当然组件不是只有一个，就会设计很多很多，当你写好了你组件的逻辑，使用就很简单了：
引入：import TemplateForm from './TemplateForm'; //TemplateForm就是我写的组件
调用：<TemplateForm />或者<TemplateForm></TemplateForm>//这俩个写法，是一个意思
1.4组件之间怎么进行传值呢？
对于拆分的组件之间，就像一个身体，四肢就像子组件，那么组件之间如何传递信号呢？
父传子： 父子组件之间的传值是通过组件中有一个 只读的对象 叫做 props，无法给props添加属性；react中数据流是单向的，如果多个组件都要使用某个数据，最好将这部分共享的状态提升至他们最近的父组件当中进行管理。可以声明
const templateFormOpt = {
data: this.state.data || {},
.......
refresh: () => this.refresh(),
};
<TemplateForm {...templateFormOpt}/>,那么在组件中就可以 通过props拿到templateFormOpt的值了。哦耶～好厉害的样纸！
子传父：子组件通过回调函数/自定义事件将值传给父组件。
<TemplateList handleChangeTemplate={this.handleChangeTemplate.bind(this)}/>
兄弟传值：
1.子传父，父再传子
2，context(有兴趣可以自己研究一下)：context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;
但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.
3，广播 类似vuejs的$emit,angularjs的 $broadcast,详细可以参考：https://www.cnblogs.com/zhu-xingyu/p/5657194.html
（2）JSX语法
JSX是react实现的语法基础。react项目中js颠覆了我对js文件只写js语法的看法，它把HTML和JS代码都写一起了，它可以在通过{}大括号来在JSX中显示JS变量，也可以不需要交借助标签可以直接和三元表达式结合来用，效率up.
jsx中写样式：
（1）直接写行内样式：<div style={{border:'1px solid red', fontSize:'12px'}}>
(2)对象形式:<div style={styleObj.liStyle}>
var styleObj = {
liStyle:{border:'1px solid red', fontSize:'12px'},
h3Style:{color:'green'}
}
(3)写入css文件中，然后在js中导入：
import '../css/comment.css'
<div className="styleObj">
(4)当我们使用拼接取动态的css样式的时候，可以用是 ES6 的 Template Strings 模版字符串
就是用占位符的方式来拼接字符串
我们是这么用的：
const iconType = {
prog: "icon-file-zip2",
local: "icon-files-empty",
cfg: "icon-file-text3",
};
<i className={`${iconType[item]} mr10`}>,当item变化时，则可以取动态变量了。
（3）Props & State &refs
俩者的关系呢，就像是父母（父组件）给我们（子组件）肉体（props），但是我们的情绪，感情(state)属于是我们自己的.
1，props:组件之间可以通过Props进行交互,但数据流是单向的：数据只能从父组件传向子组件，Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改
2，组件的state同样也能被传入到子组件中作为子组件prop的值。你需要明确的就是在React当中整个数据流都是向下传递的，包括路由、数据层、各个组件等等，从整个应用的state中来并汇聚到一起,也不是随便的更改但可以setState的方法来修改state，在生命周期的时候可以初始化值可以更改值
3.当需要从组件获取真实DOM的节点时，就需要用到一种非常特殊的属性refs，可以用来绑定到render()输出的任何组件上。例如：<input ref="myInput" >,通过this.refs.myInput获取。由于this.refs.[refName]属性获取的是真实DOM，所以必须等到虚拟DOM插入文档之后，才能使用这个属性，否则会报错。React组件支持的事件很多，如Click、KeyDown、Copy、Scroll等。
（4）组件的执行过程
组件的执行过程：所有的组件都是从render()方法开始执行，通过组件重的构造函数初始化this.state,再调用组件中的render()方法，render()中输出虚拟的DOM节点，此时会调用生命周期的钩子函数，如：componentWillMount(),componentDidMount(),只会执行一次，当生命周期中创建其中对象到调度界面ui更新，当react知道状态改变(setState()更改state中的值)，则会再次调用render（）更新页面，
（5）组件生命周期
react生命周期是再react项目中的重中之重！组件在渲染的过程中每个阶段触发的事件，就是一个组件的生命周期。一定要理解，吃透...在每个阶段能做什么操作，怎么执行
getDefaultProps()：设置默认的props，也可以用dufaultProps设置组件的默认属性.在使用es6的class语法时是没有这个钩子函数的，通过 constructor() 的参数props获取
getInitialState()：在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props
说明：使用es6的class语法时，通过 constructor() 的参数props获取
componentWillMount() :组件初始化时只调用，以后组件更新不调用，页面仍是虚拟，无法获取页面中的DOM对象，整个生命周期只调用一次，此时可以调用 setState() 方法来改变状态值修改state。
render() :react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了，state改变不断重新调用render()会导致递归渲染。
componentDidMount():组件已经挂载到页面中，可以进行DOM操作，可以通过 setState() 修改状态的值，该组件渲染之后调用，只调用一次。
componentWillReceiveProps(newProps):组件接受到新的props前触发这个方法，可以 if (this.props.a != newProps.a) 判断是否更改，使用this.setState()处理状态改变
shouldComponentUpdate(nextProps, nextState):react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候
componentWillUpdata(nextProps, nextState):组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
componentDidUpdate():组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
componentWillUnmount():组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
2.antd(Ant Design组件库)
Ant Design是结合了react开发的很容易上手的组件库，封装了很多实用的 React 组件。它有优美的交互语言和视觉风格。当然作为使用者来说，快速上手，我只是花费了时间去了解他的组件名称（可能看了知道，但是却不熟悉它的叫法的缘故），使用方法和样式，当你在项目中具体使用的时候，再详细的了解他提供的属性和api使用即可。使用：记得import { Button } from 'antd';按需加载
3.less
less，我是第一次接触，其实以前想象中那么难，项目自己引入解析，你只要知道他的写法和特点：
1，可以定义变量，允许我们单独定义一系列通用的样式，然后在需要的时候去调用。
2，混合
（1）可以将一个定义好的class A，在另一个class B中调用，从而简单实现class B继承class A中的所有属性，
（2）并且能够带参数使用，生成的css参数值不一样，类似函数的继承一样，带参数混合，
（3）如果定义多个，只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
3，可以在一个选择器中嵌套另一个选择器来实现继承，这样看起来less文件的层级结构一目了然，生成的css,文件中和我们单独写的一样，这样很大程度减少了代码量，并且代码看起来更加的清晰。结合& 符号的使用—如果你想写串联选择器（.a.b{}），而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.，在其他的class中调用这个层级结构的，用（例如：#bundle>.button;）加入
4，进行运算
(1)LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位
(2)运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
(3)LESS 提供了一系列的颜色运算函数. 颜色会先被转化成HSL色彩空间, 然后在通道级别操作,有对应集中color函数去操作饱和度，深浅等的方法调用，使@new 将会保持 @old的色调, 但是具有不同的饱和度和亮度.
（4）提供了数学函数round(1.67)；ceil(2.4)；floor(2.6);percentage(0.5)等转换
5，表达式匹配，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。
6.作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.
7，注释仍旧保留，注释的地方不参与编译
8，导入：你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以
4.fetch
在项目中我们使用的也是封装好的fetch方法 :Fetch.get(url, options, callback);也并没有写初始代码，而在fetch中fetch('url', {method:'GET'}) .then((res)=>{returnres.text() }) .then((res)=>{console.log(res) })这样可以不断的返回promise,捕获异常
