javascript - 类组件中的功能组件

Question

目前我有一个类组件，其中包含在我的 JSX 中充当组件的函数。

示例:

class MyComponent extends React.Component {
    MySubComponent = (props) => {
        if (props.display) {
            return <p>This text is displayed</p>
        }
    }

    render() {
        return (
            <this.MySubComponent display={true} />
        )
    }
}

以这种方式调用组件有什么影响吗？还有这个术语吗？

Answer 1

这会导致为每个 MyComponent 实例创建新的 MySubComponent 函数，这不是非常有效的方法。

将 MySubComponent 作为 MyComponent 方法可能只有两个好处。

其中一个是MySubComponent可以被替换为MyComponent子类中的另一个实现而不需要修改render函数。这不是 React 惯用的，因为它提倡函数式方法而不是 OOP。

另一个是 MySubComponent 可以访问 MyComponent 实例及其属性。这会导致设计问题，因为两个组件紧密耦合。

这些论点在 React 开发中都不是实质性的。除非有特定需求要求 MySubComponent 成为 MyComponent 的一部分，否则不应将前者定义为后者的实例方法。它可能只是:

const MySubComponent = (props) => {
    if (props.display) {
        return <p>This text is displayed</p>
    }
}

class MyComponent extends React.Component {
    render() {
        return (
            <MySubComponent display={true} />
        )
    }
}