码迷,mamicode.com
首页 > 其他好文 > 详细

之间的区别是什么高阶组件(HOC)和继承反应本地组件

时间:2018-11-09 19:17:41      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:rand   should   基本   属性   xtend   扩展   name   cto   this   

我从.net背景,反应新本地

这里的问题是如何的不同于继承与基地哦概念通过父类属性和儿童扩展基础和使用状态,从基类属性和基本方法。

这是最好的方法来实现父- >子- >孙子在反应组件。层次关系吗?

例如:

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

这是正确的方式实现抽象在反应的家乡 说,父类有共同状态属性和子继承了父状态和有自己的属性。

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

之间的区别是什么高阶组件(HOC)和继承反应本地组件

标签:rand   should   基本   属性   xtend   扩展   name   cto   this   

原文地址:http://blog.51cto.com/14021402/2315138

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!