javascript - 作为类属性的功能组件是 React 中的反模式吗？

Question

在我处理的现有代码库中，有几个地方有一个功能组件作为 React 组件的类属性，以避免将状态、道具和回调传递给子组件。下面是一个示例，或者在CodeSandbox中。

import React from "react";
import "./styles.css";

class App extends React.Component {
  state = {
    counter: 0
  };

  ClassPropComponent = () => {
    return (
      <>
        <div>Count is {this.state.counter}</div>
        <button
          onClick={() => {
            this.setState({
              counter: this.state.counter + 1
            });
          }}
        >
          +
        </button>
      </>
    );
  };

  render() {
    return (
      <div className="App">
        <this.ClassPropComponent />
      </div>
    );
  }
}

export default App;

这种模式有什么本质上的错误吗？

1. 我相信这将为ClassPropComponent. App不过，我想因为它是一个功能组件，所以不会有太多额外的开销（如果有的话）。

2. 就在 中使用钩子而言，是否有任何危险或陷阱ClassPropComponent？据我所知，它没有违反任何Hooks 规则。

3. 与仅返回一些 JSX 的类上的函数相比，这种模式有什么优势吗？似乎唯一的区别是它被用作组件而不是函数调用（例如<this.ClassPropComponent />vs this.renderComponent()）？
   
   
   

（下一部分部分离题，可能更适合另一个问题）

当我们有一个作为类属性的组件渲染另一个作为类属性的组件时，会发生另一个有趣的边缘情况。我们的代码库在 Typescript 中，如果我们使用ts-loaderthen 通过 babel 运行结果，一切正常。如果我们使用@babel/preset-typescriptand @babel/preset-react（使用 @babel/plugin-proposal-class-properties），this在另一个类 prop 组件渲染的类 prop 组件中是未定义的。

标签： javascriptreactjsbabeljsanti-patterns