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

Я новичок, чтобы реагировать на родной фон .net,

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

Каков наилучший способ достижения иерархических отношений 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>
            )
        }
    }

Является ли это правильным способом реализации абстракции в React Native, скажем, родительский класс будет иметь общие свойства состояния, а дочерний элемент наследует родительское состояние и имеет свои собственные свойства.

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


react-native reactjs ecmascript-6 es6-class
person Gowthaman    schedule 09.11.2018    source источник
comment
HOC используют композицию, reactjs.org/docs/composition-vs-inheritance.html . Суть этого аналогична en.wikipedia.org/wiki/Composition_over_inheritance ООП. Каков наилучший способ достижения иерархических отношений Родитель-›Дочерний-›Внук-Дочерний — «лучшего способа» не существует, потому что это зависит от компонентов. Если вы имеете в виду конкретный случай, попробуйте повторно задать вопрос с конкретным примером кода.   -  person Estus Flask    schedule 09.11.2018
comment
Конечно, изменит вопрос с помощью фрагмента кода образца.   -  person Gowthaman    schedule 09.11.2018
comment
У вас есть пример, который был бы более реальным? this.state наследование в дочерних компонентах не будет хорошо работать с композицией компонентов, но я не могу придумать веской причины для этого. Если состояние становится таким сложным, возможно, необходимо использовать управление состоянием (Redux?). Компоненты должны быть реорганизованы, чтобы лучше соответствовать композиции, но я не могу предложить, как это сделать, потому что неясно, что на самом деле делают компоненты. Кстати, onUpdate плохо сочетается с наследованием, потому что это метод экземпляра, а super.onUpdate не будет, это должен быть метод прототипа.   -  person Estus Flask    schedule 09.11.2018
comment
Наследование в JavaScript является прототипом. HOC — составные функции.   -  person evolutionxbox    schedule 09.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

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

const withBaz = Comp => <Comp baz />

@withBaz
class Bar extends Foo { ... }

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

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

person Estus Flask    schedule 09.11.2018
comment
с композицией возможно ли иметь события жизненного цикла.? скажем, у родительского класса есть ComponentDidMount(), рендеринг Child должен вызывать собственный Componentdidmount, а также событие жизненного цикла Parent.? - person Gowthaman; 09.11.2018
comment
componentDidMount будет вызываться в обоих компонентах, если они были смонтированы (то есть успешно отрендерены). - person Estus Flask; 09.11.2018
comment
Последний вопрос. Как я могу добиться наследования государственной собственности в дочернем, чтобы использовать как родительскую, так и собственную государственную собственность? - person Gowthaman; 09.11.2018
comment
Вам, наверное, не нужно. Вот почему я попросил реальный пример. Это может быть выражено идиоматично для React без наследования. Обычно вам нужно использовать наследование только тогда, когда вам нужно расширить функциональность сторонних компонентов класса, которые вы не можете изменить напрямую. - person Estus Flask; 09.11.2018
comment
Скажем, например, мы создаем форму ввода данных (включая элементы управления вводом, сетки и т. д.) и форму списка (включает элемент управления поиском и сетку), есть некоторые общие методы, такие как экспорт сетки в Excel, выборка записей для этой сетки, свойства состояния, такие как FormName, GridName. Поэтому я хочу, чтобы эти общие методы и свойства состояния были частью AbstractForm.js, это будет действовать как родитель как для DataentryForm.js (подробности о полях ввода, специфичные для этого дочернего элемента), так и для ListForm.js (подробности о поле поиска относится именно к этому ребенку). - person Gowthaman; 09.11.2018
comment
есть некоторые распространенные методы, такие как экспорт сетки в Excel, выборка записей для этой сетки — возможно, нет необходимости использовать их как методы класса, их можно извлечь в отдельные функции. В зависимости от конкретного случая, общая функциональность, зависящая от состояния, может быть извлечена в общие функции или отделена от компонентов (Redux и т. д.) или управляться общим родительским элементом (см. reactjs.org/docs/lifting-state-up.html). - person Estus Flask; 09.11.2018