React原生组件中的高阶组件（HOC）和继承有什么区别

Question

我是 .net 背景下的原生反应，

这里的问题是 HOC 与 OOPS 概念中的继承有何不同，它有一个具有基本属性的父类和一个扩展 Base 并使用 Base 类中的状态、属性和基本方法的子类。

在React Components中实现Parent->Child->GrandChild层次关系的最佳方式是什么？

例如：

Parent.js看起来像

class Parent extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            value: "Parent",
            BaseText: "Inheritance Example"
        }
    }

    onUpdate = () => {
        console.log("Update called at Parent")
    }
}

Child.js 扩展了 Parent.js

class Child extends Parent
{
    constructor(props)
    {
        super(props);
       //this state should inherit the properties of Parent and override only the value property
        this.state = {
            value: "Child",
        }
    }

    onUpdate = () => {
        super.onUpdate();
        console.log("Update called at Child view")
    }



    render()
    {
        return(
            <View>
                <Text> Child View</Text>
            </View>
        )
    }
}

GrandChild.js 扩展自 Child.js

class GrandChild extends Child
    {
        constructor(props)
        {
            super(props);
           //this state should inherit the properties of Child, Parent and properties specific to this
            this.state = {
                value: "GrandChild",
                Name: "Test Grand Child"
            }
        }

        onUpdate = () => {
            super.onUpdate();
            console.log("Update called at Grand Child view")
        }



        render()
        {
            return(
                <View>
                    <Text> Grand Child View</Text>
                </View>
            )
        }
    }

这是在 react native 中实现 抽象 的正确方法吗 说父类将具有公共状态属性，子类继承父状态并具有自己的属性。

在这种情况下如何继承状态以及如何将值更新为状态。？

Answer 1

React 提倡 composition 作为类继承的替代方案。组件被设计为高效组合。 Hooks API 为函数组件增加了以前需要使用类组件的功能。

这并不意味着不允许继承。问题在于现有的模式如高阶组件在 React 生态系统中被广泛使用，并且与 OOP 不兼容：

const withBaz = Comp => <Comp baz />

@withBaz
class Bar extends Foo { ... }

这种方法很常见，但对 OOP 不友好，因为在这种情况下，Bar 实际上不再是类而是箭头函数，它不能被进一步继承。

只要开发人员控制类层次结构中的所有组件，对第一方 React 组件使用 OOP 就没有问题，但这可能不切实际，因为可能总是需要涉及第三方代码OOP 友好。在适合的地方使用组合可以带来更灵活的设计。