[JavaScript知识库] react笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react笔记 -> 正文阅读

[JavaScript知识库]react笔记

react

react是facebook出的一款针对view视图层的library库。react遵循单向数据流的机制。目前我们学的是react17.x的版本

React 官方中文文档 – 用于构建用户界面的 JavaScript 库

react基础语法和常见api

jsx语法

就是在js种直接使用html标签来写。

const str = '你好啊！'
const people = [<p>苹果嘉儿</p>,<p>云宝</p>,<p>紫悦</p>,<p>珍奇</p>]
function Demo() {
 ? ?return <>
 ? ? ? ?<h1>我是一个组件</h1>
 ?      <p>{str}</p>
 ?      <hr/>
 ?      {people}
 ?      <hr/>
 ?      {people.length>1?'人数多于一个':'人数少于一个'}
 ? ? ? </>
}

function定义组件
组件传参

父传子使用props

子传父使用方法调用
hooks

是react16.8之后新增得功能，可以在function定义得组件中设置局部状态和模拟组件的生命周期。是目前官方推荐的组件定义方式。
- useState
  
  可以在function定义的组件中设置局部状态数据，当状态数据改变的时候组件会重新更新
```
function App() {
 ? ?const [count, setCount] = React.useState(1) //
 ? ?// useState返回一个数组，接收一个参数作为初始状态数据
 ? ?// 一个组件中可以定义多次useState，但是它不能放在循环或者条件语句中
 ? ?//  第一项表示变量名
 ? ?//  第二项表示改变数据的方法
 ? ?// 当count值变了，这个function中的代码会重新执行
 ? ?....
}
```
- useEffect
  
  副作用，接收两个参数
  
  参数一：回调函数,回调函数可以返回一个function，这个返回值在组件销毁的时候执行
  
  参数二：依赖数组
  
  当依赖数组中的数据改变的时候，回调函数会执行
  
  关于参数二有以下几种场景
  1. 参数二不存在，没有参数二。当组件的属性或者状态数据改变的时候，参数一的回调函数都会执行
  2. 参数二是一个空数组，就是数组没有内容。只在组件初始化的时候执行一次，用来调接口取数据
  3. 参数二是一个正常的数据。当数组中的任意一项发生了改变，那么回调函数就会执行
- useRef
  
  作用是获取组件中的dom元素
- useContext
  
  上下文，在react中实现跨组件之间传参.
- useCallback
  
  对function做缓存,接收两个参数，参数一是一个function，参数二是一个依赖数组。当依赖数组中的数据改变的时候function会重新执行
- useMemo
  
  对值做缓存，接收两个参数，参数一是一个返回一个值的function，参数二是一个依赖数组。当依赖数组中的数据改变的时候被缓存的值会重新计算
- memo
  
  对组件做缓存，主要是做性能优化。当组件接收到的属性没有改变的时候组件不会重新渲染

class定义组件

class定义组件时react中另外一种定义组件的方式。可以在组件内部设置局部状态和生命周期。当状态或者属性数据改变的时候组件会重新渲染

class定义的组件和function定义的组件是可以混合使用的

class Counter extends React.Component {
 ? ?// 每一个组件都需要有一个render方法，这个方法需要一个返回值，返回一个html节点作为当前组件展示的元素内容
 ? ?render() {
 ? ? ? ?return <h1>我是一个计数器</h1>
 ?  }
}

组件状态

state表示局部状态

如果要改变状态数据，需要调用setState方法。setState方法接收两个参数，一般参数二都不用。改变state数据是异步操作的，在参数二的回调函数中可以获取state改变之后的最新数据
```
...
this.setState({
 ? ?count: 18
}, function() {
 ? ?// 这里可以获取state的最新数据
 ? ?console.log(this.state)
})
...
```

this指向问题

改变this指向有三种写法：

在constructor中直接绑定(建议使用第一种)
在render的时候进行绑定
使用箭头函数(如果需要传参使用第三种)

// 在class定义的组件中有一个很麻烦的问题,就是this指向问题
class Counter extends React.Component {
 ? ?// 创建的时候执行
 ? ?constructor(props) {
 ? ? ? ?super(props);
 ? ? ? ?// 通过this.state可以为组件设置状态数据
 ? ? ? ?this.state = {
 ? ? ? ? ? ?count: 1,
 ? ? ? ? ? ?name: "counter计数器",
 ? ? ?  };
 ? ? ? ?this.clickHandle = this.clickHandle.bind(this); // 推荐写法
 ?  }
 ? ?clickHandle() {
 ? ? ? ?// console.log(this);
 ? ? ? ?// 在class定义的组件中如果我们要改变state数据，需要调用setState方法
 ? ? ? ?//  setState是异步的，如果想获取最新的state数据，需要在参数二的回调函数中获取值
 ? ? ? ?this.setState(
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?count: this.state.count + 1,
 ? ? ? ? ?  },
 ? ? ? ? ? ?function () {
 ? ? ? ? ? ? ? ?console.group("回调函数中获取");
 ? ? ? ? ? ? ? ?console.log(this.state.count);
 ? ? ? ? ? ? ? ?console.groupEnd();
 ? ? ? ? ?  }
 ? ? ?  );
 ? ? ? ?console.log(this.state.count);
 ?  }
 ? ?clickHandle2() {
 ? ? ? ?this.setState({
 ? ? ? ? ? ?count: this.state.count + 2,
 ? ? ?  });
 ?  }
 ? ?clickHandle3() {
 ? ? ? ?this.setState({
 ? ? ? ? ? ?count: this.state.count + 3,
 ? ? ?  });
 ?  }
 ? ?// 在属性或者数据改变的时候会调用
 ? ?render() {
 ? ? ? ?console.log("render执行了");
 ? ? ? ?return (
 ? ? ? ? ? ?<>
 ? ? ? ? ? ?<h1>
 ? ? ? ? ? ? ?  {this.state.name}-{this.state.count}
 ? ? ? ? ? ?</h1>
 ? ? ? ? ? ?<button onClick={this.clickHandle}>加+</button>
 ? ? ? ? ? ?<button onClick={this.clickHandle2.bind(this)}>加+2</button>
 ? ? ? ? ? ?<button onClick={() => this.clickHandle3()}>加+3</button>
 ? ? ? ? ? ?</>
 ? ? ?  );
 ?  }
}
const App = () => (
 ? ?<>
 ? ?<h1>我是组件</h1>
 ? ?<Counter />
 ? ?</>
);
ReactDOM.render(<App />, document.querySelector("#app"));

PureComponent

对组件做性能优化，组件属性只做浅比较。当属性没有改变的时候组件不会重新渲染。相当于function定义组件中的memo方法

contextType

通过为组件设置属性contextType可以在组件内部获取context上下文中提供的数据

const { createContext, Component } = React;
const context = createContext();
class AppProvider extends Component {
 ? ?constructor(props) {
 ? ? ? ?super(props);
 ?  }
 ? ?render() {
 ? ? ? ?return (
 ? ? ? ? ? ?<context.Provider value={{ name: "class定义的组件" }}>
 ? ? ? ? ? ? ?  {this.props.children}
 ? ? ? ? ? ?</context.Provider>
 ? ? ?  );
 ?  }
}
class Home extends Component {
 ? ?constructor(props) {
 ? ? ? ?super(props);
 ?  }
 ? ?render() {
 ? ? ? ?console.log(this.context);
 ? ? ? ?return (
 ? ? ? ? ? ?<>
 ? ? ? ? ? ?<h1>首页</h1>
 ? ? ? ? ? ?<p>{this.context.name}</p>
 ? ? ? ? ? ?</>
 ? ? ?  );
 ?  }
}
Home.contextType = context; // 通过为组件设置一个contextType属性把context上下文中的value数据映射到组件内部
const App = () => (
 ? ?<>
 ? ?<h1>我是组件</h1>
 ? ?<Home />
 ? ?</>
);
ReactDOM.render(
 ? ?<AppProvider>
 ? ? ? ?<App />
 ? ?</AppProvider>,
 ? ?document.querySelector("#app")
);

组件生命周期

class组件的生命周期16.3之前和之后有差异

16.3之前的钩子函数：
- constructor(不算生命周期钩子函数，应该是class的构造函数，可以在这里面设置state数据和获取props属性)
- componentWillMount，组件挂载之前执行
- componentDidMount【很重要】，class定义的组件在这里获取数据
- componentWillReceiveProps，将要接收新的属性
- shouldComponentUpdate，组件是否需要更新。主要用来做性能优化的时候需要操作的生命周期函数。返回bool值，true后续的更新阶段会执行；否则不更新
- componentWillUpdate，将要更新
- componentDidUpdate，更新完成
- componentWillUnmount，卸载
16.3之后的删除了will开头的三个函数(componentWillMount、componentWillReceiveProps、componentWillUpdate)。新增了几个钩子函数，作为了解听过就行

function定义的组件中useEffect对应class定义组件中的三个生命周期钩子函数:componentDidMount、componentDidUpdate、componentWillUnmount

和function定义的组件的useEffect对应:
```
// 参数二为空数组，对应componentDidMount
useEffect(()=>{
 ? ?return () => {
 ? ? ? ?// 对应componentWillUnmount
 ?  }
}, [])
// 对应componentDidUpdate
useEffect(()=>{
 ? ?
}, [xx])
```
嵌套组件的生命周期问题：如果组件出现嵌套，那么在执行父组件的更新或者挂载完成之前会完成所有子组件的挂载和更新。最后才会执行外围的挂载和更新完成
class组件中使用ref

用来获取组件中的dom元素
function和class定义组件的区别

function定义的组件中不存在this指向问题，function定义的组件又叫无状态组件但是在react16.8之后新增了hooks，可以在function定义的组件中模拟局部状态和生命周期

class定义的组件有自己的局部状态和生命周期

目前官方推荐使用function的方式定义组件

备注：hooks在2019年的时候已经开始推荐并普及使用，antd是react中一个非常知名的ui组件库，它在4.0之后的版本中已经开始全面使用function+hooks的写法

useReducer

是react中的一个hooks，可以让我们使用类似redux中的数据流机制进行状态数据的管理

reducer是一个function，这个function接收两个参数(state，action)，返回一个新的state数据
- state表示状态数据
- action表示行为,必须包含一个type属性
高阶组件

react脚手架

create-react-app

create-react-app(CRA)是官方的脚手架，这个脚手架只提供基础的一些插件，是基于webpack的。
```
npx create-react-app first-react-app # 创建一个react项目
cd first-react-app
npm start # 启动项目
```
如果电脑上安装的有yarn这个模块管理工具，那么cra默认使用的是yarn做模块管理

yarn

它是facebook推出的一款包管理工具，和npm是一样的功能

Yarn 中文文档
```
npm i yarn -g # 安装yarn
# 使用
yarn add xx			# 安装模块
yarn remove xx		# 删除模块
yarn 				# 找到package.json文件，根据依赖项安装所有的依赖
```
vite

它是另外的一种创建项目的方式，使用的不是webpack。下一代前端开发与构建工具

Vite 官方中文文档
```
npm init vite@latest
# or
yarn create vite
```
使用sass
```
npm i sass -D # 安装sass插件就行
```
路由

React Router: Declarative Routing for React.js

安装
```
npm i react-router-dom # 安装路由插件
```
使用
- HashRouter或者BrowserRouter
  
  路由组件的根节点，一个项目中只能有一个
- Route
  
  路由组件，每一个路径对应显示的内容在这里标准
  - path
    
    表示路由的路径，就是url中访问的地址，访问指定路径的时候展示对应的组件
  - exact
    
    表示绝对匹配
  Route对应展示的组件有三种写法
  - 直接写成子标签children的形式
```
<Route path="/list">
	<List/>
</Route>
```
    推荐用法，在List组件的属性中不能直接获取路由对象信息，但可以通过withRouter方法实现
  - 写成属性component
```
<Route path="/list" component={List} />
```
    可以直接在List组件的属性中获取路由对象信息
  - 通过render方法展示
```
<Route path="/list" render={()=><List/>} /> 
```
    在List组件的属性中不能直接获取路由对象信息，但可以通过withRouter方法实现
- Link
  
  生成跳转链接
- Switch
  
  只匹配一个
- withRouter
  
  作用是把路由对象的属性信息映射到组件的属性上
```
import React from "react";
import { withRouter } from "react-router-dom";

function Products(props) {
  console.group("products");
  console.log(props);
  console.groupEnd();
  return (
    <div>
      <h2>商品列表</h2>
    </div>
  );
}

export default withRouter(Products);
```
- 路由传参
  - params
    
    需要在路由中设置占位符。如果没有占位符，那么刷新之后会消失
  - search
    
    就是直接在url中传递，通过?进行分割。刷新之后也不会消失。建议使用search
  - state
    
    直接传递。刷新之后直接消失
  - useLocation
    
    获取location数据，可以用来获取参数
  - useHistory
    
    获取历史记录信息，可以使用push、go等方法做跳转
  - useParams
    
    获取parmas参数
antd

ant.design是蚂蚁金服出的一款ui组件库。

Ant Design - 一套企业级 UI 设计语言和 React 组件库
```
npm i antd # 安装依赖
```
管理后台项目
redux

Redux - A predictable state container for JavaScript apps. | Redux

redux是一个全局状态管理插件。它是单向数据流的。

单向数据流：数据是单向流动的，分为三部分(state,action,view)。在view视图中通过dispatch派发一个action改变数据，数据改变之后view视图重新渲染
- action
  
  行为，每一个action都建议有一个type属性，type不能重复。因为在dispatch派发的时候所有的reducer都会收到这个action，根据type不一样来做不同的处理
- state
  
  存储数据
- reducer
  
  改变数据的地方，reducer是一个function。接收两个参数
  
  参数一表示state的初始值
  
  参数二是一个action
- 安装使用
```
npm i redux # 安装插件,是核心模块
npm i react-redux # 插件的作用是实现redux和react的连接
```
- redux中的方法
  - createStore 作用是创建一个数据存储
  - combineReducers 合并多个reducer为一个
- react-redux中的方法
  - Provider
    
    是一个组件需要放在项目的最外层，用来把store数据传递给整个项目
  - connect
    
    实现数据以及dispatch方法和组件的关联，把数据和dispatch方法映射到组件的属性上
  - useSelector
    
    获取state数据
  - useDispatch
    
    获取dispatch方法
- redux-thunk
  
  插件的作用是用来处理异步action。所有的action必须返回一个plain object，不能是一个function。为了解决异步问题，可以借助插件实现
  
  redux-thunk，它的作用是判断action的数据类型，如果是function，那么会把dispatch当参数传递给function；如果是一个对象，那么就直接执行
- redux-toolkits
  
  它目前是redux官方推荐的写法
```
npm install @reduxjs/toolkit react-redux # 安装依赖
```
umi

UmiJS - Extensible enterprise-level front-end application framework.

umi是一个企业级的开发框架，内置了react、react-router、dva、antd等插件，可以实现开箱即用
- dva
  
  是一个redux的封装，内置了常见的redux插件：redux-thunk、redux-saga、redux-devtools等等，可以让我们很方便的来实现redux的使用
ts和antd pro
- antd pro
  
  开始使用
```
# 使用 npm
npx create-umi myapp
# 使用 yarn
yarn create umi myapp
```
- ts
  
  TypeScript是js的一个超集。就是在js语言的基础上加入了数据类型的概念，所有的ts语句最终都会被编译成js进行运行
  
  TypeScript中文网 · TypeScript——JavaScript的超集 ts的官网
  
  在ts中当出现报错警告的时候，直接定义数据类型为any
  
  json2ts - generate TypeScript interfaces from json 作用是把json数据转换为ts数据结构，用来在项目中对接口返回的数据做处理
其他ui框架
- ionic
  
  这是一个移动端开发框架，是用来做手机页面的
  
  Cross-Platform Mobile App Development: Ionic Framework
  
  可以让我们的做的页面具有原生app一模一样的效果
```
npm install -g @ionic/cli
ionic start --type=react
```
- framework7
  
  Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps
- maturial
  
  MUI: The React component library you always wanted 这个是一定要知道的。是google推出的，目前比较流行的flutter就是使用的这种设计风格
next.js

它是一个react的服务器端渲染框架，可以做多页面应用程序开发。解决了单页面应用程序存在的所有弊端。
```
npx create-next-app first-next-app-pre # 创建一个next项目
```