接触学习React差不多一年多的时间了，乘空档中整理下学习的react相关知识，归纳总结下，便于后期更好的学习和提升对React开发的认识。
React核心思想是：封装组件。
React主要大概包含以下这些概念：
·JSX语法糖
·React组件
·Virtual DOM（虚拟DOM）
·Data Flow（数据流）
一、JSX语法糖
什么是jsx语法糖？
百度百科这样说：语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
为什么要引入jsx语法糖？
传统的MVC是将模板放置在其他地方，比如用script标签或者模板文件，再在js中通过某种手段引用模板，按照这样的思路，想想我们多少次面对四处分散的的模板片段不知所措？纠结模板引擎，纠结模板存放的位置，纠结如何引用模板……？
jsx语法糖就是为我们解决这些纠结的。简单的来说，react认为组件才是王道，而组件与模板是紧密关联的，组件模板与组件逻辑分离是让问题变得复杂化，而jsx这种语法就是把HTML模板直接嵌入写在了js代码里面，做到组件模板与组件逻辑结合在一起不分离。
jsx语法糖知识点概要
1、jsx编写DOM结构时候、可是原生的HTML也有可能是引入的React组件。通过首字母大小写来区分，小写的HTML标签，大写开头是React组件
2、Js保留字符冲突，html的class在jsx里面要写成className。for需要写成htmlFor、行内样式margin-left这样的需要写成驼峰式marginLeft
3、style属性接受由CSS属性构成的JS对象
4、onChange事件表现更接近我们的直觉（不需要onBlur去触发）更多不同参阅官网
5、属性值需要使用表达式，用 {} 替换 “”
6、jsx注释与js注释写法一样，需要用 { } 包起来
7、HTML转义，React需要显示 © 这样的字符串转义，防止XSS，按照常规的书写成 © 是不能正常显示到，解决方案
·直接使用UTF-8字符©
·使用对应字符的Unicode（万国码）编码
·使用数组组装
·直接插入原始的HTML
8、自定义HTML属性，jsx如果有不在HTML规范中的属性，这个属性会被忽略，如果要自定义属性，使用data- 前缀。 可访问自定义属性 aria- 前缀
9、属性扩散 …
const props = { “name”: “Tab”, “age”: “man” }
等于
属性扩散可以被覆盖
二、组件
什么是组件？
总结（自）：一个完成的功能集合，就可以叫做一个组件。
什么是的React组件？
可以这么说，一个React应用就是由React组件构建而成，React组件两个核心概念：props与state，一个组件是通过这两个属性的值在render方法里面生成这个组件对应的HTML结构。
注：组件生成的HTML结构，有且仅有一个根节点。
props，由外部通过jsx属性传入React组件内，传入后，初始化成了this.props 对象，通过this.props使用。一般传入的props值是不可以更改的。虽然js对象可以做任何事，但对于this.props这个对象来说，千万不要轻易去更改设置里面的值，会带来很多想不到的麻烦。
state 是组件的当前状态，通常说的组件的“状态机”，根据状态state不同，呈现不同的UI展示。一旦状态（实际就是数据）更改，组件会自动调用 render重新渲染UI，这个更改，是通过this.setState方法来出发的。
注：此处提到UI的重新渲染是通过状态（数据）发生改变，触发重新渲染UI，react开发，切记改变思维，有操作DOM触发页面重新渲染，改变成由数据驱动页面重新渲染
原则：让组件尽可能的少状态。
哪些数据属性可以当作状态？当更改这个状态需要更新UI的，就可以处理成为一个state。
无状态组件：纯粹的函数来定义，没有生命周期，只是简单接受props渲染DOM结构。
组件生命周期
getInitialState 初始化this.state的值，组件状态之前调用一次（ES5与ES6实现方式不同）
getDefaultProps 初始化this.props 的值，组件创建时调用一次并缓存返回 this.props对象（ES5与ES6实现方式不同）
render 必须 组件生成HTML结构
componentWillMount 组件装载之前调用，render之前调用，只调用一次
componentDidMount 组件装载完成之后调用，render之后调用，只调用一次，此方法内可以获取到组件的DOM节点
componentWillReceiveProps 组件接受到新的props进行调用 nextProps，初始化render不执行
shouldComponentUpdate 当props或者state发生变化时执行，在render之前，当新的props或者state不需要更新组件时，返回false，初始化render不执行
componentWillUpdate 组件更新之前调用，更新render之前，初始化render不执行
componentDidUpdate 组件更新之后调用，更新render之后，初始化render不执行
componentWillUnmount 组件卸载时调用
事件处理
React有“合成事件”与“原生事件”。
合成事件，有react提供的事件方法，事件委托的方式绑定在组件最上层，组件卸载的时候会自动销毁绑定
原生事件，HTML的原生事件，在组件生命周期componentDidMount里addEventListener绑定，在生命周期componentWillUnount里面 removeEventListener解除绑定
给事件传递参数
bind(this, param1,param2,……);
DOM操作
findDOMNode()，由react-dom提供， 在组件生命周期 componentDidMound 可以拿到DOM元素，不用使用在无状态组件上
Refs，在jsx编写DOM结构时候定义一个属性 ref=name，然后通过 this.refs.name 获取到DOM元素
组件组合
1、插入循环的子元素，需要设置key
2、this.props.children
组件之间通信
1、父子组件之间通信
2、非父子组件之间通信
表单
受控组件：通过state控制表单显示值
非受控组件：defaultValue、defaultChecked
三、Virtual DOM
虚拟DOM是react优化加载性能提出的一个概念，在react开发实现的应用上，纯正两套DOM 一套实际渲染出来的DOM一套是虚拟DOM，两者一一对应。
四、Data Flow
1、Flux（其他文档待续）
2、Redux（其他文档待续）