react学习

react-router-dom V6 路由传值及功能介绍

 

# 脚手架

## 初始化项目

npx create-react-app my-app create-react-app是脚手架名字

npm init react-app my-app

yarn create react-app my-app

## 启动项目

yarn start

# 项目结构

## public/robots.txt

搜索引擎baispider(蜘蛛)在访问一个网站时，会先检查该网站目录是否存在robots.txt文件。这个文件用于指定spider(蜘蛛)在网站抓取的范围，也就是你想让他抓取部分和你不想让他抓取部分的说明文件。

User-agent: * 表示允许所有搜索引擎蜘蛛来爬行抓取。也可以把 * 去掉，改为特定某一个或者某些搜索引擎蜘蛛来爬行抓取，如百度是Baiduspider，谷歌是Googlebot。

Disallow: 是说明不允许搜索引擎蜘蛛抓取的URL路径，如Disallow: / 就是禁止收录根目录下的所有文件。

## public/manifest.json:

这个文件是告知浏览器一些信息，比如应用图标、启动画面。

icons指定了需要的图片来源、大小、类型；

start_url指定了开始页面就是public/index.html(.就是直接访问此文件的所在目录，存在index.html)；

display是指定显示模式，这里是standalone；

theme_color定义应用程序的默认主题颜色

# JSX JavaScript XML 在js中写HTML

- 属性名用驼峰命名法

- 特殊属性名 class->className for->htmlFor tabindex->tabIndex

- 没有子节点的react元素可以用/>结束 <span />

- 推荐 const div = （<h1>aa</h1>） 用（）包裹

# 组件

## 函数组件

- 使用函数创建，函数名大写

- 必须有返回值，返回值为null，不渲染任何内容

- 渲染函数组件： 用函数名作为组件标签名

## 类组件

- 使用es6的class。函数名大写 继承React.component父类，可使用父类的属性和方法

- 必须提供render()方法，render()必须有返回值，表示该组件的结构

- 返回值为null，不渲染任何内容

## 事件

- 事件绑定 驼峰命名 onClick

- 事件对象 react中的事件对象叫：合成事件（对象）兼容所有浏览器

## state 状态：即数据

- 函数组件-无状态组件 只负责数据展示

- 类组件-有状态组件 数据变化-更新UI

- state的值是对象 表示一个组件中有多个数据

- 私有的 只能在组件内部使用

- 使用setState({}) 修改数据，不要直接改

- 数据驱动视图 1修改数据2更新UI

- 只放需要渲染的数据，需要在多个方法中用到的数据放this中

## 类组件中 this

- 事件中的this是undefined

- render()中的this指向实例-就可以用了

- 解决

+ 箭头函数：自身不绑定this，指向外部环境 <button onClick={() => this.add()}> + </button>

+ Function.prototype.bind() 将事件中的this与组件实例绑定 构造函数(Constructor)中的this指向调用该构造函数所创建的实例对象(instance)。

+ 事件改为用箭头函数实现

## props 传递数据用的

- 可以给组件传递任意类型的数据 string number 函数 jsx

- props是只读的对象，只能读取属性的值，无法修改对象

- 如果有构造函数，应该将props传递给super()，，render里面还是可以获取到props

## 组件通讯

- 父 => 子 属性传递

- 子 => 父 回调函数

- 兄弟 => 兄弟 由公共父组件管理状态

- 跨组件传递数据 Context

## props深入

- props 校验 yarn add prop-types

## 组件生命周期 类组件才有

### 创建时

- constructor() 初始化state

- render() 每次组件渲染都会触发（不能用setState）

- componentDidMount() DOM渲染完成后 1发送网络请求 2DOM操作

### 更新时

- this.setState()

- this.forceUpdate()

- 组件接收的props发生变化

- 以上都会触发render()更新

componentDidUpdate() render()后 1发送网络请求 2DOM操作

### 卸载时

- componentWillUNmount() 执行清理 如定时器

## 组件复用

- 复用 1 state 2 操作state的方法

- 方式 1 render props模式 2 高阶组件HOC

- 不是新的API，而是套路

- 高阶组件是一个函数 with开头

## setState()

- 是异步的 多次调用setState，只会触发一次render(）

- 第二个参数 在状态更新后（页面完成重新渲染）立即执行某个操作

- setState(update[,callback]) // callback 可选

## jsx语法转化过程

- jsx仅仅是createElement()方法的语法糖

- jsx被@babel/preset-react插件编译为createElement()方法

- createElement() -> react元素(普通的js对象)

## 组件更新机制

- 会更新本身所在组件和旗下所有组件

- 子组件没有变化也会重新渲染

## 虚拟DOM和diff算法

- 发生在render()调用后

- react更新视图的思想是：只要state变化就重新渲染师徒

- 理想状态：部分更新

- react元素 -》 虚拟DOM =》一个js对象，描述HTML结构

- render调用不意味着浏览器的重新渲染 仅仅说明要进行diff

- 虚拟DOM-可以在不同环境运行 可以运行js就可以