React高阶函数模糊点整理

发表于 | 分类于
字数统计: 409
记录自己对于React高阶组件的一些困惑的地方

高阶组件的定义及介绍在 React 官方文档上已经讲的很清楚了，本文主要记录的是自己对于高阶函数理解上经常困惑的地方。这里先再简单回顾一下高阶函数的概念。

高阶组件（HOC）是 react 中对组件逻辑进行重用的高级技术。但高阶组件本身并不是 React API。它只是一种模式，这种模式是由 react 自身的组合性质必然产生的。

高阶组件的作用是将一个组件转换成另一个组件，在转换的过程中，我们就可以为原组件添加一些额外的功能，再将增强后的组件返回。

高阶函数的引入主要就是为了实现组件逻辑的重用。

下面是最简单的一个高阶组件例子：

1
2
3
4
5
6
7
const simpleHoc = WrappedComponent => {
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};
1
2
3
4
5
6
class Usual extends Component {
  render() {
    return <div />;
  }
}
export default simpleHoc(Usual);
1
2
3
4
5
class App extends Component {
  render() {
    return <Usual hello="tom" />;
  }
}

这里的 simpleHoc 就是所谓的高阶组件，它是一个函数，接收一个组件，返回增强后的组件。

每次回顾这段代码的时候我都会对 simpleHoc 里的{…this.props}产生疑惑

{…this.props}的作用是什么？

在 App.js 里渲染的是 simpleHoc(Usual)，即是增强后的组件，但是 simpleHoc 简单点说就是一层中间代理，做一些增强工作，所以需要将已有的 props，继续传递给 WrappedComponent，内部的渲染工作，还是由 WrappedComponent 执行。

0%