# studyReact01

**Repository Path**: huayyds/study-react01

## Basic Information

- **Project Name**: studyReact01
- **Description**: 学习react入门
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: second
- **Homepage**: https://gitee.com/huayyds/study-react01
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-28
- **Last Updated**: 2022-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux, redux-saga

## README

# React起源

React 起源于 Facebook 的内部项目.

轻量级的视图层**库**！

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。

可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

# React的特性

1、声明式设计

2、高效--通过对DOM模拟（虚拟DOM），最大减少与DOM交互

3、灵活 --跟已知的库和框架很好配合

4、JSX--JavaScript语法的扩展

5、组件化 -- 通过构建组件，使代码复用，很好的应用在大项目开发中

6、单项响应的数据流 -- 减少重复代码

# 全局安装

## 全局安装create-react-app

**`npm install -g create-react-app`**

创建一个项目

**`create-react-app 项目名称`**

如果不想全局安装，可以直接使用npx

**`npx create-react-app 项目名称`**

## 常见问题：

**npm安装失败时**

**1、切换为npm镜像为淘宝镜像：`npm install cnpm -g --registry=https://registry.npm.taobao.org`**

**2、使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内**

**3、如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行 npm install命令**

**4、再不能解决就删除node_modules及package-lock.json的同时清除npm缓存 npm cache clean --force 之后再执行 npm install 命令**

## 命令

### `npm start或yarn start` 

启动项目

### `npm run build`

打包项目

# JSX  语法与组件

## 一、JSX 语法

### 1、JSX介绍

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。

会让代码更加直观并易于维护；编译过程由Babel 的 JSX 编译器实现。

 **React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX结构转换成 JavaScript 的对象结构。**

 所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:

**`JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面`**

#### **注意：**

1、在JSX中，HTML里面的class类名改为了**className**

2、在JSX中，HTML标签的for属性改为==> htmlFor( )

`<label htmlFor ="name">用户名：</label>`

3、在JSX中，绑定事件采用on+首字母大写，原生的事件全是小写

onclick , React里的事件是驼峰 onClick ，**React** **的事件并不是原生事件，而是合成事件**

4、react推荐我们使用行内样式，因为react觉得每一个组件都是一个独立的整体 

### 2、JSX中使用js表达式

**语法：**

`{ js表达式 }`

在组件内部要让一段逻辑执行，需要加上{}花括号，{}可以加变量，三元运算符等

**可以使用的表达式**

1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
3. fn()

**特别注意**

if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 `{}` 中！！

### 3、JSX列表渲染

实现：使用数组的`map` 方法

注意点：需要为遍历项添加 `key` 属性

1. key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
2. key 在当前列表中要唯一的字符串或者数值（String/Number）
3. 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
4. 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

### 4、JSX条件渲染

实现：可以使用 `三元运算符` 或  `逻辑与(&&)运算符`

### 5、JSX样式处理

-  行内样式 - style 

```javascript
<div style={{ color: 'red' }}>this is a div</div>
```

-  行内样式 - style - 更优写法 

  ```javascript
  const styleObj = {
      color:red
  }
  
  function App() {
    return (
      <div className="App">
        <div style={ styleObj }>this is a div</div>
      </div>
    )
  }
  
  export default App
  ```

-  类名 - className（推荐）
- 类名 - className - 动态类名控制 

```javascript
 <div className={ showTitle ? 'title' : ''}>this is a div</div>
```

### 6、JSX注意事项

1. JSX必须有一个根元素，如果没有根节点，可以使用`<></>`（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法  `class -> className`  `for -> htmlFor`
4. JSX支持多行（换行），如果需要换行，需使用`()` 包裹，防止bug出现，例如**return加上小括号()可以换行表示一个整体可以多加标签**

## 二、React组件的基础

### 1、函数组件

**`目标任务:`**  能够独立使用函数完成react组件的创建和渲染

**概念**

使用 JS 的函数（或箭头函数）创建的组件，就叫做**函数组件**

```javascript
// 定义函数组件
function HelloFn () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App
```

#### 注意：

1. 组件的名称**必须首字母大写**，react内部会根据这个来判断是组件还是普通的HTML标签
2. 函数组件**必须有返回值**，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的**返回值**就是对应的内容
4. 使用函数名称作为组件标签名称，可以**成对**出现也可以**自闭合**

### 2、类组件

**`目标任务:`**  能够独立完成类组件的创建和渲染

使用 ES6 的 class 创建的组件，叫做**类（class）组件**

```JavaScript
// 引入React
import React from 'react'
// 定义类组件
class HelloC extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}
function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloC />
      <HelloC></HelloC>
    </div>
  )
}
export default App
```

#### 注意：

1. **类名称也必须以大写字母开头**
2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
3. 类组件必须提供 render 方法**render 方法必须有返回值，表示该组件的 UI 结构**

### 类组件使用计算属性

计算属性：就是当依赖的数据（`state` / `props`）发生变化时，动态更新计算出来的值。

使用getter:

```jsx
class Comp extends react.Component {
  state = {
    count: 1,
  };

  // 两倍的count
  // 当state发生变化的时候，doubleCount作为计算值也会是最新的
  get doubleCount() {
    return this.state.count * 2;
  }

  // 一个getter还可以依赖另外一个getter
  // 读取getter的时候，直接读取即可，不用像函数一样执行
  get doubleCountInChinese() {
    return `两倍数字为${this.doubleCount}`;
  }

  increaseCount() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <>
        <h1>count: {this.state.count}</h1>
        <h1>doubleCount: {this.doubleCount}</h1>
        <h1>doubleCountInChinese: {this.doubleCountInChinese}</h1>
        <button onClick={this.increaseCount.bind(this)}>+1</button>
      </>
    );
  }
}
```

这个getter其实跟vue中的`computed`计算属性和react hooks中的`useMemo`还是有略微的区别的：

- vue中的`computed`：会缓存结果，引用的数据发生变化时才重新计算；
- React hooks中的`useMemo`：会缓存结果，引用的数据发生变化时才重新计算；
- React类组件中的`getter`：不会缓存结果，每次重渲染时都会重新计算，性能略差一丢丢。

### 3、事件绑定

react 并不会真正的绑定事件到每一个具体《》的元素上，而是采用事件带来的模式，模拟事件机制

能够独立绑定任何事件并能获取到事件对象e

#### **3.1、如何绑定**

- 语法：

  **事件处理on大写，驼峰写法**

  on + 事件名称 = { 事件处理程序 } ，比如：`<div onClick={()=>{}}></div>` 

- 注意点

   **3.1.1、this.函数名 不要加()会立即执行，跟vue不同**

  错误：`<button onClick={this.add()}>add</button>`会立即执行

  正确：**`<button onClick={this.add}>add</button>`**

​		**3.1.2、推荐:匿名箭头函数写法，可以传参数**

​	**` <button onClick={()=>this.add2("bjyx")}>add2</button>`**

​	    **3.1.3、使用函数定义成箭头函数就不会导致this指向问题**

### 扩展知识

**js改变this指向：**

1. **call，改变this指向，自动执行函数**
2. **apply，改变this指向，自动执行函数**
3. **bind，改变this指向，不会自动执行函数，手动加()执行**

#### **3.2. 获取事件对象**

通过事件处理程序的参数获取事件对象e 

```javascript
// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
     //阻止事件默认行为
    e.preventDefault()
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    <a href="http://www.baidu.com/" onClick={clickHandler}>百度</a>
  )
}
```

### 4、Ref的应用

#### 4.1、给标签设置ref属性ref="myname"

​	通过获取this.refs.myname,ref可以获取应用的真实DOM

#### 4.2、给组件设置ref=“myname”

​	**this.refs 被react删除了，有风险**

​	通过获取this.refs.myname,ref可以获取到组件对象

#### 4.3、新的写法 **(推荐)**

```javascript
myref=React.createRef() 
<input type="text" ref={this.myref}/>
    //this.myref.current.value访问到值
```

## 三、组件的数据挂载方式

### 1、状态（state)

​	能够给组件添加状态和修改状态的值

#### （1）定义state

- ##### **第一种定义状态方法**

```javascript
   state={
        name:"海绵宝宝",
        text:"收藏",
        myshow:true
    }
```

- **第二种定义状态方法**

```javascript
constructor() {
        // super()继承
        super()
        this.state = {
            name: "海绵宝宝",
            text: "收藏",
            myshow: true
        }
    }
```

通过this.state.name访问读取状态

#### （2）setState

**不能直接修改state数据 ，通过this.setState间接修改更新**

```javascript
<button onClick={() => {
                    this.setState({
                        name: "海绵宝宝派大星"
                    })
}}>点击</button>
```

```
this.setState({ 要修改的部分数据 })
```

- setState方法作用 

1. 1. 修改state中的数据状态
   2. 更新UI

- setState有两个参数

  第一个参数可以是对象，也可以是方法return一个对象，这个参数叫做updater

  **参数是对象：**		

```Javascript
this.setState({ isLiked: !this.state.isLiked })
```

​		**参数是方法：**

```javascript
this.setState((prevState, props) => { return { isLiked: !prevState.isLiked } })
```

注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props

setState 是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选

的回调函数

```javascript
this.setState((prevState, props) => { return { isLiked: !prevState.isLiked } }, () => { console.log('回调里的',this.state.isLiked) })
console.log('setState外部的',this.state.isLiked)
```

**setSate处在同步逻辑中，异步更新状态，异步更新真实dom，为了性能**

**setSate处在异步逻辑中，同步更新状态，同步更新真实dom**

**setSate接受第二个参数，是回调函数，状态和dom更新完后会触发**

### 2、属性（props）

props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更

改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

属性是描述性质、特点的，组件自己不能随意更改。

之前的组件代码里面有 props 的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的

属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的

参数来接收 prop:

**(1) 在组件上通过key=value 写属性,通过this.props获取属性,这样组件的可复用性提高了。** 

**(2) 注意在传参数时候，如果写成isShow="true" 那么这是一个字符串 如果写成isShow={true} 这个是布尔值** 

**(3) {...对象} 展开赋值** 

**简写：如果跟定义变量一致，可以使用扩展运算符**\

**`<Navbar {...obj} />`**

**(4) 默认属性值** 

使用类静态属性声明默认值，`static defaultProps = {}`

```javascript
*.defaultProps = { }static defaultProps = { myname:"默认的myname", myshow:true }
```

**(5) prop-types 属性验证 **

1. 安装属性校验包：`yarn add prop-types 或 npm i prop-types`
2. 导入`prop-types` 包
3. 使用 `组件名.propTypes = {}` 给组件添加校验规则

```javascript
import propTypes from "prop-types"; 
//第一种
*.propTypes={ name:propTypes.string, age:propTypes.number } 
//第二种
static propTypes={ myname:propTypes.string, myshow:propTypes.bool }
```

```javascript
 // 使用静态属性
    static propTypes={
        title:propTypes.string,
        leftShow:propTypes.bool
    }
    // 静态默认属性,给属性默认值
    static defaultProps={
        leftShow:true
    }
    render() {
        let { title, leftShow } = this.props
        return (
            <>
            <div>
                {leftShow===true && <button>返回</button>}
                Navbar组件--{title}
                <button>home</button>
                </div>
            </>
        )
    }
```

```javascript
// 以下写法麻烦，放在类里写较好，加上static
// 类属性
// Navbar.propTypes={
//     title:propTypes.string,
//     leftShow:propTypes.bool
// }
// 类默认属性
// Navbar.defaultProps={
//     leftShow:true
// }
```



#### props校验-规则说明

**四种常见结构**

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})

```javascript
// 常见类型
optionalFunc: PropTypes.func,
// 必填 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
	color: PropTypes.string,
	fontSize: PropTypes.number
})
```

### **3**、**属性vs状态**

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能

2. 属性可以由父组件修改，状态不能

3. 属性能在内部设置默认值，状态也可以，设置方式不一样

4. 属性不在组件内部修改，状态要在组件内部修改

5. 属性能设置子组件初始值，状态不可以

6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state是一个局部的、只能被组件自身控制的数据源。 

state 中状态可以通过 this.setState 方法进行更新， setState 会导致组件的重新渲

染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。

没有 state 的组件叫**无状态组件**

设置了 state 的叫做**有状态组件**

## 四、表单中的受控组件和非受控组件

### 1、非受控组件

文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值

可以 **使用 ref** 来从 DOM 节点中获取表单数据，就是非受控组件

1. 导入`createRef` 函数
2. 调用createRef函数，创建一个ref对象，存储到名为`msgRef`的实例属性中
3. 为input添加ref属性，值为`msgRef`
4. 在按钮的事件处理程序中，通过`msgRef.current`即可拿到input对应的dom元素，而其中`msgRef.current.value`拿到的就是文本框的值

```javascript
export default class App extends Component {
    myref=React.createRef()
  render() {
    return (
      <div>
        <h1>登录页</h1>
        {/* value属性无法输入值，修改为defaultValue就可控制后续的更新 */}
        {/* value值是在受控组件使用，而defaultValue是在非受控组件使用 */}
        <input type="text" ref={this.myref} defaultValue="Thanks♪(･ω･)ﾉ"/>
        <button onClick={()=>{
            console.log(this.myref.current.value);
        }}>登录</button>
        <button onClick={()=>{this.myref.current.value="" }}> 重置</button>
      </div>
    )
  }
}
```

在非受控组件中，经常希望 React 能赋予组件一个初始值，但是不去控制后续的更新。 在这种情况下, 你可以指定一个defaultValue 属性，而不是 value 。

同样， **<input type="checkbox">** 和 **<input type="radio">** 支持 defaultChecked ， <select> 

和 **<textarea>** 支持 defaultValue

### 2、受控组件

input框自己的状态被React组件状态控制

对于受控组件来说，输入的值始终由 React 的 state 驱动。也可以将 value 传递给其他 UI 元素，或者通过其他事件处理函数重置，但这意味着你需要编写更多的代码。

**注意: 另一种说法（广义范围的说法），React组件的数据渲染是否被调用者传递的 props 完全控制，控制则为受控组件，否则非受控组件。**

**实现步骤**

以获取文本框的值为例，受控组件的使用步骤如下：

1. 在组件的state中声明一个组件的状态数据
2. 将状态数据设置为input标签元素的value属性的值
3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（`即用户当前输入的值`）
4. 调用setState方法，将文本框的值作为state状态的最新值

```javascript
export default class App extends Component {
  state = {
    username: "Thanks♪(･ω･)ﾉ"
  }
  render () {
    return (
      <div>
        <h1>登录页</h1>
        <input type="text" value={this.state.username} onChange={(e) => {
          this.setState({ username: e.target.value })
        }} />
        <button onClick={() => { console.log(this.state.username) }}>登录</button>
        <button onClick={() => { this.setState({ username: "" }) }}> 重置</button>
      </div>
    )
  }
}
```

## 五、组件通信的方式

### 1、父子组件通信方式

#### **（1）传递数据（父传子）与传递方法（子传父）**

​		**父传子通过属性，子传父通过回调函数**

- ##### **父传子**

  实现父子通信中的父传子，把父组件中的数据传给子组件

  ###### **实现步骤**

  1.  父组件提供要传递的数据  -  `state` 
  2.  给子组件标签`添加属性`值为 state中的数据 
  3.  子组件中通过 `props` 接收父组件中传过来的数据 

  1. 1. 类组件使用this.props获取props对象
     2. 函数式组件直接通过参数获取props对象

  2. ```javascript
     // 类子组件
     class CSon extends React.Component {
       render() {
         return (
           <div>
             子组件1
             {this.props.msg}
           </div>
         )
       }
     }
     // 父组件
     class App extends React.Component {
       state = {
         message: 'this is message'
       }
       render() {
         return (
           <div>
             <div>父组件</div>
             <CSon msg={this.state.message} />
           </div>
         )
       }
     }
     ```

  3. 

- ##### **子传父**

  父组件给子组件传递回调函数，子组件调用

  **实现步骤**

  1. 父组件提供一个回调函数 - 用于接收数据
  2. 将函数作为属性的值，传给子组件
  3. 子组件通过props调用 回调函数
  4. 将子组件中的数据作为参数传递给回调函数

  ```javascript
  import React from 'react'
  
  // 子组件
  function Son(props) {
    function handleClick() {
      // 调用父组件传递过来的回调函数 并注入参数
      props.changeMsg('this is newMessage')
    }
    return (
      <div>
        {props.msg}
        <button onClick={handleClick}>change</button>
      </div>
    )
  }
  
  
  class App extends React.Component {
    state = {
      message: 'this is message'
    }
    // 提供回调函数
    changeMessage = (newMsg) => {
      console.log('子组件传过来的数据:',newMsg)
      this.setState({
        message: newMsg
      })
    }
    render() {
      return (
        <div>
          <div>父组件</div>
          <Son
            msg={this.state.message}
            // 传递给子组件
            changeMsg={this.changeMessage}
          />
        </div>
      )
    }
  }
  
  export default App
  ```

  

#### **（2）ref标记（父组件拿到子组件的引用，从而调用子组件的方法）**

在父组件中清除子组件的input输入框的value值。**this.refs.form.reset()**

### **2.** **非父子组件通信方式**

#### **(1)** **状态提升(中间人模式)兄弟通信**

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件. 

**实现步骤**

1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态 

- - 提供共享状态
  - 提供操作共享状态的方法

1. 要接收数据状态的子组件通过 props 接收数据
2. 要传递数据状态的子组件通过props接收方法，调用方法传递数据

#### **(2)** **发布订阅模式实现**

```javascript
import React, { Component } from 'react'
import axios from 'axios'
// 订阅发布模式
var bus = {
  list: [],
  // 订阅
  subscribe (callback) {
    this.list.push(callback)
  },
  // 发布
  publish (text) {
    // console.log(text)
    this.list.forEach(item => {
      item && item(text)
    })
  }
}
export default class App extends Component {
  constructor() {
    super()
    axios.get('/test.json').then(res => {
      console.log(res.data.data.films)
      this.setState({
        films: res.data.data.films
      })
    })
  }
  state = {
    films: [],
    info: ''
  }
  handle = (synopsis) => {
    this.setState({
      value: synopsis
    })
  }
  render () {
    return (
      <div>
        {
          this.state.films.map(item =>
            <Films key={item.filmId} {...item} />
          )
        }
        <FilmsDetail />
      </div>
    )
  }
}

class Films extends Component {
  render () {
    let { name, poster, synopsis } = this.props
    return (
      <div>
        <img src={poster} alt={name} onClick={() => {
          bus.publish(synopsis)
        }} />
        {name}
      </div>
    )
  }
}
class FilmsDetail extends Component {
  constructor() {
    super()
    this.state = {
      info: ""
    }
    bus.subscribe((value) => {
      // console.log(value)
      this.setState({
        info: value
      })
    })
  }
  render () {
    return (
      <div className='filmsDetail'>
        {this.state.info ? this.state.info : "电影详情"}
      </div>
    )
  }
}
```



#### **(3) context状态树传参**

Context 提供了一个**无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法**

**实现步骤**

1.  创建Context对象 导出 Provider 和 Consumer对象

   ```jsx
   const { Provider, Consumer } = createContext()
   ```

2.  使用Provider包裹根组件提供数据 

   ```jsx
   <Provider value={this.state.message}>
       {/* 根组件 */}
   </Provider>
   ```

3.  需要用到数据的组件使用Consumer包裹获取数据

```jsx
<Consumer >
    {value => /* 基于 context 值进行渲染（子组件）*/}
</Consumer>
```

代码实现

```react
import React, { createContext }  from 'react'

// 1. 创建Context对象 
const { Provider, Consumer } = createContext()


// 3. 消费数据
function ComC() {
  return (
    <Consumer >
      {value => <div>{value}</div>}
    </Consumer>
  )
}

function ComA() {
  return (
    <ComC/>
  )
}

// 2. 提供数据
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <Provider value={this.state.message}>
        <div className="app">
          <ComA />
        </div>
      </Provider>
    )
  }
}
export default App
```

**注意：**Consumer内必须是回调函数，通过context方法改变根组件状态

**context优缺点：**

**优点：**跨组件访问数据

**缺点：**react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时，不

会引起下级组件更新

### 3、插槽：children属性

**为了复用，减少父子通信**

**children属性是什么**

表示该组件的子节点，只要组件内部有子节点，props中就有该属性

**children可以是什么**

1. 普通文本
2. 普通标签元素
3. 函数
4. JSX

```jsx
export default class App extends Component {
  render () {
    return (
      <div>
        {/* 在子组件里传入数据：普通文本，标签元素，函数，jsx...*/}
        <Child>
          <div>插槽</div>
        </Child>
      </div>
    )
  }
}
class Child extends Component {
  render () {
    return (
      <div>
        Child
        {/* 接收数据--插槽：使用this.props.children获取并渲染 */}
        {this.props.children}
      </div>
    )
  }
}
```



## 六、React生命周期

![life.png](https://cdn.nlark.com/yuque/0/2022/png/274425/1654490712545-6bd28fa7-290b-48fb-8d51-bbf5578dad3f.png)

### **1.** **初始化阶段**

- **componentWillMount：render最后一次修改状态的机会**

- **render：只能访问this.props和this.state,不允许修改状态和DOM输出**(数据渲染)

- **componentDidMount：成功render并渲染完成真实DOM之后触发，可以修改DOM**

  **数据请求axios,订阅函数,setTimeout,基于创建完的dom进行操作，初始化，betterscroll**

**注意：**

​	**componentWillMount ：弃用了,坚持使用需要加上UNSAFE_componentWillMount**

### 2、运行中阶段

- componentWillReceiveProps:父组件修改属性触发

  ```jsx
  componentWillReceiveProps(nextProps){
          // 最先获得父组件传来的属性，可以利用属性进行ajax或者逻辑处理
          // 把属性转化成自己的状态
           console.log("componentWillReceiveProps",nextProps);
           this.setState({
              title:nextProps.text+"派大星"
           })
       }
  ```

  

- shouldComponentUpdate：返回false会阻止render调用

  ```jsx
  //   性能优化scu
    shouldComponentUpdate(nextProps,nextState){
      // return true 应该更新
      // return false 阻止更新
      // 老状态不等于新的状态就允许页面更新
      // if(this.state.myname!==nextStat0.myname){
      //     return true
      // }
      // JSON.stringify(this.state)!==JSON.stringify(nextState)判断多个参数时
      if(JSON.stringify(this.state)!==JSON.stringify(nextState)){
          return true
      }
      return false
    }
  ```

  

- **componentWillUpdate**：不能修改属性和状态。**不安全，弃用了，要使用不警告加上UNSEFE_**

- **render**：只能访问this.props和this.state，不允许修改状态和DOM输出

- **componentDidUpdate**：可以修改DOM，可以获取到更新后的DOM内容

​		可以接受参数：**第一个参数：老的属性,父传子传过来的，第二个参数是：老的状态**

```jsx
// 更新完成
componentDidUpdate(prevProps,prevState){
    console.log("componentDidUpdate,",this.state.myname);
    console.log("老的属性:",prevProps);
    console.log("老的状态:",prevState);
    if(prevState.filmsList.length===0){
        new BetterScroll(".wepper")
    }
}
```

### 3、销毁阶段

**componentWillUnmount**：在删除组件之前清理操作，比如计时器和事件监听器

### 老生命周期的问题

(1) componentWillMount ,在ssr中 这个方法将会被多次调用， 所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏 ， 变得不够安全高效逐步废弃。

(2) componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求

(3) componetWillupdate, 更新前记录 DOM 状态, 可能会做一些处理，与componentDidUpdate相隔时间如果过

长， 会导致 状态不太行

### 新生命周期的替代

（1）getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，

返回一个对象作为新的state，返回null则说明不需要在这里更新state

```jsx
//老的生命周期的写法 
componentDidMount() { 
if(this.props.value!==undefined){ 
    this.setState({ current:this.props.value }) 
} }
componentWillReceiveProps(nextProps){ 
    if(nextProps.value !==undefined){ 
        this.setState({ current:nextProps.value }) 
    } }
// 新的生命周期写法 
static getDerivedStateFromProps(nextProps) { 
    if(nextProps.value!==undefined){ 
        return { current:nextProps.value }
    }
    return null 
}
```

 (2) getSnapshotBeforeUpdate 取代了 componetWillUpdate ,触发时间为update发生的时候，在**render**之后**dom** **渲染之前**返回一个值，作为componentDidUpdate的第三个参数。

```jsx
//新的数据不断插入数据前面， 导致我正在看的数据向下走，如何保持可视区依旧是我之前看的数据呢？ getSnapshotBeforeUpdate(){ 
return this.refs.wrapper.scrollHeight 
}
componentDidUpdate(prevProps, prevState,preHeight) {
    //if(preHeight===200)
    return ; this.refs.wrapper.scrollTop +=this.refs.wrapper.scrollHeight-preHeight
}
<div style={{height:"200px",overflow:"auto"}}} ref="wrapper"> 
    <ul>......... </ul> 
</div>
```

#### 并不必要的getDerivedStateFromProps 和 componentWillReceiveProps

这两个东西叫做派生state，对于它们的使用，这里有个很坑的地方：`getDerivedStateFromProps` 和 `componentWillReceiveProps` 其实只要父级重新渲染，这两个生命周期函数就会重新调用，不管 props 有没有变化。

### **react**中性能优化的方案

**1. shouldComponentUpdate**

控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下， 需要进行优化。

**2. PureComponent**

PureComponent会帮你 比较新props 跟 旧的props， 新的state和老的state（值相等,或者对象含有相同的属性、且属性值相等 ），决定shouldcomponentUpdate 返回true 或者false， 从而决定要不要呼叫 render function。

注意：

如果你的 state 或 props 『永远都会变』，那 PureComponent 并不会比较快，因为shallowEqual 也需要花时间。

## 七、React Hooks

### 1、使用Hooks理由

1. **高阶组件为了复用，导致代码层级复杂**
2. **生命周期的复杂**
3. **写成functional组件,无状态组件 ，因为需要状态，又改成了class,成本高**

## 函数式组件与类组件的差异之处

![image-20220801133150652](C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220801133150652.png)

### useState

**作用**

useState为函数组件提供状态（state）**保存组件状态**

**使用步骤**

1. 导入 `useState` 函数
2. 调用 `useState` 函数，并传入状态的初始值
3. 从`useState`函数的返回值中，拿到状态和修改状态的方法
4. 在JSX中展示状态
5. 调用修改状态的方法更新状态

```jsx
import React,{useState} from 'react'
export default function App() {
  // useState保存组件状态
  // 第一个变量是值，第二个是修改值的方法
     const [name,SetName]=useState("初始值")
     const [age,setAge]=useState(100)
  return (
    <div>
        <button onClick={()=>{
           //修改值 
            SetName("博君一肖")
            setAge(20)
            console.log(name);
        }}>click</button>
        App-{name}-{age}
    </div>
  )
}
```

**注意事项**

1. 修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

####  使用规则

1.  `useState` 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态 
2.  `useState` 注意事项 

1. -  只能出现在**函数组件**中 
   -  不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）
   -  可以通过开发者工具查看hooks状态 

### useEffect(函数副作用)

**useEffect处理副作用**

useEffect函数的作用就是为react函数组件提供副作用处理的！

**什么是副作用**

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，**主作用就是根据数据（state/props）渲染 UI**，除此之外都是副作用（比如，手动修改 DOM）

“副作用”指的是在一个函数里面和外界发生的任意交互，比如：往window对象里面存一个值、使用window的setTimeout函数开始一个定时器，使用window.XMLHttpRequest发起一个请求，这些都属于副作用。

**常见的副作用**

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

```jsx
useEffect(() => { 
    //effect return () => { 
    //cleanup 
}; 
}, [依赖的状态;空数组,表示不依赖])
```

**useEffect传两个参数，第一个是回调函数，第二个传[]空数组:是不依赖任何东西或者传依赖的状态值**

#### **使用步骤**

1. 导入 `useEffect` 函数
2. 调用 `useEffect` 函数，并传入回调函数
3. 在回调函数中编写副作用处理（dom操作）
4. 修改数据状态
5. 检测副作用是否生效

```jsx
import React, { useEffect } from 'react'
useEffect(() => {
     //可以用来处理ajax请求
        axios.get('/test.json').then(res => {
            console.log(res.data.data.films)
            setlist(res.data.data.films)
        })
    }, [])
```

#### 依赖项控制执行时机

**1. 不添加依赖项（不写第二个参数）**

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行

- 组件初始渲染
- 组件更新 （不管是哪个状态引起的更新）

**2. 添加空数组**

组件只在首次渲染时执行一次

**3. 添加特定依赖项**

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

#### 模拟类的生命周期

```jsx
  // 模拟componentDidMount
  useEffect(() => {
    console.log('页面初次加载');
  }, []);

  // 模拟componentDidUpdate
  useEffect(() => {
    console.log('页面渲染了');
  });

  // 模拟componentWillUnmount，deps不能有值
  useEffect(() => {
    return () => {
      console.log('willUnmount');
    };
  }, []);
// 如果deps有值，则cleanUp会在下一次渲染后执行
  useEffect(() => {
    console.log('当前projectID为：', projectID);
    
    return () => {
      console.log('willUnmount？？？');
    };
  }, [projectID]);
```

但其实这种说法并不准确，以上几种“模拟”都存在不同程度的问题：

1. 模拟`componentDidUpdate`。功能完全正确，**但是应用场景极少**；
2. 模拟`componentDidMount`。这个问题最多，问题列表如下：

- **effectFn不能是async函数，因为async函数默认返回Promise，而effectFn要求如果有返回值，只能返回一个清理函数；**
- **如果effectFn里面用到了一个在当前组件內生命的函数，且该函数读取了属性/状态，deps为空会引起eslint警告；**
- **如果effectFn里面要读取属性/状态，deps为空又会引起eslint警告;**

 3.模拟`componentWillUnmount`。**这个是极易引发错误的，因为对于cleanUp来说，deps数组有值和没值完全是两种表现。当deps有值时，cleanUp函数的执行时机并不是组件卸载前，而是下一次重渲染后，以及最后销毁时。**

从过往的使用经验来看，useEffect最适合做的事情是：**用来监听某些属性/状态的变化，并执行可能有副作用的函数。**

#### **注意事项**

**useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现**

**useEffect可以使用多次**

**使用闭包，return一个回调函数和第二参数的[]空数组（只执行一次）可以来销毁组件**

#### useEffect和useLayoutEffect有什么区别？

**简单来说就是调用时机不同，** useLayoutEffect **和原来** componentDidMount **&** componentDidUpdate **一致，在**react**完成**DOM**更新后马上**同步**调用的代码，会阻塞页面渲染。而**useEffect **是会在整个页面渲染完才会调用的**代码。

官方建议优先使用 useEffect

在实际使用时如果想避免**页面抖动**（在 useEffect 里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放在 useLayoutEffect 里。在这里做点dom操作，这些dom修改会和 react 做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价。

### useCallback(记忆组件)

useCallback，不被信赖的hook

`useCallback`诞生的宗旨是用来缓存函数指针的，它可以在useEffect的deps中存在函数，且effectFn改变了状态时，避免无限执行effectFn的情况。

然而，**在组件内直接定义函数，或者在组件內用**`useCallback` **包裹函数，在读取状态/属性时，都会受到常量帧（**`capture value`**）的影响，导致的后果就是如果**`useCallback`**的依赖数组不正确，在某些场景中就会读到过时变量。**

防止因为组件重新渲染，导致方法被重新创建 ，起到缓存作用*;* 只有第二个参数 变化了，才重新声明一次

```jsx
var handleClick = useCallback(()=>{     			     console.log(name) 
 },[name]) 
<button onClick={()=>handleClick()
}>hello</button> 
//只有name改变后， 这个函数才会重新声明一次， 
//如果传入空数组， 那么就是第一次创建后就被缓存， 如果name后期改变了,拿到的还是老的name。
//如果传第二个参数，每次都会重新声明一次，拿到的就是最新的name
```

useCallback使用示例：

> 首先明确一点：只有当函数时在组件內声明，且存在于useEffect的deps数组中时，才需要用useCallback包裹一下函数，且useCallback的第二参数需要为一个包含正确依赖的数据，否则会引发错误。

### **useMemo** **记忆组件**

useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。

useMemo：一般用来做计算属性，缓存计算结果的，值缓存利器，react中的"computed"

```jsx
useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs).
```

唯一的区别是：**useCallback** **不会执行第一个参数函数，而是将它返回给你，而** **useMemo** **会执行第一个函数并且将函数执行结果返回给你。**

所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数计算得到一个确定的值，比如记忆组件

```jsx
import React, { useState ,useMemo} from 'react'
const handleDel=useMemo(
        ()=>(i)=>{
            let newList=[...list]
            newList.splice(i,1)
            setList(newList)
        },[list]
    )
```

### useRef保存引用值

**使用场景**

在函数组件中获取真实的dom元素对象或者是组件对象，功能等同于类组件中的`createRef`，用来做元素的引用

 **useRef保存引用值,使用useRef会缓存值**

```jsx
//使用useRef可以使修改值可以执行
let mycount=useRef(0)
<button onClick={()=>{
            mycount.current++
        }}>
            clcik
</button>
```

**使用步骤**

1. 导入 `useRef` 函数
2. 执行 `useRef` 函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例）
3. 通过ref 绑定 要获取的元素或者组件

```jsx
const myswiper = useRef(null);
<Swiper ref={myswiper}/>
//mytext.current.value获取到值
```

这样就可以方便地访问DOM节点。

> 注：其实useRef还可以用来保存值，而且不会产生过期变量的问题，但是它保存的值的改变并不会引发重渲染，需谨慎使用。

### useReducer和useContext

**useReducer和useContext减少组件层级)**

#### useContext实现步骤

1. 使用createContext 创建Context对象

   `let context = React.createContext()`

2. 在顶层组件通过Provider 提供数据

   ```jsx
   <context.Provider value={{
               info: info, changeInfo: (synopsis) => {
                   setinfo(synopsis)
               }
           }}> ...</context.Provider>
   ```

   

3. 在底层组件通过useContext函数获取数据

   ```jsx
     const {info,changIfo} = useContext(context)
      return <div>子组件 {info}</div>
   ```

   ##### **实例代码：**

```jsx
import React, { useContext } from 'react'
let context = React.createContext()
    const [info, setinfo] = useState("")
    const [films, setfilms] = useState([])
    useEffect(() => {
        axios.get('/test.json').then(res => {
            setfilms(res.data.data.films)

        })
    }, [])
return (
        // 2. 在顶层组件通过Provider 提供数据
        <context.Provider value={{
            info: info, changeInfo: (synopsis) => {
                setinfo(synopsis)
            }
        }}>
            <div>
                {
                    films.map(item =>
                        <Films key={item.filmId} {...item} />)}
                <FilmsDetail />
            </div>
        </context.Provider>
    )
function Films (props) {
    // 3. 在底层组件通过useContext函数获取数据
    const value = useContext(context)

    let { name, poster, synopsis } = props
    return (

        <div>
            <img src={poster} alt={name} onClick={() => {
                value.changeInfo(synopsis)
            }} />
            {name}
        </div>

    )
}
function FilmsDetail () {
    // 3. 在底层组件通过useContext函数获取数据
    const value = useContext(context)
    return (

        <div className='filmsDetail'>
            {value.info ? value.info : "FilmsDetail"}
        </div>
    )
}

```

#### useReducer实现步骤

**`useReducer` 是 `useState` 的替代方案。它接收一个形如 `(state, action) => newState 的 reducer`，并返回当前的 state 以及与其配套的 `dispatch` 方法**

`useReducer`接收两个参数：

- 第一个参数：reducer函数。

- 第二个参数：初始化的state。返回值为最新的state和dispatch函数（用来触发reducer函数，计算对应的state）

  **使用场景**： 一般用于处理复杂的state对象处理

1. 使用useReducer创建

   ```jsx
   // state:状态值，dispatch方法
       const [state,dispatch]=useReducer(reducer,intialState)
   ```

2. 设置初始状态值对象

   ```jsx
       // 外部状态
       const intialState={
           count:0
       }
   ```

   

3. 设置useReducer方法

```jsx
    // 方法中有两个参数，第一个是之前老的值（老状态），第二个是修改后的新值（新状态）
    const reducer=(prevState,action)=>{
        console.log("reducer");
        // 不能修改原对象，创建新对象
        let newState={...prevState}
        switch(action.type){
            case "minus":
                newState.count--
                return newState
            case "add":
                newState.count++
                return newState
            default:
                return prevState
        }
    }
```

代码实例：

```jsx
import React,{useReducer} from 'react'

export default function App() {
    // 方法中有两个参数，第一个是之前老的值（老状态），第二个是修改后的新值（新状态）
    const reducer=(prevState,action)=>{
        console.log("reducer");
        // 不能修改原对象，创建新对象
        let newState={...prevState}
        switch(action.type){
            case "minus":
                newState.count--
                return newState
            case "add":
                newState.count++
                return newState
            default:
                return prevState
        }
    }
    // 外部状态
    const intialState={
        count:0
    }
    // state:状态值，dispatch方法
    const [state,dispatch]=useReducer(reducer,intialState)
  return (
    <div>
        <button onClick={()=>{
            dispatch({
                type:"minus"
            })
        }}>-</button>
        &nbsp; {state.count} &nbsp;
        <button onClick={()=>{
            dispatch({
                type:"add"
            })
        }}>+</button>
    </div>
  )
}
```

#### useContext和useReducer一起使用

```jsx

import React, { useEffect,useContext,useReducer } from 'react'
import axios from 'axios'
import './css/index.css'

let context = React.createContext()

export default function App() {
    const intialState={
        info:"",
        films:[]
    }
    const reducer=(prevState,action)=>{
        let newState={...prevState}
        switch(action.type){
            case "change-films":
                newState.films = action.value
                return newState
            case "change-info":
                newState.info = action.value
                return newState
            default:
                return prevState
        }
    }
    const[state,dispatch] =useReducer(reducer,intialState)
    useEffect(() => {
        axios.get('/test.json').then(res => {
            // setfilms(res.data.data.films)
            dispatch({
                type:"change-films",
                value:res.data.data.films
            })
        })
    }, [])
    return (
        // 2. 在顶层组件通过Provider 提供数据
        <context.Provider value={{
            state,dispatch
        }}>
            <div>
                {
                    state.films.map(item =>
                        <Films key={item.filmId} {...item} />
                    )
                }
                <FilmsDetail />
            </div>
        </context.Provider>
    )
}

function Films(props) {
    // 3. 在底层组件通过useContext函数获取数据
    const {dispatch} = useContext(context)

    let { name, poster, synopsis } = props
    return (

        <div>
            <img src={poster} alt={name} onClick={() => {
                dispatch({
                    type:"change-info",
                    value:synopsis
                })
            }} />
            {name}
        </div>

    )
}
function FilmsDetail() {
    // 3. 在底层组件通过useContext函数获取数据
    const {state} = useContext(context)
    return (

        <div className='filmsDetail'>
            {state.info ? state.info : "FilmsDetail"}
        </div>
    )
}
```

### 自定义Hooks（特色在于抽离逻辑和复用）

**用于复用js逻辑，把js逻辑抽出来做出一个函数，使得结构清晰**

**当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。**

必须**以“use”开头**吗？**必须**如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则

这种封装等好处在于：**即使是在其他页面，也能直接通过**`useXXX`**方便地复用逻辑。**

### ahooks，生产级别的自定义Hooks库

从过往的使用经验来看，`**ahooks**`是一个值得信赖的高可用生产级别hooks库。

它的优点在于：提供的自定义hooks非常丰富、涵盖面广，由阿里官方维护，属于umi生态的官方产品之一。

其中强烈推荐的实践有：

- 使用`useMount`模拟初次挂载时；
- 使用`useUnmount`模拟销毁时；
- 使用`useMemorizedFn`来缓存函数、而不是用useCallback；
- 使用`useUpdateEffect`忽略首次执行，只在依赖更新时执行。