关于React, 你需要知道什么

上一篇文章对Team 接入React 技术栈，以及使用Umi 框架做了总结。
从项目开始到现在使用React 也有近一年的光景了，今天就对项目中使用React做一些总结。

JSX

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。(Baidu 百科)

JSX 和 HTML的区别
1. 标签特性采用驼峰式大小写风格
2. 所有的袁术都必须闭合
3. 特性名称基于DOM Api 而不是HTML 语言规范

JSX 本质上是react 的语法糖，最终会转换成js 代码。JSX的出现就是为了简单快捷的构建组件结构，同时又具有较好的可阅读性, 所以掌握JSX 模板语法是写React 的基础。

React 事件

了解react 事件绑定之前，需要先了解一些事件委托。
React 并不是将 click 事件直接绑定在 dom 上面，而是采用事件冒泡的形式冒泡到 document 上面。

事件委托的优势：
1、减少事件注册,节省内存，能够提升整体性能。
2、简化了dom节点更新时,相应事件的更新（用过 jquery 的都知道，动态加入的元素，事件需要重新绑定

同时react 中的事件并不是原生事件，而是合成事件。简而言之，react 对原生事件进行了一定程度的封装以及对不同平台的事件实现做了统一的处理。

1.合成事件 (SyntheticEvent) 可以认为是浏览器原生事件跨浏览器的封装，相 
  当于 React 帮我们做了浏览器的兼容性处理。
2.React 想通过 SyntheticEvent 实现跨平台事件机制。
3.原生事件升级、改造，比如 React 的 onChange 事件，它为表单元素定义了 
  统一的值变动事件，例如 blur、change、focus、input 等。

这里有一点需要注意的是，由于react 中采用的是合成事件对象，所以在阻止冒泡时和原生的处理方式，有所不同。

React 生命周期

生命周期是一个对象从创建，执行一系列操作以及到销毁的一个过程，在这个过程中特定的点，一般是在状态改变的时候，会抛出生命周期钩子让外部能知晓当前对象的状态或者状态的改变而做一些处理。
react 中生命周期即react 组件的创建，更新，销毁的过程。在这个过程中react 给出了一系列生命周期钩子，比如componentDidMount, componentDidUpdate等等。

lifecycle.png

React 状态和属性

react 给出的组件的定义：

UI = Component(props, state)

简而言之，props是组件的对外接口，state是组件对内的接口(内部的状态)。所以在封装组件时，首先就需要思考的是，props 和state的定义。
react的组件结构是树形结构，父组件到子组件或者祖先组件到子组件进行属性传递时，就需要通过props来实现。
react组件内部，它需要自己独立的状态需要维护时，就需要同时state 来实现。

props 和state的区别：
state作为组件内部的状态，它是可变的，它是反应组件内部状态的集合。
props作为组件的属性输入，它是不可变的，它反应的是组件初始属性的集合。

如何定义state 和props

组件封装

组件的封装并不是react 独有的特性，它是一种抽象的思想。封装组件和封装对象是相同的，对外暴露接口即props,隐藏内部细节。
react在官网上提出react的设计哲学, 从设计稿开始，拆解一个页面或者一个组件。

thinking-in-react-components.png

FilterableProductTable (橙色): 是整个示例应用的整体
SearchBar (蓝色): 接受所有的用户输入
ProductTable (绿色): 展示数据内容并根据用户输入筛选结果
ProductCategoryRow (天蓝色): 为每一个产品类别展示标题
ProductRow (红色): 每一行展示一个产品

它将一个页面分解成了若干的组件块或者说视图区。一块视图视图就是一个组件，它只做这个视图里的事情。官方认为一个组件只做一件事，我理解的一件事并不是说，它只做一个功能的显示或者交互，它应该是说的高内聚。即在这个视图区域里，它维护了这个视图区域里的所有显示以及交互。
其实并不建议将所有的组件都封装的粒度太细，甚至它包含的内容只有一个html 标签的程度，这样项目中一个完整的功能模块会出现大量的组件聚集，同事也会带来多层组件状态管理的问题。

Knowledge

执行 setState 到底做了什么
 React Fiber是什么
 React 渲染优化：diff 与 shouldComponentUpdate
React 源码剖析系列－不可思议的 react diff
react Hooks

状态管理

react 的状态虽然对内可以有state控制，对外也可以由props(父组件的state)控制，但是由于react 的页面是树形结构，祖先组件向子组件传递消息时，就比较困难。虽然react 提供了context api 作为全局的状态管理的方法，但是由于使用起来比较麻烦，并且也没有解决异步更新的问题，所以它并不背开发者们接受，因此衍生出了三方的状态管理方案，redux，saga, mobx 等等。
同时官方也察觉了这个问题，在v16.8的时候推出了 react hook,虽然它并不是一个完整的状态管理方案，但是useContext api 也为用户进行状态管理提供了一定程度上的便捷。
社区中状态管理方案主流思路的有两种：redux 和 mobx。

redux 是Flux模式的一种实现，遵循单向数据流的原则。

它的关注点：
1.Action：一个JavaScript对象，描述动作相关信息，主要包含type属性和 
  payload属性：type：action 类型；payload：负载数据；
2.Reducer：定义应用状态如何响应不同动作（action），如何更新状态；
3.Store：管理action和reducer及其关系的对象，主要提供以下功能：维护应用状 
  态并支持访问状态（getState()）；支持监听action的分发，更新状态（dispatch(action)）；支持订阅store的变更（subscribe(listener)）；

redux.png

社区里面又根据redux 衍生除了soga , dva 等等状态管理库。

mobx 遵循响应式编程的思想,它使得状态管理变得简单并且可伸缩。

它的关注点：
1.Action：定义改变状态的动作函数，包括如何变更状态；
2.Store：集中管理模块状态（State）和动作（action）
3.Derivation（衍生）：从应用状态中派生而出，且没有任何其他影响的数据，我们称为derivation（衍生），衍生在以下情况下存在：
     a.用户界面；
     b.衍生数据；

mobx.jpg

如何选择：
1.如果项目很小很简单，可以直接使用官方的context 或者 使用hook useContext来管理状态。
2.中小型项目，可以采用简单灵活的mobx。灵活代表则它的模板约束很少，虽然易于扩展，但是并不易于开发大型项目。
3.中大型的项目，可以采用redux 或者redux 衍生出的状态管理库，saga， dva 等等。

写在最后

其实如上的总结，官方文档已经清晰，总结的很好了。如果想学习如何使用react ，建议还是从官方文档开始。多读文档，多写，多思考。