接触React也有一段时间，一直想对自己工作学习中遇到的一些知识点做一个总结，却迟迟没有付诸行动，终于下定决心。本文主要对自己遇到的一些疑惑的知识点进行总结。
1. JSX是什么
JSX是运用于React架构中的一种JavaScript的语法扩展，格式类似于模版语言，主要用来声明React中的元素。推荐在React中使用JSX的原因如下：
- 执行更快, JSX在编译为JavaScript代码后做了优化
- 类型安全，在编译过程中可以发现错误
- 使用JSX编写模版更加快速简单
2. 为什么用className
- ES5之前，在对象中不能使用保留字，JSX作为JavaScript的扩展，所以采用className代替class;
-
React最初的理念是想和浏览器的DOM API保持一致，dom操作元素时设置class使用className这个API:
-
解构赋值问题, 解构属性如果分配class变量会报错, 如下所示:
3. 为什么不能直接this.state.xx = xx
刚接触到React的时候，我犯过直接用this.state.xx = xx的错误, state的值确实会更新, 但不会触发UI的更新, 后面在了解了setState的原理后才知道其中原因。es6中constructor里初始化state使用this.state, 其他情况this.state是只读的, 修改state值采用setState方法, setState不仅仅更新了this.state的值，也是触发 React的render的机制。
4. 关于setState, 同步还是异步, 第二个参数用法,参数采用对象和函数的区别...
4.1. setState同步还是异步
setState异步行为和第二个参数用法
通过console控制台可以看到打印count: 1, 点击 div (通过合成事件绑定) 后打印1, 以上是setState中的异步行为; 修改incrementCount函数如下所示:
通过控制台打印的count值为更新后的；setState函数第二个参数是一个回调函数,当setState结束并重新呈现UI时调用, 主要用来监听React渲染结果
setState的同步行为
通过console控制台可以看到打印setTimeout: 1, 点击 div (通过原生事件绑定) 后打印2, 以上是setState中的同步行为;
以下是我简单的总结, 水平有限
React在其内部机制能检测的地方,比如合成事件, 钩子函数, 生命周期中表现出异步行为, 在其机制检测不到的地方, 例如setInterval, setTimeout, promise, 原生事件中表现出同步行为;
4.2 setState参数采用对象和函数的区别
setState参数采用对象的行为
从代码层面上看, 点击div后, 页面上会显示couont: 3, 实际只增加了1,这是 React批量更新的结果;
setState参数采用函数的行为
通过控制台打印, 点击一次 div后, 实现了累加3次的结果,传入的参数result是一个 state对象, 每次调用plusCount之前, result都是最新的 state;
通过对比发现, setState的参数采用函数能够得到可靠的state值, 如果你要使用当前组件的状态或者属性值来计算下一个状态，可以采用函数作为 setState 的参数；
5. React中组件为什么要大写字母开头
在用React开发过程中, 都是采用JSX语法, 我曾经写了一个小写字母开头的组件, 结果就是在页面上找不到我写的组件, 后面定位到React组件必须大写字母开头;
React中 从JSX语法转变为真实的dom的过程: JSX -> virtual DOM -> real DOM, 浏览器无法识别JSX语法, 需要babel进行转译转化为virtual DOM, 原因出在babel的转译过程;
babel调用React.createElement(type, config, children)转译JSX语法, 组件首字母小写时, babel转译时会当成字符串传递进去, 首字母大写时, babel会传递一个变量进去;
6. React中组件通信
React是单项数据流, React中组件通信分几种情况, 父组件向子组件通信, 子组件向父组件通信, 跨级组件通信, 没有嵌套关系的组件之间通信;
父子组件通信
React中数据自上而下传递, 父组件向子组件通信比较常见, 父组件通过props向子组件传递信息;
子组件通过利用回调函数和自定义事件机制向父组件传递信息; 可以简单理解为父组件向子组件通信采用属性通信, 子组件向父组件通信采用事件通信;
跨级组件通信
跨级组件之间可以通过层层传递props进行通信; 兄弟组件之间可以利用同一层级的上级作为中转站进行通信, 如果兄弟组件都是顶层组件,可以在外层套一层组件, 该组件起到保存数据和传递信息的作用; 组件层级嵌套比较深, 可以通过context方式, 可以在contructor中传递context参数, 利用上下文getChildContext来传递信息, 任何一层级的子级都可以通过this.context直接访问(context是一个全局变量, 且不知道是哪里传递过来的, React官方文档不建议使用); 组件之间还可以通过全局事件来通信, 例如不同的页面可以通过参数传递数据, 下个页面通过location.param获取;
没有嵌套关系组件通信
没有嵌套关系的组件之间可以采用自定义事件进行通信, 例如发布/订阅模式;
React最难的在于如何高效的实现组件之间的通信, 自己实现组件间通信, 状态难以管理, 可以借助状态管理工具如flux, redux, mobx等;
总结
本文只是对React部分知识点做一些简单的总结, 还有一些不全面和不够深入的地方, 后续文章会继续总结。
