课前提醒
学习这个课程需要具备这样的基础:
-- 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在国内外被广泛使用
- 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
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
引入React依赖
如何添加这三个依赖
-- 一: 直接CDN引入
-- 二: 下载后, 添加本地依赖
-- 三: 通过npm包管理暂时我们直接通过CDN引入
注意事项: 使用jsx, 并且希望script中的jsx的代码被解析, 必须在sript标签中添加一个属性(默认script标签里不能写)
ReactDom对象
React最新版本16.13.1的源代码, GitHub上下载, 注意不要直接下载
挂在到app里面, ReactDOM.render(渲染的内容, 挂载的对象)
会做一个覆盖
crossorigin作用 为了拿到跨域脚本错误信息
- 现在是写死的, 希望引入一个变量
- {{}}小程序mustache语法(胡子语法)
- React大括号就够了
- 希望下面多一个按钮, 改变变量
- 渲染的东西会覆盖, 不能写到上面, 不会显示
- jsx特点: 多个标签最外层(根)只能有一个标签
- 最外层包一个div标签
- 监听按钮的点击
- 声明式 <button onClick={}>
-
React中, 当你的数据发生改变的时候, 想让界面发生改变, 必须重新渲染jsx(DOM)
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
