類組件內的功能組件

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} />
        )
    }
}