React(3-2)：组件进阶

ObjectKaz Lv4
  2021-05-03 06:05:40 2021-05-03 06:05 创建   2021-05-04 15:21:07 2021-05-04 15:21 更新      1.5k 字  6 分钟  

组件进阶

高阶组件

前面提到的组件，都是将组件变成 UI, 而这里将会提到令一种类型的组件：高阶组件(HOC)。

高阶组件就是传入组件，返回组件的函数：

1
const EnhancedComponent = higherOrderComponent(WrappedComponent);

高阶组件可以做很多事情：

  • 抽取重复代码
  • 条件渲染
  • 捕获拦截生命周期

例如，我们可以使用高阶组件来监控 props 的更新：[1]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function withLogProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return LogProps;
}

通常，高级组件的命名规范是 withXxxx。

动态组件

有时候，开发者希望在运行时来确定组件的类型，例如：

1
2
3
const components = {'eat': someComponent1, 'drink': someComponent2};
const type = 'eat';
const el = <components[type] />;

但这种写法是不允许的。因为React 只支持

  • 大写开头的变量
  • 带点语法的组件： MyComponents.DatePicker

如果需要运行时确定，则可以再定义一个大写开头的变量：

1
2
3
4
const components = {'eat': someComponent1, 'drink': someComponent2};
const type = 'eat';
const Com = components[type]
const el = <Com />;

如果你渲染的不是自定义组件，而是 html 元素，则可以只传一个字符串；

1
2
const Com = 'a'
const el = <Com>123456</Com>; //渲染成 `a`

再强调一下，变量名一定要首字母大写,否则 React 会将它解析成 html 元素。

引用

介绍

有时候，React 提供的常用操作可能并不能完成所有事情。例如：

  • audio 和 video 的操作
  • canvas 的绘图
  • 一些原生的第三方库

这时候你可能需要引用原始的 DOM了。

创建引用

通常使用 React.createRef 来创建一个引用：

1
2
3
4
5
6
7
8
9
class MyCanvas extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <canvas ref={this.myRef} />;
  }
}

除了使用 React.createRef,还可以使用回调函数来创建引用：

1
2
3
4
5
6
7
8
9
10
11
class MyCanvas extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    let setRef = element => {
      this.myRef = element;
    };
    return <canvas ref={setRef} />;
  }
}

使用回调函数得到的引用就是组件实例或者 DOM 对象，无需通过 .current 来访问。

1
this.myRef.getContext("2d");

访问引用

当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。[2]

1
const node = this.myRef.current;

ref 的值根据节点的类型而有所不同：[2:1]

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

下面的例子，我们创建了一个引用，来初始化一个 canvas：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Draw extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
    this.item = React.createRef();

    // 防止 this 指向问题
    this.draw = this.draw.bind(this);
  }

  draw() {
    var canvas = this.item.current;
    var context = canvas.getContext("2d");

    // 绘制一个加载进度条
    var sin = Math.sin(Math.PI / 6);
    var cos = Math.cos(Math.PI / 6);
    context.translate(100, 100);
    var c = 0;
    for (var i = 0; i <= 12; i++) {
      c = Math.floor((255 / 12) * i);
      context.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
      context.fillRect(0, 0, 100, 10);
      context.transform(cos, sin, -sin, cos, 0, 0);
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.draw}>绘图</button>
        <canvas height="200px" ref={this.item} />
      </div>
    );
  }
}

转发引用

有时候，我希望通过 ref 属性获取子组件的某个 DOM 元素，例如上面 Draw 组件，我希望获取里面 canvas 的DOM。

这时候，我们就需要使用 引用转发 了。

我们通常使用 React.forwardRef 来转发引用。

先来看看函数组件。

1
2
3
4
5
6
const Draw = React.forwardRef((props, ref) =>{
    return <canvas height="200px" ref={ref} />
})

const ref = React.createRef();
<Draw ref={ref} />;

这样，通过 ref 便可以直接拿到子组件中 canvas的DOM对象了。

但有人可能有疑问：不是不能在函数组件上使用 ref 属性嘛？

实际上，引用转发将组件的引用转发给了组件内的一个元素，这样访问函数组件的 ref 就成了访问组件内元素的 ref 了。

高阶组件的转发

对一个高阶组件使用 ref 有时候会出现问题，我们来看一个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 定义高阶组件
function logProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return LogProps;
}

// 使用高阶组件
let setRef = element => {
      console.log(element)
};

const LoggedLink = logProps('a'); // 组件对象为字符串时，表示的是 html 元素

const el = (<LoggedLink ref="setRef" href="https://www.baidu.com">链接</LoggedLink>)

我们运行这个案例，发现浏览器输出的并不是 a 链接的引用，而是高级组件的引用：

这可能并不是我们想要的。我们希望高阶组件是透明的。

所以，我们可以使用转发技术来将高阶组件的 ref 进行转发。

需要注意一点： ref 不是 prop 属性。就像 key 一样，其被 React 进行了特殊处理。如果你对 HOC 添加 ref ，该 ref 将引用最外层的容器组件，而不是被包裹的组件。[1:1]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // 将自定义的 prop 属性 `forwardedRef` 定义为 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

    // 将 ref 转发到 `forwardedRef`
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

  1. Refs 转发 ↩︎ ↩︎

  2. Refs & Dom ↩︎ ↩︎

  • 标题: React(3-2)：组件进阶
  • 作者: ObjectKaz
  • 创建于: 2021-05-03 06:05:40
  • 更新于: 2021-05-04 15:21:07
  • 链接: https://www.objectkaz.cn/909bbe96590c.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
此页目录
React(3-2)：组件进阶
  1. 组件进阶
    1. 高阶组件
    2. 动态组件
    3. 引用