课前提醒

• 学习这个课程需要具备这样的基础:
  -- HTML、CSS、JavaScript(ES6以上)

• 上课时间:
  --周一三五晚上20:00-22:00
  -- 最好来听直播, 如果没有来听直播, 找时间来看录播

• 相互尊重, 共同进步:
  -- 每个人的基础不同, 之前学习的经历和方向不同

课程内容

• 全面讲解React技术栈
• 网易云音乐PC端项目
• 网易云音乐前端团队有35人左右
• 关键模块做一下

React是什么?

• React是什么呢?
  -- 用于构建用户界面的JavaScript库.

• web端, 主要的任务就是构建用户界面,
  -- HTML: 构建页面的结果
  -- CSS: 构建页面的样式
  -- JavaScript: 页面动态内容和交互

• 原生开发问题
  -- 操作DOM兼容性的问题;
  -- 过多兼容性代码的冗余问题
  -- ...

常见的JavaScript库

• 更方便的JavaScript库
  -- 在过去很长时间内, jQuery是被使用最多的JavaScript库;

• 现在最流行的三大框架:
  -- Vue
  -- React
  -- Angular

• Angular在国内并不是特别受欢迎, 尤其是Angular目前的版本对TS还有要求

  
  image.png

React的起源

• React是2013年, FB开源的JS框架, 为什么Facebook要退出这样一款框架呢?

• 源于一个需求
  -- 该功能上线之后, 总是出现bug
  -- 三个消息的数字在发生变化是, 过多的操作很容易产生bug;

  
  image.png

• bug修复了, 但使FB的工程师并不满足于此;
  -- 思考为什么会产生这样的问题;
  -- 在传统的开发模式中, 我们过多的去操作界面的细节;

  
  image.png

• 是否有一种新的模式来解决上面的问题:

  
  image.png

React的特点-声明式编程

• 生命是变成:
  -- 声明式编程是目前整个大前端开发的模式:Vuo、React、Flutter、SwiftUI;
  -- 它允许我们只需要维护自己的状态, 挡状态改变是, React可以根据最新的状态去渲染我们的UI界面;
  在整个过程中不需要操作DOM, 原生就需要操作DOM
  function函数根据状态刷新UI

  
  image.png

React特点 - 组件化开发

• 组件化开发:
  -- 组件化开发页面目前前段的流行趋势, 我们会将复杂的界面拆分成一个个小的组建;
  -- 如何合理的进行组建的划分和设计也是重点;
  -- 划分成小的组建, 在组装

  
  image.png

React的特点 - 多平台适配

• 多平台适配
  -- 2013年, React发布之初主要是开发Web页面;
  -- 2015年, FB推出了ReactNative, 用于开发移动端跨平台
  -- 2017年, Facebook退出ReactVR, 用于开发虚拟现实Web应用程序; (随着5G的普及, VR也会是一个火爆的应用场景)

  
  image.png

掌握最先进的思想和技术

• React由Facebook来更新和维护, 他是大量优秀程序员的思想结晶;
  -- React的流行不仅仅局限于普通开发工程师对它的认可, 大量流行的其他框架借鉴React的思想

• Vue.js框架设计之初, 有很多的灵感来自Angular和React- 包裹Vue3很多新的特性, 也是借鉴和学习了React
  -- 比如React Hooks是开创性的新功能
  -- Vue Function Based API学习elReact Hooks的思想

• Flutter widgets are built using a modern framework that takes inspiration from React.

  
  image.png

HackerRank调查显示

• 在HackerRank中, 2020年有一份调研, 你更想要学习的framework:

  
  image.png

React在国内外被广泛使用

image.png

• B站用Vue开发

• 随机找的阿里高级前端工程师

  
  image.png
• node写个指令, 自动生成一些目录结构文件
• jslint, eslint代码规范
• 大厂、高级程序员更喜欢React

Hello React案例

• 为了演练React, 我们可以提出一个小需求:
  -- 在界面显示一个文办: Hello World
• 点击下方的一个按钮, 点击后文本改变为Hello React
• 先用原生的方式实现, 再用React实现

• VSCode
  -- 插件Atom Bracket Pair

  
  image.png
• 通过IP地址开启一个访问
• React兼容到IE8

• 命令式编程: 没做一个操作, 都是给计算机(浏览器)一步步命令

  
  image.png

image.png

React开发依赖

• 开发React必须依赖三个库:
  -- react: 包含react所必需的核心代码
  -- react-dom: react渲染在不同平台所需要的核心代码
  -- babel: 将jsx转换成React代码的工具
• 第一次接触接触, 依赖搞蒙, Vue只需要依赖一个vue.js文件即可, 需要依赖三个库
  -- 三个库各司其职, 目的就是让每一个库只三春做自己的事情:
  -- 在React的0.14版本之前是没有react-dom的歹念, 所有功能都包含在react里.
  -- 因为react-native.
  -- react包中, 包含了react和react-native所共同拥有的核心代码.
• react-dom针对web和native所完成的事情不同:
  -- web: react-dom会将jsx最终渲染成真实的DOM, 显示在浏览器中
  -- native: react-dom会将jsx最终渲染成原生的空间(UIButton、Buttton)
• 不要一上来就搞脚手架, 看看细节
• 添加React的依赖

什么是Babel

• babel是什么?
  -- Babel, 有名Babel.js
  -- 是目前前端使用非常广泛的编辑器、转移器
  -- 比如当下很多浏览器并不支持ES6的语法, 但使ES6的语法非常的简介和方便, 我们开发室希望使用它.
  -- 那么编写源码时, 我们就可以使用ES6来编写, 之后通过Babel工具, 讲ES6转成大多数浏览器都支持的ES5的语法

• React和Babel的关系:

  
  image.png

image.png

引入React依赖

• 如何添加这三个依赖
  -- 一: 直接CDN引入
  -- 二: 下载后, 添加本地依赖
  -- 三: 通过npm包管理

• 暂时我们直接通过CDN引入

react官网

image.png

• 注意事项: 使用jsx, 并且希望script中的jsx的代码被解析, 必须在sript标签中添加一个属性(默认script标签里不能写)

• ReactDom对象

• React最新版本16.13.1的源代码, GitHub上下载, 注意不要直接下载

• 挂在到app里面, ReactDOM.render(渲染的内容, 挂载的对象)

• 会做一个覆盖

• crossorigin作用 为了拿到跨域脚本错误信息

image.png

• 现在是写死的, 希望引入一个变量
• {{}}小程序mustache语法(胡子语法)
• React大括号就够了
• 希望下面多一个按钮, 改变变量
• 渲染的东西会覆盖, 不能写到上面, 不会显示
• jsx特点: 多个标签最外层(根)只能有一个标签
• 最外层包一个div标签
• 监听按钮的点击
• 声明式 <button onClick={}>

• React中, 当你的数据发生改变的时候, 想让界面发生改变, 必须重新渲染jsx(DOM)

  
  image.png

image.png

• 声明式编程

独立的功能, 封装成一个组件

• 所有的东西和逻辑放到一个组件里面, app

• 封装App组件

• 渲染组件

• return()看成一个整体

• jsx只有一个根<div>包裹

• 定义属性, 构造函数 constructor() {}

• ES6继承, 要调用super();

  
  image.png

• 一定要加this, 不然找不到类里面的函数

• undefined, 默认就是undefined, this的绑定有关系

• this的场景, 公众号有分析, 定义的位置是类, 调用的时候内部回调btnClick.apply(undefined), 拿不到this, 绑定了undefined

  
  image.png

• 永远不要手动调用render()函数, 没有效果, 对代码进行改进, 数据不能直接定义在当前对象里面 => this.state = { message: "Hello World"}

• 手动调用界面还是没有刷新, 只是改了数据, 没有告诉React框架要渲染 => this.setState({
  message: "Hello React"
  })

• 细节非常多, this, 为什么没有刷新...

• 为什么这个代码要这样来做

  
  image.png
  image.png