React的render-props模式、高阶组件

Posted 2023-04-12

参考技术A

将可以复用的state和操作state的方法封装到一个独立的组件中,可以提高开发效率

demo: 定义一个获取鼠标位置的组件

定义一个 Position 类式组件

将 Mouse 组件和 Position 组件引入到App组件中

将 Mouse 组件暴露的方法作为 Mouse 标签属性,绑定一个回调函数,回调函数的形参就是暴露出来的数据

将数据传入需要复用的组件内部

定义一个 Picture 函数式组件,实现鼠标跟随效果

在App组件中引入 Picture 组件

函数式组件在使用的时候,不需要以标签的形式渲染,而是使用函数的形式,

数据直接通过函数的参数传入组件内部

使用 props.children() 暴露状态,在复用组件的时候,可以将组件当成子组件使用

推荐 使用children代替render

demo: 修改 Mouse 组件暴露状态的方式

将定义的类式组件和函数式组件引入到App组件

采用包装模式来实现状态的复用,通过包装组件,来增强组件的功能

使用步骤

demo

定义一个高阶组件

在组件内使用高阶组件
引入高阶组件,将需要增强的组件传入高阶组件

在App组件内使用的方法和一般情况一致

使用了高阶组件之后会存在一个问题: 开发者工具会显示两个组件名称一样的组件

因为默认情况下, React会使用组件名称作为组件名称,所有在两个组件都使用了高阶组件的情况下,两个组件的外壳都是其高阶组件的名称

解决方案: 手动设置 displayName
使用步骤

高阶组件具体用法和使用场景

1.什么是高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

2.例子

高阶组件

import React from 'react';

export default function HocHour(Com) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hour: 0,
      };
    }

    componentDidMount() {
      const p = new Promise(this.getFirstHour);
      let num = 0;
      p.then(res => {
        num += res;
        return new Promise(this.getSecondHour);
      }).then(res => {
        num += res;
        this.setState({ hour: num })
      })
    }

    getFirstHour = (resolve, reject) => {
      setTimeout(() => {
        resolve(3);
      }, 1000);
    }

    getSecondHour = (resolve, reject) => {
      setTimeout(() => {
        resolve(5);
      }, 1000);
    }

    render() {
      return <Com {...this.state} />
    }
  }
}

class组件

import React, { Component } from 'react';
import HocHover from './components/HocHour';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number1: 1,
      number2: 2,
    }
  }

  componentDidMount() {
  }

  render() {
    const { hour } = this.props;
    const { number1, number2 } = this.state;

    return <div style={{ padding: '20px' }}>
      <div>{hour}</div>
      <div>{hour + number1}</div>
      <div>{hour + number2}</div>
    </div>
  }
}

export default HocHover(Index);

上面的例子是 在HocHover高阶组件中通过setTimeout模拟接口调用得到的hour值，在Index组件中各个地方使用到。最终在页面两秒后显示如下图：

总结

千山万水总有情，点赞再走行不行！