react 的基础认识二

一、理解 Virtual DOM 及 key 属性的作用

1. JSX 的运行基础，Virtual DOM

2. 虚拟 DOM 的工作，如下所示：

• 广度优先分层比较
• 根节点开始比较
• 属性变化及顺序
• 节点类型发生变化
• 节点跨层移动

3. 虚拟 DOM 的两个假设，如下所示：

• 组件的 DOM 结构是相对稳定的
• 类型相同的兄弟节点可以被唯一标识

二、组件设计模式，高阶组件和函数作为子组件

1. 组件复用的另外两种形式，高阶组件和函数作为子组件

2. 高阶组件 HOC，高阶组件接受组件作为参数，返回新的组件

3. 函数作为子组件，一个组件 render 的内容，由使用者来决定

4. 高阶组件和函数子组件都是设计模式，可以实现更多场景的组件复用

三、理解新的 Context API 及其使用场景

1. React 16.3 的新特性 Context API，用于解决组件间的通信。provide 为根节点，consume 为使用它的节点，Context 为全局承接

四、使用脚手架工具创建 React 项目

1. 使用脚手架工具创建 React 应用，Create React App，Codesandbox，Rekit

五、打包和部署

1. 为什么需要打包，如下所示：

• 编译 ES6 语法特性，编译 JSX
• 整合资源，例如图片，Less/Sass
• 优化代码体积

2. 打包注意事项，如下所示：

• 设置 nodejs 环境为 production
• 禁用开发时专用代码，比如 logger
• 设置应用根路径