В чем разница между компонентом высшего порядка (HOC) и наследованием в собственном компоненте React - PullRequest
Новая
       7

В чем разница между компонентом высшего порядка (HOC) и наследованием в собственном компоненте React

0 голосов
/ 09 ноября 2018

Я новичок, чтобы реагировать нативно из .net background,

Здесь вопрос состоит в том, как HOC отличается от наследования в концепции OOPS наличием родительского класса с базовыми свойствами и дочерним, который расширяет Base и использует состояние, свойства и базовые методы из базового класса.

Какой наилучший способ достижения иерархических отношений Parent-> Child -> GrandChild в React Components.?

Например:

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

Это правильный способ реализации абстракции в реагировать на нативный скажем, у родительского класса будут общие свойства состояния, а потомок наследует родительское состояние и имеет свои собственные свойства.

Как наследовать состояние и как обновить значения в состояние в этом случае.?

1 Ответ

0 голосов
/ 09 ноября 2018

React продвигает состав в качестве альтернативы наследованию классов. Компоненты были разработаны, чтобы быть эффективно составленными. Hooks API дополняет функциональные компоненты функциями, которые ранее требовали использования компонентов класса.

Это не значит, что наследование не разрешено. Проблема в том, что существующие шаблоны, такие как компонент высшего порядка, широко используются в экосистеме React и не совместимы с ООП: 

const withBaz = Comp => <Comp baz />

@withBaz
class Bar extends Foo { ... }

Этот подход распространен, но он не подходит для ООП, потому что в этом случае Bar на самом деле уже не класс, а функция стрелки, его нельзя наследовать дальше.

Нет проблем с использованием ООП для сторонних компонентов React, если разработчик контролирует все компоненты в иерархии классов, но это может быть непрактичным, поскольку всегда может возникнуть необходимость задействовать сторонний код, который не OOP удобно. Использование композиции, где она подходит, приводит к более гибкому дизайну.

...