• Context
  • ContextType
  • Lazy
  • Suspense
  • Memo

2.jpg

Context

  • ` createContext(defaultValue?)

5.jpg

  • lazy & Suspense
    • 延迟加载，滚动到区域加载，（暂时没有使用的资源加载）
    • webpack，code splitting
    • import
      • import(./detail.js).then()

create-react-app

  • react-scripts 及其工作原理
  1. React出现的背景
  2. React 特性
  3. 以组件方式构建 UI
  4. jsx的本质：不是末班引擎，而是语法糖
  5. React 生命周期函数及使用场景
  6. Virtual DOM 及 key 属性的作用
  7. 组件设计模式，高阶组件和函数作为子组件
  8. 理解新的 context API 及其应用场景
  9. 使用脚手架工具构建 React 项目
  10. React项目打包和部署

2019年12月06日23:04:13

React 要点

  • 以组件方式思考 UI 的构建
  • 单一职责原则
  • DRY 原则

Fragment

  1. 空标签，不渲染DOM ```jsx 以下标签等价于 vue的

或者 <></>

<>

</>

```

1 React出现的背景和 React 特性

  1. 传统 UI 操作关注太多的细节
  2. 应用程序状态分散在各处，难以追踪和维护
    1. 传统 web UI开发的问题
    2. React 始终整体刷新页面
    3. Flux 单项数据流

颠覆式前端 UI 开发框架：React

2019-12-07_091237.jpg

React： 始终整体“刷新”页面，无需关注细节

1.jpg

React技术栈

3.jpg

React 很简单

  • 一个新概念：组件，用组件描述 UI
  • 4个必须 API
  • 单项数据流，Flux 架构，是设计模式并不是一个完整的技术实现
  • React的用法
    • 引入 .js 文件来使用
    • create-react-app
    • npx create-react-app demo

1.jpg

React数据模型如何解决 UI细节问题

  • Flux 架构，单项数据流
  • Flux 架构，是设计模式并不是一个完整的技术实现

2019-12-07_093830.jpg

2 以组件方式构建 UI

  • 以组件方式思考 UI 的构建
    • 什么时候创建组件：单一职责原则
    • 每个组件只做一件事
    • 如果组件变得复杂，那么应该拆分成小组件
  • 受控组件 & 非受控组件
  • 收据状态管理：DRY 原则
    • 能计算得到的状态就不要单独存储
    • 组件尽量无状态，所需数据通过 props 获取`
      • props 传递数据

React 快速上手

  • npx create-react-app mydemo
  • 安装成功后的界面

4.jpg5.jpg

以组件构建 UI

1.jpg

简单的 TabSelect 组件

6.jpg

  1. 创建静态 UI
  2. 考虑组件的状态组成
  3. 考虑组件的交互方式

React 组件 = 属性 + 状态

3.jpg

受控组件-非受控组件

5.jpg

3 jsx的本质：不是模板引擎，而是语法糖

5 React 生命周期函数及使用场景

6 Virtual DOM 及 key 属性的作用

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

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

8 理解新的 context API 及其应用场景

9 使用脚手架工具构建 React 项目

10 React项目打包和部署

  • create-react-app 入门级 cli，最简策略
  • Rekit
    • 拆分大项目，松耦合，可扩展
  • codeSandbox.io
    • 在线创建 react

Snipaste_2019-12-06_23-28-47.jpg

2.jpg

React 招聘

这里是蚂蚁金服体验技术部，如果你是追求极致体验的前端工程师或设计师，
发送你的简历到 xingmin.zhu@alipay.com
和我们携手创造美好的用户体验。