React16_4整理-开篇
# 前言
这篇文章的笔记是在2018年学习React时整理的内容,虽然那时候没有hooks,但是还是决定整理出来,因为React class也是很经典的,后面可以再写几篇react hooks相关的react文章。
# 技术点
js
ES6
webpack
npm
create-react-app
脚手架工具
组件化思维
JSX
开发调试工具
虚拟 DOM
生命周期
React-transition-group
Redux
Antd
UI,容器组件
无状态组件
redux-thunk
redux-saga
Styled-components
immutabel.js
redux-immutable
axios
# React 介绍
Facebook 推出
2013 年开源
函数式编程
使用人数最多的前端框架
健全的文档与完善的社区
React Fiber
React原来是php项目,后来改了编译器,换成js来编译,然后加入虚拟dom。所以React只做两件事,一件事是渲染ui,一件事是响应事件。
mvc和mvvm都是早些年angular的设计理念。react并不是什么mvvm和mvc,它只是一个很小的东西,只做那两件事儿。它只是个工具。backbone才是真正的mvc,它是模仿java的spring,挪到前端来了。
# React.js 与 Vue.js 对比
React.js 灵活性更大一些
React.js 处理一些复杂的方案时有更多一点的选择
Vue.js 提供了更加丰富的 API 实现功能更简单
Vue.js 的灵活性就有了一定的限制
复杂度大的项目时倾向使用 React.js
复杂度不是特别高的项目时用 vue.js 开发更爽一些
# React 组件
一个页面很难写,但是如果把他们拆分成一个个小组件就简单多了。
import React, {Component} from 'react'
中的Component
等价于 React.Component
之所以要引入 React
,因为 将 html 标签或者自定组件生成虚拟dom
时要用
到React.createElemnt()
这个方法,所以你不引
入就会报错
。
# React JSX
在 react 中 JSX 语法可以直接写 html 标签,不需要
你在 html 标签外面加单、双引号
jsx 中自定义组件无论是函数式
还是类语法糖式
,都要首字母大写,如果是小写就会不支持,因为避免
和 html原本
的标签
起冲突
。
# 环境搭建
# 简单介绍
引入.js
来使用 React,这种方式性能很低
,不好维护
。
通过脚手架工具来编码,一般通过grunt、gulp、webpack
这样的工具来编译
脚手架。
官方脚手架工具:Create-react-app
使用 npm 命令:npm install -g create-react-app
安装这个脚手架工具
使用命令create-react-app my-app
创建一个项目
cd 进入 my-app
目录 使用 yarn start
开一个服务后自动打开浏览器查看默认页面
# 工程介绍
npm run start
和 yarn start
一样
yarn.lock
文件:项目文件的安装包以及一些限制(不要去动)。
README.md
文件:这是这个项目的说明文件。
package.json
文件:这是项目的依赖包以及指令定义说明文件。
.gitignore
文件:如果你进行代码管理的时候,不想把一些文件上传到仓库时,可以将那些文件及文件夹写到里面去。
node_modules
文件夹:存放一些第三方的包文件、一些第三方的模块儿。
# public
文件夹
favicon.ico
: 网站图标文件
index.html
: 简单的模板文件,<noscript>
当前网页禁用脚本</noscript>
标签标识页面如果禁用了脚本,就会显示脚本标签中的内容。
manifest.json
: 配置 PWA 渐进式 web 应用的 清单内容,如定义 当在手机桌面时作为一个 app 快捷名称。如定义 当在手机桌面时作为一个 app 快捷图标的规格大小。如定义 当在手机桌面时作为一个 app 快捷图标的网址,定义主题颜色、背景颜色等等。
首页会去引入这个文件 <link rel = "manifest" href = "%PUBLIC_URL%/manifest.json">
# src 文件夹
当前项目所有的源代码,整个程序的入口在 index.js 中。
import React from 'react'
表示引入 react 模块儿
import './index.css'
表示引入这个 css 文件嵌入到 js 中
import App from './App'
表示引入当前目录下的 App.js 文件
import logo from './logo.svg'
表示引入一个图片格式的文件
import registerServiceWorker from './registerServiceWorker'
表示注册一个ServiceWorker
import registerServiceWorker from './registerServiceWorker'
,表示引入一个registerServiceWorker.js
文件,这是一个 PWA
文件 表示写网页就像写一个手机 app 一样。
是渐进式
web 应用的标准,把这个网页放到一台 https 协议的服务器上,用户首次访问这个网页需要联网,如果突然间这个网页断网了,第二次也依然可以访问这个网页,因为registerServiceWorker
将网页存储
到本地
了。
App.test.js 文件:这是一个自动化的测试文件。