一、理解 Virtual DOM 及 key 属性的作用
-
JSX
的运行基础,Virtual DOM
-
虚拟
DOM
的工作,如下所示:
- 广度优先分层比较
- 根节点开始比较
- 属性变化及顺序
- 节点类型发生变化
- 节点跨层移动
- 虚拟
DOM
的两个假设,如下所示:
- 组件的
DOM
结构是相对稳定的 - 类型相同的兄弟节点可以被唯一标识
二、组件设计模式,高阶组件和函数作为子组件
-
组件复用的另外两种形式,高阶组件和函数作为子组件
-
高阶组件
HOC
,高阶组件接受组件作为参数,返回新的组件 -
函数作为子组件,一个组件
render
的内容,由使用者来决定 -
高阶组件和函数子组件都是设计模式,可以实现更多场景的组件复用
三、理解新的 Context API 及其使用场景
React 16.3
的新特性Context API
,用于解决组件间的通信。provide
为根节点,consume
为使用它的节点,Context
为全局承接
四、使用脚手架工具创建 React 项目
- 使用脚手架工具创建
React
应用,Create React App,Codesandbox,Rekit
五、打包和部署
- 为什么需要打包,如下所示:
- 编译
ES6
语法特性,编译JSX
- 整合资源,例如图片,
Less/Sass
- 优化代码体积
- 打包注意事项,如下所示:
- 设置
nodejs
环境为production
- 禁用开发时专用代码,比如
logger
- 设置应用根路径