React优化处理

五、React优化

Vue和React的数据管理和界面渲染的对比

• Vue已经将render函数封装好了，只需要对数据进行劫持，监听他的变化再执行render函数
• React没有做数据劫持而是将这一切交给程序员来进行判断，用setState进行数据更新，重新渲染

为什么React要使用setState

• 开发中我们并不能直接通过修改state的值来让界面发生更新：

  • 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；
  • React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
  • 我们必须通过setState来告知React数据已经发生了变化；

• 疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？

  • 原因很简单，setState方法是从Component中继承过来的。

setState的详细使用

setState原理

• 将新obj和旧obj合并

setState用法

0. 基本使用

    // 1.基本使用
    this.setState({
      message: "aaa  ",
    });

2. setState可以传入一个回调函数

    // 2.setState可以传入一个回调函数
    // 好处一：可以在回调函数中编写新的state的逻辑
    // 好处二：当前的回调函数会将之前的state和props传递进来
    this.setState((state, props) => {
      // 1.编写一些对新的state处理逻辑
      // 2.可以获取我们之前的state和props值
      console.log(state);
      console.log(props);
      return {
        message: "bbb",
      };
    });

3. setState在React的事件处理中是一个异步调用

    // 3.setState在React的事件处理中是一个异步调用
    // 如果希望在数据更新之后(数据合并),获取到对应的结果执行一些逻辑代码
    // 那么可以在setState中传入第二个参数：callback
    this.setState(
      {
        message: "你好，世界",
      },
      () => {
        console.log("+++++++++++", this.state.message); // +++++++++++ 你好，世界
      }
    );
    console.log("---------", this.state.message); // --------- Hello World

setState异步更新

• 为什么setState设计为异步呢？

  • setState设计为异步其实之前在GitHub上也有很多的讨论；
  • React核心成员（Redux的作者）Dan Abramov也有对应的回复，有兴趣的同学可以参考一下；
  • github.com/facebook/re…；

• 我对其回答做一个简单的总结：

• setState设计为异步，可以显著的提升性能；

  • 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
  • 最好的办法应该是获取到多个更新，之后进行批量更新；

• 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；

  • state和props不能保持一致性，会在开发中产生很多的问题；

import React, { Component } from "react";
​
function Hello(props) {
  // 如果message在父组件更新了，但是没有执行render函数，所以父组件的state和传递给子组件的props数据不一致会出问题
  return <h2>{props.message}</h2>;
}
​
export class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "Hello World",
      counter: 0,
    };
  }
​
  changeText() {
    this.setState({
      message: "aaa  ",
    });
  }
  increment() {
    this.setState({
      counter: this.state.counter + 1,
    });
    this.setState({
      counter: this.state.counter + 1,
    });
    this.setState({
      counter: this.state.counter + 1,
    });
    // counter结果为1
​
    this.setState((state) => {
      return {
        counter: state.counter + 1,
      };
    });
    this.setState((state) => {
      return {
        counter: state.counter + 1,
      };
    });
    this.setState((state) => {
      return {
        counter: state.counter + 1,
      };
    });
    // counter结果为3
  }
​
  render() {
    console.log("render函数被执行");
    const { message, counter } = this.state;
    return (
      <div>
        <h2>message:{message}</h2>
        <button onClick={(e) => this.changeText()}>修改文本</button>
        <h2>当前计数：{counter}</h2>
        <button onClick={(e) => this.increment()}>counter+1</button>
​
        <Hello message={message} />
      </div>
    );
  }
}
​
export default App;

setState一定是异步吗？

在React18以前

其实分成两种情况：

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

验证一：在setTimeout中的更新：

证二：原生DOM事件：

在React18以后

• 在React18之后，默认所有的操作都被放到了批处理中（异步处理）

• 如果希望代码可以同步会拿到，则需要执行 特殊的flushSync操作：

  hangeText() {
    setTimeout(() => {
      // 在React18之前，setTimeout中setState操作，是同步操作
      // 在React18之后，setTimeout中setState都是异步操作(批处理)
​
      // React18之后的同步更新方法flushSync
      flushSync(() => {
        this.setState({ message: "你好啊，洛依尘" });
      });
      console.log(this.state.message);
    }, 0);
  }

React性能优化

React的更新机制

React在props或state发生改变时，会调用React的render方法，会创建一颗不同的树。

• React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI:

  • 如果-棵树参考另外-棵树进行完全比较更新,那么即使是最先进的算法，该算法的复杂程度为0(n3),其中n是树中元素的数量;
  • qrfia.dlsi.ua.es/m/algorithm… bille.pdf;
  • 如果在React中使用了该算法，那么展示1000个元素所需要执行的计算量将在十亿的量级范围;
  • 这个开销太过昂贵了，React的更新性能会变得非常低效;
  • 于是，React对这个算法进行了优化，将其优化成了O(n),如何优化的呢?
  • 同层节点之间相互比较,不会垮节点比较;
  • 不同类型的节点，产生不同的树结构;
  • 开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定;

Keys的优化

• 方法一：在最后的位置插入数据

  • 这种情况，有无key意义不大

• 方法二：在前面插入数据

  • 这种做法，在没有key的情况下，所有的子元素都要进行修改

• 当子元素拥有key时，React使用key来匹配原有树上的子元素以及最新树上的子元素

• key的注意事项

  • key应该是唯一 的;
  • key不要使用随机数(随机数在下一 次render时， 会重新生成一 个数字) ;
  • 使用index作为key,对性能是没有优化的;

render函数SCU优化

• 我们可以思考一下，在以后的开发中，我们只要是修改了App中的数据，所有的组件都需要重新render,进行diff算法，性能必然是很低的:

  • 事实上，很多的组件没有必须要重新render;
  • 它们调用render应该有一个前提，就是依赖的数据(state、props)发生改变时，再调用自己的render方法;

• 如何来控制render方法是否被调用呢?

  • 通过shouldComponentUpdate方法即可,但是这样所有的改变都不会去调用render函数了

shouldComponentUpdate

• React给我们提供了一个生命周期方法shouldComponentUpdate (很多时候，我们简称为SCU) , 这个方法接受参数，并且需要有返回值:

• 该方法有两个参数:

  • 参数一: nextProps修改之后，最新的props属性
  • 参数二: nextState修改之后，最新的state属性

• 该方法返回值是一个boolean类型:

  • 返回值为true,那么就需要调用render方法;
  • 返回值为false,那么久不需要调用render方法;
  • 默认返回的是true,也就是只要state发生改变,就会调用render方法;

• 比如我们在App中增加一个message属性:

  • jsx中并没有依赖这个message,那么它的改变不应该引|起重新渲染;
  • 但是因为render监听到state的改变，就会重新render, 所以最后render方法还是被重新调用了;

App.jsx

 shouldComponentUpdate(nextProps, newState) {
    // App进行性能优化的点
    if (
      this.state.message !== newState.message ||
      this.state.counter !== newState.counter
    ) {
      return true;
    }
    return false;
  }
​
  
  render() {
    const { message, counter } = this.state;
    console.log("App render");
    return (
      <div>
        <h2>
          App-{message}-{counter}
        </h2>
        <button onClick={(e) => this.changeText()}>修改文本</button>
        <button onClick={(e) => this.increment()}>counter+1</button>
        <Home message={message} />
        <Recommend counter={counter} />
      </div>
    );
  }

Home.jsx

shouldComponentUpdate(newProps, nextState) {
    // 自己对比state是否发生改变：this.state和nextState
    if (this.props.message !== newProps.message) {
      return true;
    }
    return false;
  }
​
  render() {
    console.log("Home render");
    return (
      <div>
        <h2>Home Page:{this.props.message}</h2>
      </div>
    );
  }

PureComponent和memo

• 如果所有的类，我们都需要手动来实现shouldComponentUpdate,那么会给我们开发者增加非常多的工作量。

  • 我们来设想一下shouldComponentUpdate中的各种判断的目的是什么?
  • props或者state中的数据是否发生了改变,来决定shouldComponentUpdate返回true或者false;

• 事实上React已经考虑到了这一点，所以React已经默认帮我们实现好了，如何实现呢?

  • 将class继承自PureComponent.

  

• class继承自PureComponent后该class就会自动判断render函数是否需要渲染

import React, { PureComponent } from "react";
export class App extends PureComponent {
}

但是函数组件怎么处理render函数渲染问题

• 引入react中的memo方法

// 函数组件怎么处理render函数渲染问题
import { memo } from "react";
​
const Profile = memo(function Profile(props) {
  console.log("Profile render");
  return <h2>Profile:{props.message}</h2>;
});
​
export default Profile;

数据不可变的力量

不可变数据的力量（The Power Of Not Mutating Data）代表的就是不可变数据设计原则。

React的生命周期中每次调用ComponentShouldUpdate()会获取props/state，利用现有的数据跟将要改变的数据进行比较,更新变化的数据并进行渲染。此举最大限度减少不必要的更新，达到性能优化的目的。因此，使用时不建议直接更改state里面的数据，而是通过setState去改变参数。

案例：

import React, { PureComponent } from "react";
​
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      books: [
        { name: "你不知道的JS", price: 99, count: 1 },
        { name: "你不知道的Java", price: 69, count: 1 },
        { name: "你不知道的Python", price: 49, count: 3 },
        { name: "你不知道的Go", price: 79, count: 2 },
      ],
      friend: {
        name: "kobe",
      },
    };
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   shallowEqual(nextProps, this.props);
  //   shallowEqual(nextState, this.state);
  // }
​
  addNewBook() {
    const newBook = { name: "高级JS程序设计", price: 78, count: 3 };
    // 1.直接修改原有的state,重新设置一遍
    // 在PureComponent是不能引入重现渲染（re-render）
    this.state.books.push(newBook);
​
    // 2.赋值一份books，在新books中修改，设置新的books
    const books = [...this.state.books];
    books.push(newBook);
​
    this.setState({ books: books });
  }
​
  addBookCount(index) {
    const books = [...this.state.books];
    books[index].count++;
    this.setState({
      books,
    });
  }
​
  render() {
    const { books } = this.state;
    return (
      <div>
        <h2>数据展示</h2>
        <ul>
          {books.map((item, index) => {
            return (
              <li key={index}>
                <span>
                  name:{item.name}-price:{item.price}-count:{item.count}
                </span>
                <button onClick={(e) => this.addBookCount(index)}>+1</button>
              </li>
            );
          })}
        </ul>
        <button onClick={(e) => this.addNewBook()}>添加新书籍</button>
      </div>
    );
  }
}
​
export default App;

如果直接修改原有的state,重新设置一遍在PureComponent是不能引入重现渲染

因为在PureComponent源码中会先判断新的state和旧的state是否为同一地址，再去判断state里面的东西是否一致，而我们再直接进行push的时候，不会改变原函数的首地址，因此首地址相同。那么books就等于this.state.books，被判定为数据没有发生改变，也就不会执行更新操作了。

PureComponent的检查是否要更新render函数的源码

• shallowequal只是做了一层浅层比较

获取DOM方式refs

如果需要对DOM进行操作可以使用ref

当前有三种ref获取DOM的方式

• 第一种，字符串获取 使用时通过 this.refs.传入的字符串获取对应元素
• 第二种，传入对象获取 通过 React.createRef() 创建对象 使用时获取创建的对象，其中有一个current属性就是对应的元素
• 第三种，传入函数获取 该函数会在DOM被挂载时进行回调，函数会传入一个元素对象，可以自己保存 使用时，直接使用保存的元素对象即可

import React, { PureComponent, createRef } from "react";
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.titleRef = createRef();
    this.titleEl = null;
  }
  getNativeDOM() {
    // 1.在React元素上绑定一个ref字符串
    console.log(this.refs.lyc);
​
    // 2.提前创建好ref对象，createRef()，将创建出来的对象绑定到元素上
    console.log(this.titleRef.current);
​
    // 3.传入一个回调函数，在对应的元素被渲染之后，回调函数被执行，并且将元素传入
    console.log(this.titleEl);
  }
  render() {
    return (
      <div>
        <h2 ref="lyc">Hello 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;

根据官方更新的进程，第一种字符串方式可能在未来被移除，所以这边优先推荐使用第二、第三种方式来获取要操作的DOM

ref类型的值根据节点的类型而有所不同

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性
• 不能在函数组件上使用 ref 属性，因为他们没有实例

因此，可以在一个组件内通过ref调用另外一个组件的方法（挺像vue中this.$ref来调用其他组件中方法的）

import React, { PureComponent, createRef } from "react";
​
class HelloWorld extends PureComponent {
  test() {
    console.log("子组件的方法");
  }
  render() {
    return <h2>Hello World</h2>;
  }
}
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.hwRef = createRef();
  }
  getComponent() {
    console.log(this.hwRef.current);
    this.hwRef.current.test();
  }
  render() {
    return (
      <div>
        <HelloWorld ref={this.hwRef} />
        <button onClick={(e) => this.getComponent()}>获取组件实例</button>
      </div>
    );
  }
}
​
export default App;

如果是ref想要绑定函数组件内部元素呢？

• 那就必须要用forwardRef方法来包裹函数组件，并且转发绑定ref

import React, { PureComponent, createRef, forwardRef } from "react";
​
const HelloWorld = forwardRef(function (props, ref) {
  // 获取传递过来的props和ref，并且将ref绑定在想要的的DOM上
  return (
    <div>
      <h2 ref={ref}>Hello World</h2>
      <p>哈哈哈</p>
    </div>
  );
});
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.hwRef = createRef();
  }
  getComponent() {
    console.log(this.hwRef.current);
  }
  render() {
    return (
      <div>
        <HelloWorld ref={this.hwRef} />
        <button onClick={(e) => this.getComponent()}>获取组件实例</button>
      </div>
    );
  }
}
​
export default App;

受控和非受控组件

受控组件

React中表单元素交由框架内部的state中处理

而在React中，可变状态(mutable state)通常保存在组件的state属性中，并且只能通过使用setState()来更新。

• 我们将两者结合起来，使React的state成为 “唯一数据源” ;
• 渲染表单的React组件还控制着用户输入过程中表单发生的操作;
• 被React以这种方式控制取值的表单输入元素就叫做“ 受控组件”;

import React, { PureComponent } from "react";
​
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "123",
    };
  }
  inputChange(e) {
    console.log("inputChange:", e.target.value);
    this.setState({
      username: e.target.value,
    });
  }
  render() {
    const { username } = this.state;
    return (
      <div>
        {/* 受控组件 value绑定state中，无法改变内容，只能通过onClick来改变state */}
        <input
          type="text"
          value={username}
          onChange={(e) => this.inputChange(e)}
        />
        <h2>username:{username}</h2>
      </div>
    );
  }
}
​
export default App;

在这个用例中，先通过onChange监听获取input中的value，再将value赋给state，state发生改变后，主动再将state的数据重新赋给一次input。

这种通过state作为组件唯一数据源并且时刻保持state和value双向绑定的组件，就是受控组件，该案例是受控组件的一种基本使用形式。

注意：这种双向绑定并非双向数据流，而是一种单向数据流

非受控组件

表单数据交由DOM节点来处理

官方不建议使用非受控组件来处理表单数据

一般由ref方式来获取表单数据，例如：

import React, { PureComponent } from "react";
​
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "123",
    };
  }
  inputChange(e) {
    console.log("inputChange:", e.target.value);
    this.setState({
      username: e.target.value,
    });
  }
  render() {
    const { username } = this.state;
    return (
      <div>
        {/* 非受控组件 */}
        <input type="text" onChange={(e) => this.inputChange(e)} />
        <h2>username:{username}</h2>
      </div>
    );
  }
}
​
export default App;

此处通过this.[refObject].current.value来获取表单中的数据。

表单组件的使用

• 在 HTML 中，表单元素（如<input / >、 <textarea/ > 和 <select/ >）之类的表单元素通常自己维护 state，并根据用户输入进行更新
• 由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。
• 由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新

import React, { PureComponent } from "react";
​
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "123",
      password: "",
    };
  }
  handleSubmitClick(event) {
    // 1.阻止默认的行为
    event.preventDefault();
    // 2.获取到所有的表单数据，对数据进行组件
    console.log(this.state.username, this.state.password);
    // 3.以网络请求的方式，将数据传递给服务器
  }
​
  handleInputChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }
​
  render() {
    const { username, password } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <label htmlFor="username">
            用户：
            <input
              type="text"
              id="username"
              name="username"
              value={username}
              onChange={(e) => this.handleInputChange(e)}
            />
          </label>
          <label htmlFor="password">
            密码：
            <input
              type="text"
              id="password"
              name="password"
              value={password}
              onChange={(e) => this.handleInputChange(e)}
            />
          </label>
          <button type="submit">提交</button>
        </form>
      </div>
    );
  }
}
​
export default App;

checkbox的单选和多选

  // 监听单选改变
  handleAgreeChange(event) {
    console.log(event.target.checked);
    this.setState({
      isAgree: event.target.checked,
    });
  }
​
  // 监听多选改变
  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies];
    hobbies[index].isChecked = event.target.checked;
    this.setState({ hobbies });
  }
​
​
​
          {/* 2.checkbox单选 */}
          <label htmlFor="agree">
            <input
              id="agree"
              type="checkbox"
              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)}
                  />
                  <span>{item.text}</span>
                </label>
              );
            })}
          </div>

Select的单选和多选

  // 监听多选选择框的改变
  handleFruitChange(event) {
    const options = Array.from(event.target.selectedOptions);
    const values = options.map((item) => item.value);
    console.log(values);
    this.setState({
      fruit: values,
    });
​
    // 额外补充：Array.from(可迭代对象)
    // Array.from(arguments);
    const values2 = Array.from(
      event.target.selectedOptions,
      (item) => item.value
    );  
    console.log(values2);
  }
​
​
          {/* 4.select元素 */}
          <select
            name=""
            id=""
            value={fruit}
            onChange={(e) => this.handleFruitChange(e)}
            multiple
          >
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
          </select>

非受控组件

◼ React推荐大多数情况下使用 受控组件 来处理表单数据：

• 一个受控组件中，表单数据是由 React 组件来管理的；
• 另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理；

◼ 如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。

• 我们来进行一个简单的演练：
• 使用ref来获取input元素；

◼ 在非受控组件中通常使用defaultValue来设置默认值；

◼ 同样，< input type="checkbox"> 和 < input type="radio"> 支持 defaultChecked，< select> 和 < textarea> 支持 defaultValue。

  constructor() {
    super();
    this.state = {
      intro: "哈哈哈",
    };
    this.introRef = createRef();
  }
​
​
​
          {/* 5.非受控组件 */}
          <input type="text" defaultValue={intro} ref={this.introRef} />

React的高阶组件

什么是高阶组件，高阶组件的定义？

1.高阶组件本身不是一个组件,而是一个函数 2.特点:

• 接受一个组件作为它的参数
• 返回一个新的组件

高阶组件的调用过程类似于这样：

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

高阶函数的编写过程类似于这样：

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

组件的名称问题：

• 在ES6中，类表达式中类名是可以省略的；
• 组件的名称都可以通过displayName来修改；

注意：

高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式

• 高阶组件在一些React第三方库中非常常见：

  • 比如redux中的connect；
  • 比如react-router中的withRouter；

高阶组件的应用

props的增强

• 不修改原有代码的情况下，添加新的props
• 利用高阶组件来共享Context

enhanced_props.js HOC高阶组件

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

App.jsx

import React, { Profiler, PureComponent } from "react";
​
import enhancedUserInfo from "./hoc/enhanced_props";
import About from "./pages/About";
​
const Home = enhancedUserInfo(function (props) {
  return (
    <h2>
      Home:{props.name}-{props.level}-{props.banners}
    </h2>
  );
});
const Profile = enhancedUserInfo(function (props) {
  return (
    <h2>
      Profile:{props.name}-{props.level}
    </h2>
  );
});
​
const HelloFriend = enhancedUserInfo(function (props) {
  return (
    <h2>
      HelloFriend:{props.name}-{props.level}
    </h2>
  );
});
​
export class App extends PureComponent {
  render() {
    return (
      <div>
        <Home banners={["轮播图1", "轮播图2"]} />
        <Profile />
        <HelloFriend />
        <About />
      </div>
    );
  }
}
​
export default App;

渲染判断鉴权

• 在开发中，我们可能遇到这样的场景：

  • 某些页面是必须用户登录成功才能进行进入；
  • 如果用户没有登录成功，那么直接跳转到登录页面；

• 这个时候，我们就可以使用高阶组件来完成鉴权操作：

login_auth.js

function loginAuth(OriginComponent) {
  return props => {
    // 从localStorage中获取token
    const token = localStorage.getItem("token")
    if (token) {
      return <OriginComponent {...props} />
    } else {
      return <h2>请先登录，再进行操作</h2>
    }
  }
}
​
export default loginAuth

Cart.jsx

如果需要鉴权的组件就用loginAuth包裹一下

import React, { PureComponent } from "react";
import loginAuth from "../hoc/login-auth";
​
export class Cart extends PureComponent {
  render() {
    return <h1>Cart</h1>;
  }
}
​
export default loginAuth(Cart);

App.jsx

import React, { PureComponent } from "react";
import Cart from "./pages/Cart";
​
export class App extends PureComponent {
  loginClick() {
    localStorage.setItem("token", "lyc");
​
    // 强制刷新
    this.forceUpdate();
  }
​
  render() {
    return (
      <div>
        App
        <button onClick={(e) => this.loginClick()}>登录</button>
        <Cart />
      </div>
    );
  }
}
​
export default App;

生命周期劫持

• 我们也可以利用高阶函数来劫持生命周期，在生命周期中完成自己的逻辑：

log_render_time.js

import { PureComponent } from "react";
​
function logRenderTime(OriginComponent) {
  // 匿名类
  return class NewComponent extends PureComponent {
    // 已废弃的生命周期，仅作测试使用
    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 {...this.props} />
    }
  }
}
export default logRenderTime

Detail.jsx

如果需要测试渲染时间的组件就用logRenderTime包裹一下

import React, { PureComponent } from "react";
import logRenderTime from "../hoc/log_render_time";
​
export class Detail extends PureComponent {
  render() {
    return (
      <div>
        <h2>Detail Page</h2>
        <ul>
          <li>数据列表1</li>
          <li>数据列表2</li>
          <li>数据列表3</li>
        </ul>
      </div>
    );
  }
}
​
export default logRenderTime(Detail);

高阶函数的意义

• 我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。

• 其实早期的React有提供组件之间的一种复用方式是mixin，目前已经不再建议使用：

  • Mixin 可能会相互依赖，相互耦合，不利于代码维护；
  • 不同的Mixin中的方法可能会相互冲突；
  • Mixin非常多时，组件处理起来会比较麻烦，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性；

• 当然，HOC也有自己的一些缺陷：

  • HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难；
  • HOC可以劫持props，在不遵守约定的情况下也可能造成冲突；

• Hooks的出现，是开创性的，它解决了很多React之前的存在的问题

  • 比如this指向问题、比如hoc的嵌套复杂度问题等等；

• 其实我们可以发现很多React封装的高阶函数本质上也是高阶组件

  • 例如支持函数组件灵活渲染的memo高阶函数和ref的转发的orwardRef高阶函数

Portals和Fragment

Portals

◼ 某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元素上的）。

◼ Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：

• 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
• 第二个参数（container）是一个 DOM 元素；

◼ 通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：

◼ 然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的

    return (
      <div className="app">
        <h1>App H1</h1>
        {createPortal(<h2>App H2</h2>, document.querySelector("#lyc"))}
      </div>
    );

Modal组件案例

• 比如说，我们准备开发一个Modal组件，它可以将它的子组件渲染到屏幕的中间位置：

  • 步骤一：修改index.html添加新的节点
  • 步骤二：编写这个节点的样式
  • 步骤三：编写组件代码

    <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";
​
export class Modal extends PureComponent {
  render() {
    return createPortal(this.props.children, document.querySelector("#modal"));
  }
}
​
export default Modal;

Fragment

◼ 在之前的开发中，我们总是在一个组件中返回内容时包裹一个div元素

◼ 我们又希望可以不渲染这样一个div应该如何操作呢？

• 使用Fragment
• Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点；

◼ React还提供了Fragment的短语法：

• 它看起来像空标签 <> </>；
• 但是，如果我们需要在Fragment中添加key，那么就不能使用短语法

import React, { PureComponent, Fragment } from "react";
​
export class App extends PureComponent {
  constructor() {
    super();
​
    this.state = {
      sections: [
        { title: "哈哈哈", content: "我是内容，哈哈哈" },
        { title: "嘿嘿嘿", content: "我是内容，嘿嘿嘿" },
        { title: "呵呵呵", content: "我是内容，呵呵呵" },
        { title: "嘻嘻嘻", content: "我是内容，嘻嘻嘻" },
      ],
    };
  }
  render() {
    const { sections } = this.state;
    return (
      <div>
        <>
          <h2>我的App的标题</h2>
          <p>我是App的内容,哈哈哈</p>
          <hr />
          {sections.map((item) => {
            return (
              <Fragment key={item.title}>
                <h2>{item.title}</h2>
                <p>{item.content}</p>
              </Fragment>
            );
          })}
        </>
      </div>
    );
  }
}
​
export default App;

StrictMode严格模式

◼ StrictMode 是一个用来突出显示应用程序中潜在问题的工具：

• 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI；
• 它为其后代元素触发额外的检查和警告；
• 严格模式检查仅在开发模式下运行；它们不会影响生产构建；

◼ 可以为应用程序的任何部分启用严格模式：

• 不会对 Header 和 Footer 组件运行严格模式检查；
• 但是，ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查；

      <div>
        <StrictMode>
          <Home />
        </StrictMode>
        <Profile />
      </div>

严格模式检查的是什么？

0. 识别不安全的生命周期：

1. 使用过时的ref API

2. 检查意外的副作用

   • 这个组件的constructor会被调用两次；
   • 这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用；
   • 在生产环境中，是不会被调用两次的；

3. 使用废弃的findDOMNode方法

   • 在之前的React API中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了，可以自行学习演练一下

4. 检测过时的context API

   • 早期的Context是通过static属性声明Context对象属性，通过getChildContext返回Context对象等方式来使用Context的；
   • 目前这种方式已经不推荐使用，大家可以自行学习了解一下它的用法；