写在前面

在最近看了React之后，一直觉得学的懵懵然，虽然很多大佬的手写笔记，写的都很不错，但是我一直没有我想要的那种细无巨细，比如类式组件this指向问题的追根溯源，又比如三大实例属性简写的由来，总之我还是决定做一份事无巨细的笔记。

那就让我们开始吧！

初始化react脚手架

3.1.1. react脚手架

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
2. 下载好了所有相关的依赖
3. 可以直接运行一个简单效果
复制代码

2. react提供了一个用于创建react项目的脚手架库: create-react-app

3. 项目的整体技术架构为:  react + webpack + es6 + eslint

4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：npm start

yarn

• yarn start 运行脚本
  
• yarn build 项目打包
  
• yarn test 几乎不用，用于测试
  
• yarn eject 暴露webpack相关文件、是不可逆的。

运行项目

打开创建项目的文件夹，在文件路径输入cmd、进入命令窗口输入yarn start 命名运行。

最后项目会打开浏览器，出现一个logo旋转的页面

脚手架文件介绍_public

vscode打开终端 ctrl + ~

git

• 搭建脚手架的时候会直接创建git仓库。
  
• .gitignore git的忽略文件。
  
• debug.log 生成日志

public文件夹下文件介绍

SPA应用

• 全称：single page application
  
• React、Vue所写的应用都是SPA
  
• public 一般存储静态文件，例如页面、样式、图片。

favicon.ico

• 网站个性的缩略logo标志

index.html（不可以修改文件名）

• 整个项目只有一个html文件
  
• %PUBLIC_URL%
  

<!-- %PUBLIC_URL%代表public文件夹的路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 使用相对路径 -->
<link rel="icon" href="./favicon.ico" />
复制代码

• 开启理想视口，用于做移动端网页的适配

<!-- 开启理想视口，用于做移动端网页的适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
复制代码

• 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器)

<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
复制代码

• 描述网站信息

<meta
    name="description"
    content="Web site created using create-react-app"
/>
复制代码

• apple-touch-icon

<!-- 用于指定网页添加到手机主屏幕后的图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
复制代码

注意：只支持苹果手机

• manifest

<!-- 应用加壳时的配置文件 -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
复制代码

应用加壳：书写html页面，在页面外面套一个安卓的壳，就可以被转换为一个安卓应用。本质上内部还是网页。

• noscript

浏览器不支持js或者禁用了js就会调用这个标签，显示这个页面的内容

manifest.json

一个配置文件：用来配置应用程序的权限。

<!-- 若llq不支持js则展示标签中的内容 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
复制代码

robots.txt

爬虫协议文件：用于设置哪些内容是否允许被爬虫的

脚手架文件介绍_src

App.js

• 将App组件放到div标签节点。

App.test.js

• 用于测试App.js

App.css

• App组件的样式

index.css

• 通用的样式
  
• 也可以在public文件夹下面创建css文件将index.css文件放入里面。通过link引入
  

index.js

• 不是index组件，是一个入口文件
  
• 引入React核心库、React-dom库、App组件、index.css样式文件。
  
• 和index.html建立链接 （React底层就已经封装写好了）
  
• React.StrictMode
  

用于检查App组件及其子组件的代码写法是否规范是否过时。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
复制代码

logo.svg

一个图片

reportWebVitals

• 用于记录页面的性能
  
• 使用web-vitals库进行页面性能的检测

setupTests

• 用于做应用的整体测试，某一个模块的单元测试。
  
• 需要使用第三方库jest-dom

一个简单的hello组件

package.json

• 包的说明文件

README.md

• 整个仓库的说明文档

yarn.lock

• yarn包的一个缓存文件（下一次下载文件时更加快）

引入

• es6 新语法 用于引入统一暴露和分别暴露的语法。（不是解构赋值）

• 这里是取的是React身上的属性component

文件夹component

• 用于放自己定义的组件
  
• 在文件夹下面对每一个组件创建文件夹用于放置组件的js、css等文件
  

1. 文件使用index命名

• 引入的时候可以省略部分代码

import Hello from './components/Hello'
import Welcome from './components/Welcome'
复制代码

2. 文件使用组件名命名

import Hello from './components/Hello/Hello'
import Welcome from './components/Welcome/Welcome'
复制代码

组件与普通js文件的区分

• 组件文件名首字母要大写
  
• 组件后缀名改为jsx

样式模块化

子组件样式冲突

• 子组件引入的样式最终都会引入到App组件，可能会发生冲突。

解决方法：

1. 使用less

.hello {
  .title{
    background-color: orange;
  }
}
复制代码

2.样式模块化

• 将名字改为index.module.css

import hello from './index.module.css'
export default class Hello extends Component{
  render(){
    return <h2 className={hello.title}>Hello,React!</h2>
  }
}
复制代码

所有hello的样式都保存在hello这个对象里了。

vscodereact插件的安装

安装插件

• 使用代码片段（插件细节下方可以查看到）

组件化编码流程

1. 拆分组件: 拆分界面,抽取组件
   
2. 实现静态组件: 使用组件实现静态页面效果
   
3. 实现动态组件
   3.1 动态显示初始化数据

3.1.1 数据类型
 3.1.2 数据名称
 3.1.2 保存在哪个组件?
复制代码

1. 3.2 交互(从绑定事件监听开始)