循序渐进学 react ＜二＞

最新推荐文章于 2024-05-30 15:14:59 发布

原来是有理数

最新推荐文章于 2024-05-30 15:14:59 发布

阅读量730

点赞数 23

文章标签： react.js 前端前端框架 javascript react

本文链接：https://blog.csdn.net/m0_68076330/article/details/135445447

版权

续 react <一>

在这里插入图片描述

五、React组件化开发（一）

5.1 组件化

是一种分而治之的思想：如果将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂
将一个页面拆分很多个组件实现一个个小的功能块
而每一个组件又可以进行细分
每一个组件又可以在多个地方复用
之后将每一个模块组装在一起

5.2 React的组件化

组件化是 React 的核心思想，前面封装的 App本身就是一个组件
- 组件化提供了一种抽象，可以开发出一个个独立可复用的小组件来构造应用
- 任何的应用都会被抽象成一棵组件树
组件化思想的应用
- 有了组件化的思想，在之后的开发中就要充分的利用它
- 尽可能的将页面拆分成一个个小的、可复用的组件
- 这样让代码更加方便组织和管理，并且扩展性也更强
React 的组件相对于 Vue 更加的灵活和多样，按照不同的方式可以分成很多类组件
- 根据组件的定义方式可以分为
  - 函数组件
    - 有很多缺点，但是都被 hooks 修补了
    - 使用 function 来定义
  - 类组件
- 根据组件内部是否有状态需要维护
  - 无状态组件
  - 有状态组件（类组件有维护自己的状态 state 称作有状态组件）
- 根据组件的不同职责
  - 展示型组件
  - 容器型组件
    - 包含很多很多的功能
    - 维护自己的状态，发送一些网络请求
函数组件、无状态组件、展示型组件—关注UI的展示
类组件、有状态组件、容器型组件—关注数据逻辑
异步组件、高阶组件

5.3 类组件

类组件的定义有如下要求
- 组件的名称是大写字符开头（无论类组件还是函数组件）
- 类组件需要继承自 React.Component
- 类组件必须实现 render 函数
在 ES6 之前，可以通过 create-react-class 模块来定义类组件，但是目前官网建议使用 ES6 的 class 类定义
使用 class 定义一个组件：
- constructor 是可选的，通常在 constructor 中初始化一些数据
- this.state 中维护的是组件内部的数据
- render() 方法是 class 组件中唯一必须实现的方法

// import { Component } from "react";
// 内部是通过 export {} 导出的
import React from "react";
function HelloWorld() {
  return <h1>HelloWorld</h1>;
}
// 1. 类组件
class App extends React.Component {
  // 维护自己的状态
  constructor() {
    super();
    this.state = {
      message: "App Component",
    };
  }
  render() {
    const { message } = this.state;
    // 1. react 元素：通过 jsx 编写的代码就会被编译成 React.createElement，所以返回的就是一个 React 元素
    // return <h2>{message}</h2>;
    // 2. 组件或者fragments
    return <HelloWorld></HelloWorld>;
    // return ["abc","def","yyy"]
    // 3. 字符串/数字类型
    // return "heeel"
  }
}
export default App;

5.4 render 函数的返回值

当 render 被调用时，会检查 this.props 和 this.state 的变化并返回以下类型之一
React 元素
- 通常通过 JSX 创建出来的都叫 react 元素
- 例如，
  会被 React 渲染为 DOM 节点，会被 React 渲染为自定义组件
- 无论是
  还是均为 React 元素
数组或 fragments：使得 render 方法可以返回多个元素
Portals：可以渲染子节点到不同的 DOM 子树中
字符串或数值类型：它们在 DOM 中会被渲染为文本节点
布尔类型或 null：什么都不渲染

import React from "react";
function HelloWorld() {
  return <h1>HelloWorld</h1>;
}
// 1. 类组件
class App extends React.Component {
  // 维护自己的状态
  constructor() {
    super();
    this.state = {
      message: "App Component",
    };
  }
  render() {
    const { message } = this.state;
    // 1. react 元素：通过 jsx 编写的代码就会被编译成 React.createElement，所以返回的就是一个 React 元素
    // return <h2>{message}</h2>;
    // 2. 组件或者fragments
    return <HelloWorld></HelloWorld>;
    // return ["abc","def","yyy"]
    // 3. 字符串/数字类型
    // return "heeel"
  }
}
export default App;

5.5 函数组件

使用 function 来定义的函数，返回和类组件中 render 函数返回一样的内容
特点
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数
- this 关键字不能指向组件实例
- 没有内部状态 state
之前只是为了展示数据

// 函数式组件
function App() {
  // 返回值：和类组件中的render函数返回的是一致的
  return <h1>App Function Component</h1>
}
export default App

5.6 生命周期

在最合适的地方完成自己想要的功能
生命周期：一个抽象的概念
- 装载阶段 Mount：组件第一次在 DOM 树中被渲染的过程
- 更新过程 Update：组件状态发生变化，重新更新渲染的过程
- 卸载过程 Unmount：组件从 DOM 树中被移除的过程
生命周期函数（钩子函数）：对组件内部实现的某些函数进行回调
- componentDidMount 函数：组件已经挂载到 DOM 上了
- **componentDidUpdate **函数：组件已经发生了更新
- **componentWillUnmount **函数：组件从 DOM 树中被移除的过程
开发者来编写，生命周期函数是由 react 底层进行回调的
谈 React 生命周期时，主要谈的类的生命周期，函数式组件时没有生命周期的（可以通过 hooks来模拟一些生命周期的回调）

5.7 生命周期解析

Mounting
- constructor：生命周期里面的第一个方法
  - 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
  - constructor 中通常只做两件事情
    - 通过给 this.state 赋值对象来初始化内部的 state
    - 为事件绑定实例（this）
- render：第二步执行的方法，以下行为会重新执行render函数
  - setState()
  - new props
  - forceUpdate()
- componentDidMount
  - 依赖于 DOM 的操作可以在这里进行
  - 在此处发送网络请求
  - 此处添加一些订阅(记得在 componentWillUnmount 取消订阅)
Updating
- render
- componentDidUpdate
  - componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法
    - 当组件更新后，可以在此处对 DOM 进行操作
    - 如果对更新前后的 props 进行了比较，也可以选择在此处进行网络请求（例如，当 props 未发生变化时，则不会执行网络请求）
Unmounting
- componentWillUnmount
  - componentWillUnmount() 会在组件卸载及销毁之前直接调用
  - 在此方法中执行必要的清理操作
  - 清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等

import React from "react";
class HelloWorld extends React.Component {
  // 1. 构造方法：constructor
  constructor() {
    console.log("hello!这里是constructor调用");
    super();
    this.state = {
      message: "hello world",
    };
  }
  // 2. 执行render函数
  render() {
    console.log("执行render函数");
    const { message } = this.state;
    return (
      <div>
        <div>喝了咯</div>
        <p>{message}</p>
      </div>
    );
  }
  // 3. 组件被渲染到DOM，挂载到DOM
  componentDidMount() {
    console.log("helloWorld componentDidMount");
  }
  // 4. 组件的DOM被更新完成：DOM发生更新
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate~");
  }
  // 5. 组件从DOM中卸载掉：从DOM移除掉
  componentWillUnmount() {
    console.log(" componentWillUnmount");
  }
  // 不常用的生命周期补充
  // 用于性能优化：
  shouldComponentUpdate() {
    // 决定要不要重新渲染
    return false;
  }

  getSnapshotBeforeUpdate() {
    // 返回的东西可以在componentDidUpdate中被拿到
    return {
      useScroll: 1000,
    };
  }
}
export default HelloWorld;

import React from "react";
import HelloWorld from "./HelloWorld";
class App extends React.Component{
  constructor() {
    super()
    this.state = {
      isShow:true
    }
  }
  switchShow() {
    this.setState({isShow:!this.state.isShow})
  }

  render() {
const { isShow} = this.state    

    return (
      <div>
        <h2>hellll</h2>
        <button onClick={e => this.switchShow()}>切换</button>
        {/* 为 true 才使用 */}
        {isShow && <HelloWorld />}
        <HelloWorld/>
       
    </div>
  )
}
}
export default App

5.8 不常用生命周期函数

不常用的生命周期函数
- getDerivedStateFromProps：state 的值在任何时候都依赖于 props 时使用，该方法返回一个对象来更新 state
- getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取 DOM 更新前的一些信息（比如说滚动位置），提前保存一些数据
- shouldComponentUpdate：性能优化
React中还提供了一些过期的生命周期函数，这些函数已经不推荐使用
更详细的生命周期相关的内容，参考官网：https://zh-hans.reactjs.org/docs/react-component.html

5.9 组件的嵌套

快捷键
- rcc:react class component
- rce:有两个导出
- rmc：生成一个 memo
- rpce

import React, { Component } from "react";
import Footer from "./c-cpns/Footer";
import Header from "./c-cpns/Header";
import Main from "./c-cpns/Main";

class App extends Component {
  render() {
    return (
      <div className='app'>
        <Header></Header>
        <Main></Main>
        <Footer></Footer>
      </div>
    );
  }
}

export default App;

5.10 父组件传递子组件

父组件传递给子组件
- 父组件通过属性 = 值 的形式来传递给子组件数据

<MainBanner banners = {banners}></MainBanner>>

子组件通过 props 参数获取父组件传递过来的数据

父组件

import React, { Component } from "react";
import MainBanner from "./MainBanner";
import MainProduct from "./MainProduct";
import axios from 'axios'

export class Main extends Component {
  constructor() {
    super();
    this.state = {
      banners: ["新歌曲", "新MV", "新歌单"],
      productList: ["推荐商品", "热门商品", "流行商品"],
    };
  }
  componentDidMount() {
    axios.get("https://").then(res => {
      const banners = res.data.data.banner
      this.setState({
        banners
      })
    })
  }
  render() {
    const { banners, productList } = this.state;
    return (
      <div>
        <MainBanner banners={banners}></MainBanner>
        <MainProduct productList={productList}></MainProduct>
      </div>
    );
  }
}

export default Main;

子组件

import React, { Component } from "react";
import PropTypes from "prop-types";
export class MainBanner extends Component {
  // 默认值的写法
  static defaultProps = {
    title: "默认标题",
  };
  constructor(props) {
    // props是一个对象
    console.log(props);
    super(props);
    // 内部相当于做了这么一个操作
    // this.props = props
    this.state = {};
  }
  render() {
    // 对数据进行解构
    const { banners, title } = this.props;
    return (
      <div className='banner'>
        <h2>以下是一个轮播图{title}</h2>
        <ul>
          {banners.map((item) => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
}
MainBanner.propTypes = {
  banners: [],
  title: "默认标题",
};
MainBanner.propTypes = {
  banners: PropTypes.array.isRequired,
};
export default MainBanner;

 import React, { Component } from "react";
 
 export class MainProduct extends Component {
   // 就算不写也能拿到
   render() {
     const { productList } = this.props;
     return (
       <div>
         <h1>MainProduct</h1>
         <ul>
           {productList.map((item) => {
             return <li key={item}>{item}</li>;
           })}
         </ul>
       </div>
     );
   }
 }
 
 export default MainProduct;

5.11 参数propTypes

对于传递给子组件的数据，希望进行验证，特别是对于大型项目来说
- 当然，如果项目中默认继承了 Flow 或者 TypeScript，那么直接就可以进行类型验证
- 但是，即使没有使用Flow或者TypeScript，也可以通过 prop-types 库来进行参数验证
从 React v15.5 开始，React.PropTypes 已移入另一个包中：prop-types 库更多的验证方式，可以参考官网：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
- 比如验证数组，并且数组中包含哪些元素
- 比如验证对象，并且对象中包含哪些key以及value是什么类型
- 比如某个原生是必须的，使用 requiredFunc: PropTypes.func.isRequired 如果没有传递，希望有默认值,使用 defaultProps 就可以了

// 给对应的包起一个名字
import PropTypes from "prop-types";
// 对象
MainBanner.propTypes = {
  banners: [],
  title: "默认标题",
};
MainBanner.propTypes = {
  // 连续约束
  banners: PropTypes.array.isRequired,
  title:PropTypes.string
};

默认值的写法

MainBanner.propTypes = {
  banners: [],
  title: "默认标题",
};
// 默认值的写法：写在类里面
  static defaultProps = {
    title: "默认标题",
  };

5.12 子组件传递父组件

给子组件传入函数
子组件传递父组件：点击了子组件，需要改变父组件的数据
- vue 是通过自定义事件完成的
- react 是通过 props 传递消息的，在子组件中封装对应的方法，调用父组件传递过来的回调函数（对应改变了父组件中的数据）
  - 函数也是可以通过 props 传递给子组件的
解构语法：dob
父组件

import React, { Component } from "react";
import AddCounter from "./AddCounter";
import SubCounter from "./SubCounter";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 100,
    };
  }
  changeCounter(count) {
    this.setState({ counter: this.state.counter + count });
  }
  render() {
    // dob
    const { counter } = this.state;
    return (
      <div>
        <h1>当前计数：{counter}</h1>
        {/* 给子组件传递一个函数 */}
        <AddCounter addClick={(count) => this.changeCounter(count)}></AddCounter>
        <SubCounter subClick={(count) => this.changeCounter(count)}></SubCounter>
      </div>
    );
  }
}

export default App;

子组件

import React, { Component } from "react";
import PropTypes from "prop-types";
export class AddCounter extends Component {
  AddCount(count) {
    console.log("+", count);
    //传递事件到父组件：
    // vue
    // this.$emit();
    // 小程序
    // this.triggerEvent();
    // react
    // 1. 取出这个函数
    // const click = this.props.addClick;
    // click();
    // 2. 直接进行调用
    this.props.addClick(count)
  }
  render() {
    return (
      <div>
        <button onClick={(e) => this.AddCount(1)}>+1</button>
        <button onClick={(e) => this.AddCount(5)}>+5</button>
        <button onClick={(e) => this.AddCount(10)}>+10</button>
      </div>
    );
  }
}
// 对类型进行校验，规定为函数类型
AddCounter.propTypes = {
  addClick: PropTypes.func,
};
export default AddCounter;

import React, { Component } from "react";
export class SubCounter extends Component {
  SubCounter(count) {
    console.log("-", count);
    this.props.subClick(count);
  }
  render() {
    return (
      <div>
      <button onClick={(e) => this.SubCounter(-1)}>-1</button>
  <button onClick={(e) => this.SubCounter(-5)}>-5</button>
  <button onClick={(e) => this.SubCounter(-10)}>-10</button>
  </div>
);
}
}


export default SubCounter;

5.13 组件通信案例

import React, { Component } from "react";
import TabControl from "./TabControl/index";
export class App extends Component {
  constructor() {
    super();
    this.state = {
      titles: ["流行", "新款", "精选"],
      tabIndex: 0,
    };
  }
  tabClick(index) {
    this.setState({
      tabIndex:index
    })
  }
  render() {
    const { titles, tabIndex } = this.state;
    return (
      <div className='app'>
      <TabControl titles={titles} tabClick={i=>this.tabClick(i)}></TabControl>
      <h1>{titles[tabIndex]}</h1>
  </div>
);
}
}

import React, { Component } from "react";
import "./style.css";
export class TabControl extends Component {
  constructor() {
    super();
    this.state = {
      currentIndex: 0,
    };
  }
  itemClick(index) {
    // console.log(index);
    this.setState({
      currentIndex: index,
    });
    this.props.tabClick(index)
  }
  render() {
    const { titles } = this.props;
    const { currentIndex } = this.state;
    return (
      <div className='tab-control'>
      {titles.map((item, index) => {
        return (
          <div className={`item ${currentIndex === index ? "active" : ""}`} key={item} onClick={(e) => this.itemClick(index)}>
  <span className='text'> {item}</span>
  </div>
  );
})}
</div>
);
}
}


export default TabControl;

5.14 React中的插槽（slot）

组件当中以什么样的形式对数据进行显示
react中不需要插槽！！！但是可以通过很多种形式实现插槽的效果
可以通过组件的 children子元素或 props 属性传递任意 react 元素

5.15 children方案实现

children 子元素：放在双标签里面

import React, { Component } from "react";
import "./style.css";
export class NavBar extends Component {
   // 父组件传递多个的时候，子组件拿到的是数组children
    // 父组件只传递一个的时候，子组件拿到的就是一个元素，children===元素-
  render() {
    const { children } = this.props;
    return (
      <div className='nav-bar'>
        <div className='left'>{children[0]}</div>
        <div className='center'>{children[1]}</div>
        <div className='right'>{children[2]}</div>
      </div>
    );
  }
}

NavBar.propTypes = {
  // 限制父组件只能传一个,要求是一个元素
  // children: PropTypes.element,
  // 限制父组件传入多个
  children: PropTypes.array,
};
export default NavBar;

import React, { Component } from "react";
import NavBar from "./nav-bar";


export class App extends Component {
  render() {
    return (
      // 这样写将children放在了NavBar实例的this.props.children之中
      // const els = this.props.children
      // 是一个数组
      <div>
        <NavBar>
          <button>button</button>
          <h2>h2</h2>
          <i>i</i>
        </NavBar>
      </div>
    );
  }
}


export default App;

缺点
- 必须知道索引，对顺序要求过高
- 需要区分传入多个（数组）、一个值（element）

5.16 props 实现方案

直接传元素

import React, { Component } from "react";
import NavBar from "./nav-bar1";
import NavBar2 from "./nav-bar2";


export class App extends Component {
  render() {
    return (
      <div>
        {/* 2. 使用props实现插槽 */}
        <NavBar2 leftSlot={<button>button2</button>} centerSlot={<h2>hehhhh</h2>} rightSlot={<i>i2</i>} />
      </div>
    );
  }
}


export default App;

import React, { Component } from "react";
export class NavBar2 extends Component {
  render() {
    const { leftSlot, centerSlot, rightSlot } = this.props;
    return (
      <div className='nav-bar'>
        <div className='left'>{leftSlot}</div>
        <div className='center'>{centerSlot}</div>
        <div className='right'>{rightSlot}</div>
      </div>
    );
  }
}
export default NavBar2;

5.17 作用域插槽

父组件给子组件传递过去一大堆数据，子组件用了我的数据，但是你不确定展示形式，需要父组件传递插槽
- 在父组件中编写插槽，eg button，拿不到子组件的数据了
- 数据是使用子组件的
作用域插槽：组件的标签由父组件决定，但是用的数据是子组件传过来的

import React, { Component } from "react";
import TabControl from "./TabControl/index";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      titles: ["流行", "新款", "精选"],
      tabIndex: 0,
    };
  }
  tabClick(index) {
    this.setState({
      tabIndex: index,
    });
  }
  //根据不同的名字返回不同的东西
  getTabItem(item) {
    if (item === "流行") {
      return <span>{item}</span>;
    } else if (item === "新款") {
      return <button>{item}</button>;
    } else {
      return <i>{item}</i>;
    }
  }
  render() {
    const { titles, tabIndex } = this.state;
    return (
      <div className='app'>
        <TabControl
          titles={titles}
          tabClick={(i) => this.tabClick(i)}
          // itemType={(item) => <button>{item}
          // </button>}
          itemType={(item) => this.getTabItem(item)}></TabControl>
        <h1>{titles[tabIndex]}</h1>
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import "./style.css";
export class TabControl extends Component {
  constructor() {
    super();
    this.state = {
      currentIndex: 0,
    };
  }
  itemClick(index) {
    // console.log(index);
    this.setState({
      currentIndex: index,
    });
    this.props.tabClick(index)
  }
  render() {
    const { titles,itemType } = this.props;
    const { currentIndex } = this.state;
    return (
      <div className='tab-control'>
        {titles.map((item, index) => {
          return (
            <div className={`item ${currentIndex === index ? "active" : ""}`} key={item} onClick={(e) => this.itemClick(index)}>
              {/* <span className='text'> {item}</span> */}
              {itemType(item)}
            </div>
          );
        })}
      </div>
    );
  }
}

export default TabControl;

5.18 Context 应用场景

非父子组件数据的共享
- 在开发中，比较常见的数据传递方式是通过 props 属性自上而下（由父到子）进行传递
- 但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）
- 如果在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作：...this.props
实现一个一层层传递的案例：
- 顺便补充：Spread Attributes（直接展开传递）

import React, { Component } from "react";
import Home from "./Home";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      info: {
        name: "lili",
        age: 18,
      },
    };
  }
  render() {
    const { info } = this.state;
    return (
      <div>
        <h2>App</h2>
        <Home name='lili' age={18}></Home>
        <Home name={info.name} age={info.age} />
        {/* 直接展开 */}
        <Home {...info} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'

export class Home extends Component {
  render() {
    const {name,age} = this.props
    return (
      <div>
        <h2>Home:{name}-{ age}</h2>
      </div>
    )
  }
}

export default Home

但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的
- React 提供了一个API：Context
- Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props
- Context 设计目的是为了共享那些对于一个组件树而言是**“全局”的数据**，例如当前认证的用户、主题或首选语言

5.19 使用 Context 步骤

创建一个 Context：建立一个文件夹

import React from "react";
// 1. 创建一个Context
const ThemeContext = React.createContext();
export default ThemeContext

提供数据的组件：通过 Context 中的 Provider 中的 value 属性为后代提供数据

import React, { Component } from 'react'
import HomeInfo from './HomeInfo'

export class Home extends Component {
  render() {
    const {name,age} = this.props
    return (
      <div>
        <h2>Home:{name}-{age}</h2>
        <HomeInfo></HomeInfo>
      </div>
    )
  }
}

export default Home

中间件

import React, { Component } from 'react'
import HomeBanner from './HomeBanner'
import HomeInfo from './HomeInfo'

export class Home extends Component {
  render() {
    const {name,age} = this.props
    return (
      <div>
        <h2>Home:{name}-{age}</h2>
        <HomeInfo></HomeInfo>
        <HomeBanner></HomeBanner>
      </div>
    )
  }
}

export default Home

接收数据的组件（类组件）：设置组件的 contextType 的类型为某一个 Context

import React, { Component } from 'react'
import ThemeContext from './context/theme-context'
export class HomeInfo extends Component {
  render() {
    return (
      <div>HomeInfo：{ this.context.color}</div>
    )
  }
}
HomeInfo.contextType = ThemeContext
export default HomeInfo

接收数据的组件（函数式组件）

import ThemeContext from "./context/theme-context";
function HomeBanner() {
  return (
    <div>
      <h1>HomeBanner</h1>
      {/* 函数式组件使用 Context 共享的数据:消费者 */}
      {/* flutter 就是参考它 */}
      <ThemeContext.Consumer>
        {/* 传入一个回调函数 */}
        {(value) => {
          return <h2>{value.color}</h2>;
        }}
      </ThemeContext.Consumer>
    </div>
  );
}
export default HomeBanner;

多个组件

import React, { Component } from "react";
import Home from "./Home";
import ThemeContext from "./context/user-context";
import UserContext from "./context/user-context";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      info: {
        name: "lili",
        age: 18,
      },
    };
  }
  render() {
    const { info } = this.state;
    return (
      <div>
        <h2>App</h2>
        {/* 1. 给 Home 传递数据*/}
        {/* <Home name='lili' age={18}></Home>
        <Home name={info.name} age={info.age} /> */}
        {/* 直接展开 */}
        {/* <Home {...info} /> */}
        {/* 2. 普通的 Home */}
        {/* <Home {...info} /> */}
        {/* 需要把它包裹起来 */}
        <UserContext.Provider value={{ nickname: "环环紧扣",age:23 }}>
          <ThemeContext.Provider value={{ color: "red", size: 30 }}>
            <Home {...info} />
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";
import UserContext from "./context/user-context";
import ThemeContext from "./context/user-context";
export class HomeInfo extends Component {
  render() {
    return (
      <div>
        <h2>HomeInfo：{this.context.color}</h2>
        <UserContext.Consumer>
          {(value) => {
            return <h2>User:{value.nickname}</h2>;
          }}
        </UserContext.Consumer>
      </div>
    );
  }
}
// Context 类型只能设置一个
HomeInfo.contextType = ThemeContext;
export default HomeInfo;

5.20 Context 相关API

React.createContext
- 创建一个需要共享的 Context 对象
- 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的 context 值
- defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值
Context.Provider
- 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化
- Provider 接收一个 value 属性，传递给消费组件
- 一个 Provider 可以和多个消费组件有对应关系
- 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
- 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染
Class.contextType
- 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象
- 使用 this.context 来消费最近 Context 上的那个值
- 可以在任何生命周期中访问到它，包括 render 函数中
Context.Consumer
- 这里，React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context
- 这里需要函数作为子元素（function as child）这种做法
- 这个函数接收当前的 context 值，返回一个 React 节点
繁琐，一般使用 redux 进行状态管理

子组件不放在父组件提供的数据组件里面，又想使用这个数据，怎么使用

给 Context 设置一个默认值

import React from "react";
// 1. 创建一个Context
const ThemeContext = React.createContext({color:"blue"});
export default ThemeContext

子组件使用

import React, { Component } from "react";
import ThemeContext from "./context/theme-context";

export class Profile extends Component {
  render() {
    console.log(this.context);
    return <div>Profile</div>;
  }
}
Profile.contextType = ThemeContext;
export default Profile;

什么时候使用 Context.Consumer
- 当使用value的组件是一个函数式组件时
- 当组件中需要使用多个 Context 时

5.21 使用 setState 原因

对比
- vue 中：template = 》 render
- react 中：render = 》React.createElement(“div”,{},children)
  - 只有调用 setState 的时候，render 函数才会被重新执行
react 没有做数据劫持
开发中并不能直接通过修改state的值来让界面发生更新
- 因为修改了state之后，希望 React 根据最新的State来重新渲染界面，但是这种方式的修改React 并不知道数据发生了变化
- React 并没有实现类似于 Vue2 中的 Object.defineProperty 或者 Vue3 中的 Proxy 的方式来监听数据的变化
- 必须通过 setState 来告知 React 数据已经发生了变化
在组件中并没有实现 setState 的方法，为什么可以 this.setState 调用呢
- setState方法是从 Component 中继承过来的

5.22 setState 异步更新

setState 的更新是异步的
- 最终打印结果是 Hello World
- 可见 setState 是异步的操作，并不能在执行完 setState 之后立马拿到最新的 state 的结果
setState的三种写法

import React, { Component } from "react";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "hello world",
      counter: 0,
    };
  }
  changeText() {
    // 1. setState 的更多用法
    // 1.1 基本使用:其实是创建了一个新对象
    // Object.assign(this.state.newState) 进行合并
    // this.setState({
    //   message:"你好呀，lili"
    // })
    // 1.2 setState 可以传入一个回调函数
    // 好处一：可以在回调函数中编写新的 state 的逻辑
    // 好处二：当前的回调函数会将之前的state 和 props 传递进来
    // this.setState((state,props) => {
    //   // 1.2.1编写一些对新的state的处理逻辑
    //   // 1.2.2可以获取之前的state 和 props 值
    //   return {
    //     message: "hhh",
    //   };
    // });
    // 1.3 setState 在 React 的事件处理中是一个异步调用（等一会再合并）
    // 如果希望在数据更新之后（数据合并），获取到对应的结果执行一些逻辑代码==>在 setState 中传入第二个参数：callback
    this.setState({
      message:"你好呀，李里"
    }, () => {
      console.log(this.state.message);
    })
  }
  render() {
    const { message, counter } = this.state;

    return (
      <div>
        <h1>message:{message}</h1>
        <button onClick={(e) => this.changeText()}>修改本文</button>
        <h1>counter:{counter}</h1>
        <button onClick={(e) => this.increment()}>counter+1</button>
      </div>
    );
  }
}

export default App;

为什么 setState 设计为异步
- setState 设计为异步其实之前在 GitHub 上也有很多的讨论
- React 核心成员（ Redux 的作者）Dan Abramov 也有对应的回复
  - https://github.com/facebook/react/issues/11527#issuecomment-360199710
简单的总结：
- setState设计为异步，可以显著的提升性能
  - 如果每次调用 setState 都进行一次更新，那么意味着 render 函数会被频繁调用，界面重新渲染，这样效率是很低的
  - 最好的办法应该是获取到多个更新，之后进行批量更新
- 如果同步更新了state，但是还没有执行 render 函数，那么 state 和 props 不能保持同步
  - state 和 props 不能保持一致性，数据错误混乱，会在开发中产生很多的问题

import React, { Component } from "react";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "hello world",
      counter: 0,
    };
  }
  changeText() {
    this.setState({
      message: "你好呀",
    });
    console.log(this.state.message);
  }
  increment() {
    // this.setState({
    //   counter: this.state.counter + 1,//0 + 1
    // }); //不更新，先加入到队列里面，把里面的内容依次处理，先进先出，处理完了，再合并更新 do while 循环
    // this.setState({
    //   counter: this.state.counter + 1,//0 + 1
    // });
    // this.setState({
    //   counter: this.state.counter + 1,//0 + 1
    // });
    // 这样拿到的是最新的state进行回调
    this.setState((state) => {
      console.log(this.state.count); //没有改，不推荐这样做
      return {
        counter: state.counter + 1,
      };
    });
    this.setState((state) => {
      console.log(this.state.count);
      return {
        counter: state.counter + 1,
      };
    });
    this.setState((state) => {
      console.log(this.state.count);
      return {
        counter: state.counter + 1,
      };
    });
  }
  //为一： 间接证明了是异步
  render() {
    const { message, counter } = this.state;

    return (
      <div>
        <h1>message:{message}</h1>
        <button onClick={(e) => this.changeText()}>修改本文</button>
        <h1>counter:{counter}</h1>
        <button onClick={(e) => this.increment()}>counter+1</button>
      </div>
    );
  }
}

export default App;

5.23 setState（React18之前）

分不同的情况，React18 之前对于 setState 都是进行异步处理，有一些特殊的情况会变成同步的
- promise 事件回调
- setTimeout
- 原生 DOM 事件

import React, { Component } from "react";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "hello world",
      counter: 0,
    };
  }
  changeText() {
    // 在 react 18 之前，setTimeout 中的 setState 操作，这个代码是同步的代码
        // 在 react 18 之后，setTimeout 中的 setState 是异步操作（批处理）
    setTimeout(() => {
      this.setState({
        message: "你好呀理理",
      });
      console.log(this.state.message);
    }, 0);
  }
  
  increment() {}
  //为一： 间接证明了是异步
  render() {
    const { message, counter } = this.state;

    return (
      <div>
        <h1>message:{message}</h1>
        <button onClick={(e) => this.changeText()}>修改本文</button>
        <h1>counter:{counter}</h1>
        <button onClick={(e) => this.increment()}>counter+1</button>
      </div>
    );
  }
}

export default App;

在组件生命周期或 React合成事件中，setState是异步；在setTimeout或者原生dom事件中，setState是同步

5.24 setState（React18 之后）

在 React18 之后，默认所有的操作都被放到了批处理中（异步处理）
如果希望代码可以同步拿到，则需要执行特殊的 **flushSync **操作

六、React组件化开发（二）

6.1 React更新机制

React 的渲染流程： JSX == > 虚拟DOM ==> 真实DOM
React 的更新流程：
- props/state 改变
- render 函数重新执行
- 产生新的 DOM 树
- 新旧 DOM 树进行 diff
- 计算出差异进行更新
- 更新到真实的 DOM

6.2 React 的更新流程

React 在 props 或 state 发生改变时，会调用 React 的 render 方法，会创建一棵不同的树
React 需要基于这两棵不同的树之间的差别来判断如何有效的更新 UI
- 如果一棵树参考另外一棵树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O( n³)，其中 n 是树中元素的数量
- https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf
- 如果在 React 中使用了该算法，那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围
- 这个开销太过昂贵了，React 的更新性能会变得非常低效
于是，React 对这个算法进行了优化，将其优化成了 O(n)，如何优化的呢？
- 同层节点之间相互比较，不会跨节点比较
- 不同类型的节点，产生不同的树结构
- 开发中，可以通过 key 来指定哪些节点在不同的渲染下保持稳定

6.3 keys的优化

在前面遍历列表时，总是会提示一个警告：加入一个 key 属性
方式一：在最后位置插入数据
- 这种情况，有无 key 意义并不大
方式二：在前面插入数据
- 这种做法，在没有 key 的情况下，所有的 li 都需要进行修改
当子元素(这里的li)拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素
- 在下面这种场景下，key 为 111 和 222 的元素仅仅进行位移，不需要进行任何的修改
- 将 key 为 333 的元素插入到最前面的位置即可
key 的注意事项：
- key 应该是唯一的
- key 不要使用随机数（随机数在下一次render时，会重新生成一个数字）
- 使用 index 作为key，对性能是没有优化的
  - 中间插入东西，index 会改变
  - 只能消除警告

6.4 render 函数被调用

使用之前的一个嵌套案例：
- 在 App 中，增加了一个计数器的代码
- 当点击 +1 时，会重新调用 App 的 render 函数
- 而当 App 的 render 函数被调用时，所有的子组件的 render 函数都会被重新调用
如果在以后的开发中，只要是修改了**App 中的数据，**所有的组件都需要重新render，进行 diff算法性能必然是很低的
- 事实上，很多的组件没有必须要重新 render
- 它们调用 render 应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的 render方法
如何来控制 render 方法是否被调用呢？
- shouldComponentUpdate

6.5 ShouldComponentUpdate

React 提供了一个生命周期方法 shouldComponentUpdate（很多时候，简称为 SCU ），这个方法接受参数，并且需要有

返回值：
该方法有两个参数：
- 参数一：nextProps 修改之后，最新的 props 属性
- 参数二：nextState 修改之后，最新的 state 属性
该方法返回值是一个 boolean 类型：
- 返回值为 true，那么就需要调用 render 方法
- 返回值为 false，那么久不需要调用 render 方法
- 默认返回的是 true，也就是只要 state 发生改变，就会调用 render 方法
比如在 App 中增加一个 message 属性：
- jsx 中并没有依赖这个 message，那么它的改变不应该引起重新渲染
- 但是因为 render 监听到 state 的改变，就会重新 render，所以最后 render 方法还是被重新调用了

6.6 render 函数的优化

优化点
- App 不重新渲染子组件
- App 不重新渲染相同的内容
  - 加判断条件
一个组件到底要不要重新渲染需要看 props 和 state 是否发生改变

import React, { Component } from "react";
import Home from "./Home";
import Recommend from "./Recommend";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "hello world",
      counter: 88,
    };
  }
  shouldComponentUpdate(newProps, newState) {
    if (newState.message !== this.state.message || newState.counter !== this.state.counter) {
      return true;
    }
    return false;
  }
  changeText() {
    this.setState({
      message: "你好呀",
      // message: "hello world",
    });
  }
  changeCounter() {
    this.setState({
      counter: this.state.counter + 88,
    });
  }
  render() {
    console.log("App render");
    const { message, counter } = this.state;
    return (
      <div>
        <h1>
          App-{message}-{counter}
        </h1>
        <button onClick={(e) => this.changeText()}>changeText</button>
        <button onClick={(e) => this.changeCounter()}>change counter + 88</button>
        <Home message={message}></Home>
        <Recommend counter = {counter}></Recommend>
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";

export class Home extends Component {
  shouldComponentUpdate(newProps, newState) {
    if (newProps.message !== this.props.message) {
      return true
    }
    return false;
  }
  render() {
    console.log("Home render");
    return (
      <div>
        <h2>Home-page</h2>
        <h2>Home-page-{this.props.message}</h2>
      </div>
    );
  }
}

export default Home;

import React, { Component } from "react";

export class Recommend extends Component {
  shouldComponentUpdate(newProps, newState) {
    if (newProps.counter !== this.props.counter) {
      return true;
    }
    return false;
  }
  render() {
    console.log("Recommend render");

    return (
      <div>
        <h2>Recommend-page</h2>
        <h2>Recommend-page-{this.props.counter}</h2>
      </div>
    );
  }
}

export default Recommend;

6.7 PureComponent

不想自己写判断
如果所有的类，都需要手动来实现 shouldComponentUpdate，那么会给开发者增加非常多的工作量。
- 来设想一下 shouldComponentUpdate 中的各种判断的目的是什么
- props 或者 state 中的数据是否发生了改变，来决定 shouldComponentUpdate 返回 true 或者 false
事实上 React 已经考虑到了这一点，所以 React 已经默认帮我们实现好了，如何实现呢？
- 将 class 继承自 PureComponent
- 本质进行了一层浅层比较
  - 只比较第一层，不比较深层

6.8 高阶组件 memo

那函数式组件怎么办呢
- 高阶函数memo
- 判断是否需要重新渲染，重新生成一个组件

import { memo } from "react";
const Profile = memo(function Profile(props) {
  console.log("profile render");
  return <h2>{props.message}</h2>;
});

export default Profile;

6.9 数据不可变的力量

当继承自 PureComponent 的时候，这样设置并不能进行更新，界面没有进行刷新
- PureComponent 在底层实现 shouldComponentUpdate 是使用浅层比较
- 源码实现方法checkShouldComponentsUnpdate
  - Object.is 方法：判断两个对象是不是同一个对象
- 会对 this.state.books 和 newState 中的 books 进行比较，发现两者是同一个，并不能生效
- 因此不要直接修改 state ，而是重新设置一个对象

  addBook() {
    const newBook = { name: "hhhhh", price: 99, count: 99999 };
    this.state.books.push(newBook);
    this.setState({ books: this.state.books });
  }

对象类型要改变就去拷贝一份，让它重新指向一份新的内存

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      books: [
        { name: "lili", price: 99, count: 99 },
        { name: "hhhhh", price: 99, count: 999 },
        { name: "libing", price: 99, count: 9999 },
      ],
    };
  }
  // shouldComponentUpdate(nextProps,nextState) {
  //   shallowEqual(nextProps,this.props)
  //   shallowEqual(nextState, this.state)

  // }
  addBook() {
    const newBook = { name: "hhhhh", price: 99, count: 99999 };
    // 1. 直接修改原有的 state，重新设置一遍
    // 在 PureComponents 是不能引起重新渲染的（re-render）
    // 2. 复制一份books，在新的books中修改，设置新的books
    // this.state.books.push(newBook);
    const books = [...this.state.books];
    books.push(newBook);
      //要把整个数据都修改掉
    this.setState({ books: books });
  }
  addBookCount(index) {
    // 因为是浅层比较，数组中的对象指向的同一份内存，本质上是一样的
    //1.  this.state.books[index].count++
    //2. 保证一定会执行 render 函数
    const books = [...this.state.books];
    books[index].count++;
    this.setState({ books: books });
  }
  render() {
    const { books } = this.state;
    return (
      <div>
        <h1>数据列表</h1>
        <ul>
          {books.map((item, index) => {
            return (
              <li key={index}>
                name:{item.name}-price:{item.price}-count:{item.count}
                <button onClick={(e) => this.addBookCount(index)}>+1</button>
              </li>
            );
          })}
        </ul>
        <button onClick={(e) => this.addBook()}>addBook</button>
      </div>
    );
  }
}

export default App;

6.10 使用ref

在 React 的开发模式中，通常情况下不需要、也不建议直接操作 DOM 原生，但是某些特殊的情况，确实需要获取到 DOM 进行某些操作：
- 管理焦点，文本选择或媒体播放
- 触发强制动画
- 集成第三方 DOM 库
- 可以通过 refs 获取 DOM
如何创建 refs 来获取对应的DOM呢？目前有三种方式：
- 方式一：传入字符串
  - 使用时通过 this.refs. 传入的字符串格式获取对应的元素
  - 废弃了
- 方式二：传入一个对象
  - 对象是通过 React.createRef() 方式创建出来的
  - 使用时获取到创建的对象其中有一个 current 属性就是对应的元素
- 方式三：传入一个函数
  - 该函数会在 DOM 被挂载时进行回调，这个函数会传入一个元素对象，可以自己保存
  - 使用时，直接拿到之前保存的元素对象即可
获取原生 DOM

import React, { PureComponent, createRef } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {};
    this.titleRef = createRef();
    this.titleEl = null;
  }
  getNativeDOM() {
    // 0. 只能获取第一个,强烈不推荐
    // const h2El = document.querySelector('h2')
    // 1. 方式一：在 React 元素上绑定一个 ref 字符串
    // console.log(this.ref.lili);
    // 2. 方式二：提前创建好 ref 对象，createRef(),将创建出来的对象绑定到元素
    // console.log(this.titleRef.current);
    // 3. 方式三：传入一个回调函数，在对应的元素被渲染之后，回调函数被执行，并且将元素传入
    console.log(this.titleEl);
  }
  render() {
    return (
      <div>
        <h2 ref='lili'>喝了咯 world</h2>
        <h2 ref={this.titleRef}>你好啊</h2>
        <h2 ref={(el) => (this.titleEl = el)}>你好嘞</h2>
        <button onClick={(e) => this.getNativeDOM()}>获取 DOM</button>
      </div>
    );
  }
}

export default App;

获取类组件
- 子组件实例： console.log(this.hwRef.current)
- 调用子组件方法

import React, { PureComponent, createRef } from "react";
class HelloWorld extends PureComponent {
  test() {
    console.log("========test=========");
  }
  render() {
    return <h1>hello world</h1>;
  }
}
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {};
    this.hwRef = createRef();
  }
  getComponent() {
    console.log(this.hwRef.current);
    this.hwRef.current.test()
  }

  render() {
    return (
      <div>
        <HelloWorld ref={this.hwRef}></HelloWorld>
        <button onClick={(e) => this.getComponent()}>获取组件实例</button>
      </div>
    );
  }
}

export default App;

获取函数式组件中某一个元素
- 获取不到函数组件实例
- 创建的 hwRef 通过 forwardRef 函数传给了函数组件的内部元素

import React, { PureComponent, createRef,forwardRef } from "react";
const  HelloWorld = forwardRef(function(props,ref) {
  return (
    <div>
      <h1 ref={ref}>hello world</h1>
    </div>
  );
})
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {};
    this.hwRef = createRef();
  }
  getComponent() {
    console.log(this.hwRef.current);
  }

  render() {
    return (
      <div>
        <HelloWorld ref={this.hwRef}></HelloWorld>
        <button onClick={(e) => this.getComponent()}>获取组件实例</button>
      </div>
    );
  }
}

export default App;

6.11 ref 的类型

ref 的值根据节点的类型而有所不同：
- 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性
- 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性
- 函数式组件是没有实例的，所以无法通过 ref 获取他们的实例
  - 但是某些时候，可能想要获取函数式组件中的某个 DOM 元素
  - 这个时候可以通过 React.forwardRef ，也可以使用 hooks 中提供的 useRef

6.12 受控组件

受控组件：在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state
比如下面的HTML表单元素：
- 这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面
- 在React中，并没有禁止这个行为，它依然是有效的
- 但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据
- 实现这种效果的标准方式是使用“受控组件”
  - 一般都会把 input 设置成受控组件
要改变输入框的值，必须设置：onChange={e => this.inputChange(e)}

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state={
      username:'li'
    }
  }

  inputChange(event) {
    // 这里的 e 不是原生的 e，是 react 做了一层包裹
    console.log(event.target.value);
    this.setState({username:event.target.value})
  }
  render() {
    const {username} = this.state
    return (
      <div>
        {/* 受控组件 */}
        <input type="text" value={username} onChange={e => this.inputChange(e)} />
        {/* 非受控组件 */}
        <input type="text" />
        <h2>username：{ username}</h2>
      </div>
    )
  }
}

export default App

6.13 自己提交 form 表单

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "游刃有余e",
    };
  }

  inputChange(event) {
    // 这里的 e 不是原生的 e，是 react 做了一层包裹
    console.log(event.target.value);
    this.setState({ username: event.target.value });
  }
  handleSubmitClick(event) {
    // 1. 阻止默认的行为
    event.preventDefault();
    // 2. 获取到所有的表单数据，对数据进行操作
    console.log("获取所有的输入内容");
    console.log(this.state.username);
    // 3. 以网络请求的方式，将数据传递给服务器（ajax/fetch/axios）
  }
  render() {
    const { username } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          {/* 1. 用户名和密码 */}
          <label htmlFor='username'>
            用户：
            <input id='username' type='text' name='username' value={username} onChange={(e) => this.inputChange(e)} />
          </label>
          <button type='submit'>注册 </button>
        </form>
      </div>
    );
  }
}

export default App;

6.14 多个表单同一个函数

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "游刃有余e",
      password:''
    };
  }

  // handleUsernameChange(event) {
  //   // 这里的 e 不是原生的 e，是 react 做了一层包裹
  //   console.log(event.target.value);
  //   this.setState({ username: event.target.value });
  // }
  // handlePasswordChange(event) {
  //   // 这里的 e 不是原生的 e，是 react 做了一层包裹
  //   console.log(event.target.value);
  //   this.setState({ password: event.target.value });
  // }
  handleSubmitClick(event) {
    // 1. 阻止默认的行为
    event.preventDefault();
    // 2. 获取到所有的表单数据，对数据进行操作
    console.log("获取所有的输入内容");
    console.log(this.state.username,this.state.password);
    // 3. 以网络请求的方式，将数据传递给服务器（ajax/fetch/axios）
  }
  handleInputChange(event) {
    // event.target 拿到元素
    // 拿到绑定的 name
    // const keyName = event.target.name
    // this.setState({
    //   [keyName]:event.target.value
    // })
    // 简写
    this.setState({
      [event.target.name]:event.target.value
    })
  }
  render() {
    const { username,password } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          {/* 1. 用户名和密码 */}
          <label htmlFor='username'>
            用户：
            <input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
          </label>
          <label htmlFor='password'>
            密码：
            <input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
          </label>
          <button type='submit'>注册 </button>
        </form>
      </div>
    );
  }
}

export default App;

6.15 checkbox 单选多选

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "li",
      password: "",
      isAgree: true,
      hobbies: [
        { value: "sing", text: "唱", isChecked: false },
        { value: "dance", text: "跳", isChecked: false },
        { value: "rap", text: "rap", isChecked: false },
      ],
      
    };
  }

  handleSubmitClick(event) {
    // 1. 阻止默认的行为
    event.preventDefault();
    // 2. 获取到所有的表单数据，对数据进行操作
    console.log("获取所有的输入内容");
    console.log(this.state.username, this.state.password);
    console.log("获取爱好");
    console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));
    // 3. 以网络请求的方式，将数据传递给服务器（ajax/fetch/axios）
  }
  handleInputChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }
  handleAgreeChange(event) {
    this.setState({ isAgree: event.target.checked });
  }
  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies];
    hobbies[index].isChecked = event.target.checked;
    this.setState({ hobbies });
  }
  render() {
    const { username, password, isAgree, hobbies } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <div>
            {/* 1. 用户名和密码 */}
            <label htmlFor='username'>
              用户：
              <input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
            </label>
            <label htmlFor='password'>
              密码：
              <input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
            </label>
          </div>
          {/* 2. checkbox */}
          <label htmlFor='agree'>
            <input type='checkbox' id='agree' checked={isAgree} onChange={(e) => this.handleAgreeChange(e)} />
            同意协议
          </label>
          {/* 3. checkbox 多选 */}
          <div>
            爱好：
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={item.value} key={item.value}>
                  <input type='checkbox' id={item.value} checked={item.isChecked} onChange={(e) => this.handleHobbiesChange(e, index)} />
                  {item.text}
                </label>
              );
            })}
          </div>
          {/* 4. select 元素 */}
          {/* 不是默认提交的话，可以没有 name */}
          <select>
            <option value='apple'>苹果</option>
            <option value='orange'>橘子</option>
            <option value='banana'>香蕉</option>
          </select>
          <div>
            <button type='submit'>注册 </button>
          </div>
        </form>
      </div>
    );
  }
}

export default App;

6.16 select

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "游刃有余e",
      password: "",
      isAgree: true,
      hobbies: [
        { value: "sing", text: "唱", isChecked: false },
        { value: "dance", text: "跳", isChecked: false },
        { value: "rap", text: "rap", isChecked: false },
      ],
      fruit: ["orange"],
    };
  }

  handleSubmitClick(event) {
    // 1. 阻止默认的行为
    event.preventDefault();
    // 2. 获取到所有的表单数据，对数据进行操作
    console.log("获取所有的输入内容");
    console.log(this.state.username, this.state.password);
    console.log("获取爱好");
    console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));
    // 3. 以网络请求的方式，将数据传递给服务器（ajax/fetch/axios）
  }
  handleInputChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }
  handleAgreeChange(event) {
    this.setState({ isAgree: event.target.checked });
  }
  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies];
    hobbies[index].isChecked = event.target.checked;
    this.setState({ hobbies });
  }
  handleFruitChange(event) {
    // this.setState({ fruit: event.target.value });
    // 类数组
    // console.log(event.target.selectedOptions);
    const options = Array.from(event.target.selectedOptions);
    const values1 = options.map((item) => item.value);
    this.setState({ fruit: values1 });
    // 简便写法
    const values2 = Array.from(event.target.selectedOptions, (item) => item.value);
    console.log(values2);
  }
  render() {
    const { username, password, isAgree, hobbies, fruit } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <div>
            {/* 1. 用户名和密码 */}
            <label htmlFor='username'>
              用户：
              <input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
            </label>
            <label htmlFor='password'>
              密码：
              <input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
            </label>
          </div>
          {/* 2. checkbox */}
          <label htmlFor='agree'>
            <input type='checkbox' id='agree' checked={isAgree} onChange={(e) => this.handleAgreeChange(e)} />
            同意协议
          </label>
          {/* 3. checkbox 多选 */}
          <div>
            爱好：
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={item.value} key={item.value}>
                  <input type='checkbox' id={item.value} checked={item.isChecked} onChange={(e) => this.handleHobbiesChange(e, index)} />
                  {item.text}
                </label>
              );
            })}
          </div>
          {/* 4. select 元素 */}
          {/* 不是默认提交的话，可以没有 name 和 id */}
          <select value={fruit} onChange={(e) => this.handleFruitChange(e)} multiple>
            <option value='apple'>苹果</option>
            <option value='orange'>橘子</option>
            <option value='banana'>香蕉</option>
          </select>
          <div>
            <button type='submit'>注册 </button>
          </div>
        </form>
      </div>
    );
  }
}

export default App;

6.17 非受控组件

React 推荐大多数情况下使用受控组件来处理表单数据：
- 一个受控组件中，表单数据是由 React 组件来管理的
- 另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理
如果要使用非受控组件中的数据，那么需要使用 ref 来从DOM节点中获取表单数据
- 使用 ref 来获取 input 元素
在非受控组件中通常使用defaultValue来设置默认值，不能通过 value 设置默认值
同样，和支持 defaultChecked，和支持 defaultValue

import React, { PureComponent } from "react";
import { createRef } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "游刃有余e",
      password: "",
      isAgree: true,
      hobbies: [
        { value: "sing", text: "唱", isChecked: false },
        { value: "dance", text: "跳", isChecked: false },
        { value: "rap", text: "rap", isChecked: false },
      ],
      fruit: ["orange"],
      info: "hhhhh",
    };
    this.infoRef = createRef();
  }
  // 在 componentDidMount 中监听
  componentDidMount() {
    // this.infoRef.current.addEventListener
  }

  handleSubmitClick(event) {
    // 1. 阻止默认的行为
    event.preventDefault();
    // 2. 获取到所有的表单数据，对数据进行操作
    console.log("获取所有的输入内容");
    console.log(this.state.username, this.state.password);
    console.log("获取爱好");
    console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));

    // 对于非受控组件，不想监听变化，直接拿到结果是比较简单的
    console.log(this.infoRef.current.value);
    // 3. 以网络请求的方式，将数据传递给服务器（ajax/fetch/axios）
  }
  handleInputChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }
  handleAgreeChange(event) {
    this.setState({ isAgree: event.target.checked });
  }
  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies];
    hobbies[index].isChecked = event.target.checked;
    this.setState({ hobbies });
  }
  handleFruitChange(event) {
    // this.setState({ fruit: event.target.value });
    // 类数组
    // console.log(event.target.selectedOptions);
    const options = Array.from(event.target.selectedOptions);
    const values1 = options.map((item) => item.value);
    this.setState({ fruit: values1 });
    // 简便写法
    const values2 = Array.from(event.target.selectedOptions, (item) => item.value);
    console.log(values2);
  }
  render() {
    const { username, password, isAgree, hobbies, fruit, info } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <div>
            {/* 1. 用户名和密码 */}
            <label htmlFor='username'>
              用户：
              <input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
            </label>
            <label htmlFor='password'>
              密码：
              <input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
            </label>
          </div>
          {/* 2. checkbox */}
          <label htmlFor='agree'>
            <input type='checkbox' id='agree' checked={isAgree} onChange={(e) => this.handleAgreeChange(e)} />
            同意协议
          </label>
          {/* 3. checkbox 多选 */}
          <div>
            爱好：
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={item.value} key={item.value}>
                  <input type='checkbox' id={item.value} checked={item.isChecked} onChange={(e) => this.handleHobbiesChange(e, index)} />
                  {item.text}
                </label>
              );
            })}
          </div>
          {/* 4. select 元素 */}
          {/* 不是默认提交的话，可以没有 name 和 id */}
          <select value={fruit} onChange={(e) => this.handleFruitChange(e)} multiple>
            <option value='apple'>苹果</option>
            <option value='orange'>橘子</option>
            <option value='banana'>香蕉</option>
          </select>
          {/* 5. 非受控组件 */}
          <input type='text' defaultValue={info} ref={this.infoRef} />
          <div>
            <button type='submit'>注册 </button>
          </div>
        </form>
      </div>
    );
  }
}

export default App;

6.18 高阶组件定义

高阶函数的维基百科定义：至少满足以下条件之一
- 接受一个或多个函数作为输入
- 输出一个函数

// 回顾函数
function foo() {
  console.log("foo function");
}
foo();
// 高阶函数
function foo2(fn) {
  console.log("foo2 function");
  setTimeout(() => {
    fn();
  }, 2000);
}
foo2(function () {});
// [].map().filter().forEach()

// 高阶函数
function foo3() {
  function bar() {}
  return bar;
}
foo3();

JavaScript 中比较常见的 filter、map、reduce 都是高阶函数。
高阶组件
- 高阶组件的英文是 Higher-Order Components，简称为 HOC
- 官方的定义：高阶组件是参数为组件，返回值为新组件的函数
首先，高阶组件本身不是一个组件，而是一个函数
其次，这个函数的参数是一个组件，返回值也是一个组件
特点
- 接收一个组件作为它的参数
- 返回一个新的组件
  - 类组件
  - 函数组件
拦截下来，对原来的组件进行拦截

6.19 高阶组件

组件的名称问题：
- 在 ES6 中，类表达式中类名是可以省略的
- 组件的名称都可以通过 displayName 来修改
高阶组件并不是 React API 的一部分，它是基于 React 的组合特性而形成的设计模式
高阶组件在一些 React 第三方库中非常常见：
- 比如 redux 中的 connect
  - 将 redux 中的数据，插入到 Home 中的 props里面
- 比如 react-router 中的 withRouter

import React, { PureComponent } from "react";
// 定义一个高阶组件
function hoc(WrapperComponent) {
  // 1. 定义类组件
  class NewCpn extends PureComponent {
    render() {
      // 对组件做了一层拦截
      return <WrapperComponent name='li'></WrapperComponent>;
    }
  }
  return NewCpn;
  // 2. 定义函数组件
  // function NewCpn2(props) {}
  // return NewCpn2;
}

class HelloWorld extends PureComponent {
  render() {
    return <h1>hello world</h1>;
  }
}
const HelloWorldHOC = hoc(HelloWorld);
export class App extends PureComponent {
  render() {
    return (
      <div>
        {/* <HelloWorld></HelloWorld> */}
        <HelloWorldHOC></HelloWorldHOC>
      </div>
    );
  }
}

export default App;

6.20 使用高阶组件的场景

目的
- 在组件真正渲染之前进行拦截操作
  - 增强
  - 判断的逻辑
props 的增强<一>
- hoc => enhanced_props.js
- pages

import React, { PureComponent } from "react";
// 将数据注入到组件里面
// 定义高阶组件：给一些需要特殊数据的组件，注入 props
function enhancedUserInfo(OriginComponent) {
  class NewComponent extends PureComponent {
    constructor() {
      super();
      this.state = {
        userInfo: {
          name: "lili",
          level: 99,
        },
      };
    }
    render() {
      return <OriginComponent {...this.props} {...this.state.userInfo} />;
    }
  }
  return NewComponent;
}
export default enhancedUserInfo;

import React, { PureComponent } from 'react'
import enhancedUserInfo from '../hoc/enhanced_props'

export class About extends PureComponent {
  render() {
    return (
      <div>About</div>
    )
  }
}

export default enhancedUserInfo( About)

import React, { PureComponent } from "react";
import enhancedUserInfo from "./hoc/enhanced_props";
import About from "./pages/About";

const Home = enhancedUserInfo(function (props) {
  return (
    <h1>
      Home:{props.name}-{props.level}-{props.banners}
    </h1>
  );
});
const Profile = enhancedUserInfo(function (props) {
  return (
    <h1>
      Profile:{props.name}-{props.level}
    </h1>
  );
});
const HelloFriend = enhancedUserInfo(function (props) {
  return (
    <h1>
      HelloFriend:{props.name}-{props.level}
    </h1>
  );
});

export class App extends PureComponent {
  render() {
    return (
      <div>
        <Home banners={["hah", "lal", "lil"]} />
        <Profile />
        <HelloFriend />
        <About />
      </div>
    );
  }
}

export default App;
context

Context的共享<二>
- context->theme_context
- 将对应的 context 通过函数增强将东西放在原始组件里面

import { createContext } from "react";
const themeContext = createContext()
export default themeContext

import ThemeContext from "../context/theme_context";
function withTheme(OriginComponent) {
  return (props) => {
    return (
      <ThemeContext.Consumer>
        {(value) => {
          return <OriginComponent {...value} {...props}></OriginComponent>;
        }}
      </ThemeContext.Consumer>
    );
  };
}
export default withTheme;

import React, { PureComponent } from "react";

import withTheme from "../hoc/with_theme";
export class Product extends PureComponent {
  render() {
    const { color, size } = this.props;
    return (
      <div>
        Product:{color}-{size}
      </div>
    );
  }
}

export default withTheme(Product);

渲染判断鉴权<三>
- 某些页面是必须用户登录成功才能进行进入
- 如果用户没有登录成功，那么直接跳转到登录页面

function loginAuth(OriginComponent) {
  // 如果有状态的话就使用类组件
  // 没有自己的状态的话就使用函数组件
  return (props) => {
    // 从 localStorage 中获取token
    const token = localStorage.getItem("token");
    if (token) {
      return <OriginComponent {...props} />;
    }
    return <h2>请先登录再跳转到对应的页面中</h2>;
  };
}
export default loginAuth;

import React, { PureComponent } from 'react'
import loginAuth from '../hoc/login_auth'

class Cart extends PureComponent {
  render() {
    return (
      <div>
        <h2>Cart</h2>
      </div>
    )
  }
}

export default loginAuth(Cart)

import React, { PureComponent } from "react";
import Cart from "./pages/Cart";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      isLogin: false,
    };
  }
  loginClick() {
    localStorage.setItem("token", "li");
    this.setState({ isLogin: true });
    //不改变 state 强制重新刷新
    // this.forceUpdate();
  }
  render() {
    const { isLogin } = this.state;
    return (
      <div>
        <button onClick={(e) => this.loginClick()}>登录</button>
        <Cart />
      </div>
    );
  }
}

export default App;

生命周期劫持<四>
- 快速语法： ul>li{数据列表$}*10

import { PureComponent } from "react";

function logRenderTime(OriginComponent) {
  // 类名可以省略：可以理解为匿名类
  // return class NewComponent extends PureComponent{
  return class extends PureComponent {
    // 不建议使用:
    // componentWillMount() {}
    // 暂时用一下，想知道花费的时间
    UNSAFE_componentWillMount() {
      this.beginTime = new Date().getTime();
    }
    componentDidMount() {
      this.endTime = new Date().getTime();
      const interval = this.endTime - this.beginTime;
      console.log(`当前${OriginComponent.name}页面花费${interval}ms渲染完成`);
    }
    render() {
      return <OriginComponent {...origin}></OriginComponent>;
    }
  };
}
export default logRenderTime;

import React, { PureComponent } from "react";
import logRenderTime from "../hoc/log_render_time";

export class Detail extends PureComponent {
  // // 不建议使用:
  // // componentWillMount() {}
  // // 暂时用一下，想知道花费的时间
  // UNSAFE_componentWillMount() {
  //   this.beginTime = new Date().getTime();
  // }
  // componentDidMount() {
  //   this.endTime = new Date().getTime();
  //   const interval = this.endTime - this.beginTime;
  //   console.log(interval);
  // }

  render() {
    return (
      <div>
        <h1>Detail</h1>
        <ul>
          <li>数据列表1</li>
          <li>数据列表2</li>
          <li>数据列表3</li>
          <li>数据列表4</li>
          <li>数据列表5</li>
          <li>数据列表6</li>
          <li>数据列表7</li>
          <li>数据列表8</li>
          <li>数据列表9</li>
          <li>数据列表10</li>
        </ul>
      </div>
    );
  }
}

export default logRenderTime(Detail);

import React, { PureComponent } from "react";
import Cart from "./pages/Cart";
import Detail from "./pages/Detail";

export class App extends PureComponent {
  render() {
    return (
      <div>
        <Detail></Detail>
      </div>
    );
  }
}

export default App;

6.21 高阶函数的意义

利用高阶组件可以针对某些 React 代码进行更加优雅的处理
其实早期的 React 有提供组件之间的一种复用方式是 mixin ，目前已经不再建议使用：
- Mixin 可能会相互依赖，相互耦合，不利于代码维护
- 不同的 Mixin 中的方法可能会相互冲突
- Mixin非常多时，组件处理起来会比较麻烦，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性
当然，HOC 也有自己的一些缺陷
- HOC 需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难
- HOC 可以劫持 props ，在不遵守约定的情况下也可能造成冲突
Hooks 的出现，是开创性的，它解决了很多 React 之前的存在的问题
- 比如 this 指向问题、比如 hoc 的嵌套复杂度问题等等

6.22 ref 的转发

memo 是一个高阶组件，相当于 PureComponent
forwardRef 也是一个高阶组件，返回一个新函数组件
ref 不能应用于函数式组件：
- 因为函数式组件没有实例，所以不能获取到对应的组件对象
但是，在开发中可能想要获取函数式组件中某个元素的 DOM，这个时候如何操作呢
- 方式一：直接传入 ref 属性（错误的做法）
- 方式二：通过 forwardRef 高阶函数

6.23 Portals 的使用

某些情况下，希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM 元素中（默认都是挂载到 id 为 root 的 DOM元素上的
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：
- 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment
- 第二个参数（container）是一个 DOM 元素
通常来讲，当从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点
然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的

  <div id="root"></div>
  <div id="lili"></div>
  <div id="modal"></div>
<style>
    #modal {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

import React, { PureComponent } from "react";
import { createPortal } from "react-dom";
import Modal from "./Modal";
export class App extends PureComponent {
  render() {
    return (
      <div className='app'>
        {createPortal(<h2>App h2</h2>, document.querySelector("#lili"))}

        {/* Modal 组件 */}
        <Modal>
          <h2>我是标题</h2>
          <h1>yyy</h1>
          <h2>eee</h2>
          <h3>4444</h3>
        </Modal>
      </div>
    );
  }
}

export default App;

import React, { PureComponent } from "react";
import { createPortal } from "react-dom";
export class Modal extends PureComponent {
  render() {
    return createPortal(this.props.children, document.querySelector("#modal"));
  }
}

export default Modal;

6.24 fragment

在之前的开发中，总是在一个组件中返回内容时包裹一个 div 元素
又希望可以不渲染这样一个 div 应该如何操作呢？
- 使用 Fragment
- Fragment 允许将子列表分组，而无需向 DOM 添加额外节点
- vue 的 template 也是使用这种方式
React 还提供了 Fragment 的短语法：
- 它看起来像空标签 <> </>
- 但是，如果需要在 Fragment 中添加 key ，那么就不能使用短语法

import React, { PureComponent, Fragment } from "react";

export class App extends PureComponent {
  render() {
    return (
      <Fragment>
        <h1>我是标题</h1>
        <h2>我是content</h2>
      </Fragment>
    );
  }
}

export default App;

import React, { PureComponent, Fragment } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      sections: [
        { title: "hahhh", content: "我是hahhh" },
        { title: "hahhh", content: "我是hahhh" },
        { title: "hahhh", content: "我是hahhh" },
        { title: "hahhh", content: "我是hahhh" },
        { title: "hahhh", content: "我是hahhh" },
        { title: "hahhh", content: "我是hahhh" },
      ],
    };
  }
  render() {
    const { sections } = this.state;
    return (
      <>
        <h1>我是标题</h1>
        <h2>我是content</h2>
        <hr />
        {sections.map((item) => {
          return (
            <Fragment key={item.title}>
              <h1>{item.title}</h1>
              <h2>{item.content}</h2>
              <hr />
            </Fragment>
          );
        })}
      </>
    );
  }
}

export default App;

6.25 StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具：
- 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI
- 它为其后代元素触发额外的检查和警告
- 严格模式检查仅在开发模式下运行；它们不会影响生产构建
可以为应用程序的任何部分启用严格模式：
- 不会对 Header 和 Footer 组件运行严格模式检查
- 但是，ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查
使用 StrictMode进行包裹

6.26 严格模式检查什么

识别不安全的生命周期
使用过时的 ref API
检查意外的副作用
- 这个组件的 constructor 会被调用两次
- 这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用
- 在生产环境中，是不会被调用两次的
- react 18 之后会显示灰色
使用废弃的 findDOMNode方法
- 在之前的 React API 中，可以通过 findDOMNode 来获取 DOM，不过已经不推荐使用了
  - 传入组件返回根元素
- 建议使用 ref 进行绑定
检测过时的 context API
- 早期的Context是通过static属性声明Context对象属性，通过getChildContext 返回 Context 对象等方式来使用 Context 的