一. React
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
It lets you compose complex UIs from small and isolated pieces of code called “components”.
React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。
它允许您从称为“组件”的小而孤立的代码片段构建复杂的 UI。
react vs Vue 流行度对比
React最大的竞争对手是Vue
react流行度 https://trends.builtwith.com/javascript/React
vue流行度 https://trends.builtwith.com/javascript/Vue
前端库流行度分布 https://trends.builtwith.com/javascript/javascript-library
二. 背景知识
www
Tim Berners-Lee2016年度图灵奖得主
www让linux的开发模式成为可能（www@1989 linux@1991）
www开启了互联网浪潮，创造了上千万的工作机会
www的三要素：HTML+CSS+JavaScript
web2.0: AJAX是技术上的标志，XML -->JSON发扬光大
web3.0: 从我全都要，到原创支持？目前还不明朗
HTML： HTML5
- 熟悉基本标签的语法语义和属性<h1><p><span><div><form><input><button>
- 更多语义的标签<header><footer><section><aside><summary>
- 必须有封闭标签，如<br />
CSS: CSS3
- 熟悉选择器/选择器优先级/层叠样式合并
- 熟悉一个前端组件库，如semantic-ui，bootstrap或者easyUI
JavaScript(Brendan Eich)
JavaScript与人类很像，带有明显的早产的痕迹，缺陷非常多，不过一直在进步，如今的JavaScript是一门严肃的工程语言，也是最流行的语言
-
数组对象迭代
- map
- filter
- reduce
- find
- forEach
-
es6
-
导入导出
默认导出/具名导出
-
箭头函数
var func = function (a, b){return a+b}
let func = (a, b) => a+b
let f3 = (a, b) => {a, b} // 错
let f1 = (a, b) => {return {a, b}}
let f2 = (a, b) => {return {a: a, b: b}} -
析构展开语法
const [x, setX] = useState(0)
const {x, y} = props
let newCopyObj = {...oldObj}
let newCopyArr = [...oldArr]
-
生成器（语法和语义都来自python）
只有写底层库的时候需要
-
Promise对象
-
fetch函数
-
-
扩展语法jsx
-
使用标签语法创建组件，如<Hello message="world" />
-
使用花括号包含任意js表达式如
<Select search placeholder='请选择接入交换机' options={accessSwitches.map(item => ({ value: item.id, text: item.verbose }))} name='access_switch' value={instance.access_switch} onChange={changeField} />
-
-
函数式编程
函数调用有上下文，就像人有人际关系一样
系统环境
全局上下文
函数调用上下文
块级别上下文
同样的参数，返回值也相同，除了返回值，没有别的副作用，返回值只依赖参数，不以时空为转移
函数式编程非常容易维护，也非常容易写单元测试
三. 传统前端编程
- html结构
- css样式
- js事件
三者代码分离，在html文档中导入css和js
<script src="./demo.js"></script>
<link rel="stylesheet" href="./demo.css">
缺陷
- js直接操作DOM树，早期各厂商的DOM api互不兼容，导致代码的跨平台很痛苦，于是出现了jQuery，jQuery为了兼容所有平台，愈来越臃肿
- 前端html和js的分离让代码碎片化变得严重。
- 原始html属性的不受控，让值获取非常啰嗦（$('#name').val()）
- 早期的这种模式，适合使用后端逻辑生成html模版代码的开发模式（前后端不分离）
- 版本更新的时候，html对css和js的依赖让更新过程变得痛苦（浏览器缓存）
- 后面逐渐流行前后端分离，传统的那一套已不能胜任，所以出现了react和vue
四. 工具链
-
node vs V8
node.js后端解释器
-
包管理工具npm
npm是官方的包管理工具，早期版本存在一些缺陷，所以又出现yarn。
npm逐渐吸收yarn优点，已经完全覆盖yarn的特性。
-
编译工具babel
将es6和jsx新语法转换为所有浏览器兼容的js传统语法
-
项目打包webpack
压缩打包（打包成传统模式的代码）
-
代码管理工具git
一般项目初始化时，代码管理工具就为用户设置好了默认配置，包括.gitignore文件
-
还有其他一堆非核心工具，可以自主学习和采用...
-
react-scripts集成所有ALL-IN-ONE
五. react基本概念
-
组件component「最核心的概念」
- 类组件【已被淘汰】
- 生命周期【已被淘汰】
- 函数式组件【推荐使用】
- 副作用effect【推荐使用】
- 类组件【已被淘汰】
-
属性props
两个特殊的属性key和children
-
状态states
-
钩子hooks
-
virtual DOM
-
单向数据绑定
react理论上将一切都组件化，组件集中管理自己的样式状态和属性，实践中一般css还是分开，使用css类选择器定义好样式，将js和html合并为组件（jsx）
- React程序由组件树构成，root组件挂在文档的指定位置，其他组件都是root组件的后代
- 组件有自己的属性，叫做Props，是由控制它的组件传递的参数。组件名和属性就是组件的API
- 组件有自己的状态，叫做State，是完全由自己管理的。状态可以理解为组件的内部实现细节
- 一般使用react hooks管理State【函数式组件】
- Props只能传递数据给子组件，使用Context可以跨层级传递数据，一般结合hooks使用
- 流行的第三方库react-router，use-immer，react-icons
react的优点：
- Js和html放在一起，能够更好的管理高内聚低耦合
- 组件化可以更好的以设计师的思维编程
- 组件化也是模块化，可以提高代码重用
- react生态圈非常成熟且不断进取，特别适合探索性项目敏捷开发
六. 实际操作
-
安装react
npm install -g npx create-react-app
-
演示创建react项目
npx create-react-app my-app
-
演示参与老项目
npm i(npm install)
-
解释组件挂载
-
删除不必要的文件
-
自定义一个组件
-
演示使用第三方库组件
npm install semantic-ui-react
npm install semantic-ui-css
-
演示使用state
-
演示使用props
-
演示npm run build
七. 怎样算会用react
-
1.会使用hooks管理Context
-
2.会使用第三方库提升代码质量
-
3.会自定义hooks
-
4.会实现文件下载上传功能(非受控组件useRef)
-
5.会使用react-router管理前端路由
掌握一门技术最好的方式是用它
八. 推荐材料
-
《CSS3秘笈》第3版https://book.douban.com/subject/25966256/
css覆盖比较完整的教程
-
《javascript权威指南》第7版https://book.douban.com/subject/35396470/
前端唯一必读，本书在前端领域享受崇高地位
-
《React学习手册》第2版https://book.douban.com/subject/35607428/
使用最短的篇幅讲述react最本质的内容，强烈推荐，受益匪浅
-
react官方教程(函数式组件，高质量教程)https://beta.reactjs.org/learn
react新手引导教程新版，质量很高，目前只有不完整的英文版
-
前端技术检索网站，寻找，发现有价值的前端库
-
查看现有网站前端实现技术https://builtwith.com/
输入关键词搜索，比如：www.zhihu.com
-
两篇有名的文章Douglas Crockford@yahoo（JSON）
-
在线实验室
https://codesandbox.io/
网友评论