（一）material-ui(国外)

• 官网: http://www.material-ui.com/#/
• GitHub: https://github.com/callemall/material-ui

（一）Redux 理解

1.学习文档

• 英文文档: https://redux.js.org/
• 中文文档: http://www.redux.org.cn/
• Github: https://github.com/reactjs/redux

（一）setState 更新状态的两种写法

1.对象式的 setState

• setState(stateChange, [callback])
• stateChange 为状态改变对象，该对象可以体现出状态的更改
• callback 是可选的回调函数，它在状态更新完毕、界面也更新后（render 调用后）才被调用

const { count } = this.state;
// this.setState({ count: count + 1 });
// setState的调用是同步的，但是后续引起React更新的动作是异步的
// console.log("13行的输出", this.state.count); // 0

// callback是React更新状态后被调用
this.setState(
  {
    count: count + 1,
  },
  () => {
    console.log(this.state.count); // 1
  },
);

（一）概述

1.React Router 以三个不同的包发布到 npm 上

• react-router
  • 路由的核心库，提供了很多组件、钩子
• react-router-dom
  • 包含 react-router 所有内容，并添加一些专门用于 DOM 的组件
  • 例如 <BrowserRouter> 等
• react-router-native
  • 包括 react-router 所有内容，并添加一些专门用于 React Native 的 API
  • 例如 <NativeRouter> 等

（一）使用 create-react-app 创建 React 应用

1.React 脚手架

• xxx 脚手架
  • 用来帮助程序员快速创建一个基于 xxx 库的模板项目
  • 包含了所有需要的配置（语法检查、jsx 编译、devServer......）
  • 下载好了所有相关的依赖
  • 可以直接运行一个简单效果
• React 提供了一个用于创建 React 项目的脚手架库：create-react-app
• 项目的整体技术架构为：React + Webpack + ES6 + ESLint
• 使用脚手架开发的项目的特点
  • 模块化
  • 组件化
  • 工程化

（一）理解

1.前置说明

• React 本身只关注于界面，并不包含发送 ajax 请求的代码
• 前端应用需要通过 ajax 请求与后台进行交互（json 数据）
• React 应用中需要集成第三方 ajax 库（或自己封装）

2.常用的 ajax 请求库

• JQuery
  • 比较重，需要另外引入，不建议使用
• Axios
  • 轻量级，建议使用
  • 封装 XmlHttpRequest 对象的 ajax
  • Promise 风格
  • 可以用在浏览器端和 Node 服务器端

（一）相关概念的理解

1.SPA

• 单页 Web 应用（Single Page Web Application, SPA）
• 整个应用只有 一个完整的页面 (index.html) — 单页面多组件
• 点击页面中的链接 不会刷新 页面，只会做页面的 局部更新
• 数据都需要通过 ajax 请求获取，并在前端异步展现

2.路由

1）什么是路由？

（一）简介

1.官网

• 英文官网
• 中文官网

2.介绍

• 用于动态构建用户界面的 JavaScript 库（只关注于视图）
• 由 Facebook/Meta 公司开源

（一）基本理解和使用

1.使用 React 开发者工具调试

• 基于 Chrome 浏览器：React Developer Tools
• 提供方：Facebook / Meta 公司

2.函数式组件

• 执行了 ReactDOM.render(
• 此处的 this 是 undefined，babel 编译后开启了严格模式，禁止自定义函数内的 this 指向 window

<script type="text/babel">
  {
    /* 1.创建函数式组件 */
  }
  function MyComponent() {
    console.log(this);
    return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>;
  }

  {
    /* 2.渲染组件到页面 */
  }
  ReactDOM.render(<MyComponent />, document.getElementById("test"));
</script>

（一）Vue3 简介

• 2020 年 9 月 18 日，Vue.js 发布 3.0 版本，代号：One Piece（海贼王）
• 耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者
• GitHub 上的 tags 地址

（二）Vue3 带来了什么