React入门

父组件向子组件传值：父组件可以通过向子组件传递属性，子组件通过props拿到该属性。
子组件向父组件传值：父组件先 将操作元素的方法 传递给子组件，子组件通过props调用父组件的方法。

单向数据流：子组件只能读取父组件传递的属性，不能修改父组件的属性。

当组件的state或props发生改变时，render函数就会重新执行

React对性能的提升：
使用虚拟DOM的方式来渲染页面，当组件的state和props发生改变时，会重新调用一次组件的render方法，重新生成一次页面。如果是直接使用新的DOM替换旧的DOM，非常损耗性能。而使用虚拟DOM可以极大地提升性能。

React的虚拟DOM的流程：
1. state 数据
2. JSX 模板
3. 数据 + 模板 生成虚拟DOM
1. ['div', {id :'abc'}, ['span',{},'hello']]
4. 使用虚拟DOM 生成真实的DOM
1. <div id='abc'><span>hello</span></div>
5. 数据(state、props)发生了改变
6. 数据 + 模板 生成新的虚拟DOM
1. ['div', {id :'abc'}, ['span',{},'bye bye']]
7. 比较新的虚拟DOM 和原有的虚拟DOM，找出差异处
1. Diff 算法：
2. 将多个setState合为一个setState渲染
3. 逐层比较，类似于异或
4. 列表循环时，key值要保持稳定
8. 使用新的虚拟DOM重新渲染差异处
优点：
1. 极大地提升了性能
1. 将直接生成真实DOM，改为先生成虚拟DOM，再通过虚拟DOM生成真实DOM
2. 降低比较真实DOM的损耗，改为直接比较虚拟DOM
3. 从直接渲染新的真实DOM，改为先比较虚拟DOM
4. 使用虚拟DOM的差异重新渲染数据
2. 使跨端应用得以实现（如React Native）
1. 在第三步生成虚拟DOM之后，可以通过虚拟DOM生成如Android、IOS可使用的组件

React生命周期函数

在某一时刻，自动执行的函数

1. Initialization 初始化阶段
   1. constructor
2. Mounting 挂载阶段
   1. componentWillMount 组件被挂载前，自动执行
   2. render 组件挂载时，自动执行
   3. componentDidMount 组件挂载完成时，自动执行
3. Updation 数据更新阶段
   1. props 属性更新
      1. componentWillReceiveProps 子组件重新接受Props时，自动执行
      2. shouldComponentUpdate 重新渲染render前，自动执行，且影响render是否执行
      3. componentWillUpdate 组件将被更新前、shouldComponentUpdate后，自动执行
      4. render
      5. componentDidUpdate 组件更新之后，自动执行
   2. states 状态更新
      1. shouldComponentUpdate 重新渲染render前，自动执行，且影响render是否执行
      2. componentWillUpdate 组件将被更新前、shouldComponentUpdate后，自动执行
      3. render
      4. componentDidUpdate 组件更新之后，自动执行
4. Unmounting 移除挂载阶段
   1. componentWillUnmount 子组件将被移除前，自动执行

Axios

新增依赖

yarn add axios

Charles Mock数据

使用Charles进行数据的Mock

Ant Design

使用 Ant Design 重构代码样式布局。

yarn add antd // 新增ant design依赖

Redux

详见 ReduxFlow

组件

普通组件、UI组件、容器组件、无状态组件