React - “不要在组件的渲染方法中使用 HOC”是什么意思。访问组件定义之外的 HOC。'？

Question

我正在学习 HOC 并继续阅读上面的引文，但我不明白它的意思。如果我的 HOC 向我的消费组件添加了一个方法，我可以像这样在渲染方法中使用该方法吗？如果不是，我将如何做我在这里想做的事情：

import React, { Component } from 'react';
import { withMyHOC } from '../with_my_component'

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { methodFromHOC }= this.props;
    const result = methodFromHOC(someArgument);

    return (
      <div >
        {result}
      </div>
    )
  }
}

export default withMyHOC(MyComponent );

Answer 1

当您说不要在 render 方法中使用 HOC 时，这意味着您不应该在另一个组件的 render 方法中创建由 HOC 包装的组件的实例。例如，如果您有一个使用 MyComponent 的应用程序组件，则它不应该如下所示

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { methodFromHOC }= this.props;
    const result = methodFromHOC(someArgument);

    return (
      <div >
        {result}
      </div>
    )
  }
}

export default MyComponent;

import { withMyHOC } from '../with_my_component'
export default class App extends React.Component {
   render() {
      const Wrap = withMyHOC(MyComponent);
      return (
        <div>
            {/* Other Code */}
            <Wrap />
        </div>
      )
   }
}

为什么你不应该像上面那样使用它，因为每次调用 render 方法时，MyComponent都会创建一个由 HOC 调用包装的新实例Wrap，因此每次它都会被再次安装，而不是按照自然生命周期或 React 进行。

但是，如果您的 HOC 将函数作为 props 传递，则可以在渲染中使用它，只要它不会导致再次重新渲染，否则将导致无限循环。

另外，最好记住直接在渲染中调用的函数，以避免一次又一次的计算

CodeSandbox 演示