[译]React ES6 class constructor super()

terasum 发布于2019-08-20 13:50 / 1643人阅读

摘要：会自行设置在组件的其他地方以供访问。将传入的作用是可以使你在内访问它完善后如果你只是想在别处访问它，是不必传入的，因为会自动为你设置好

原博文地址: http://cheng.logdown.com/posts/2016/03/26/683329

当我们像下面这样使用React的ES6 class语法创建一个组件的时候：

class MyClass extends React.component {
    constructor(){
        super()
    }
}

不禁会提出两个问题：

在constructor里面调用super是否是必要的？

super与super(props)的区别？

解答一：

仅当存在constructor的时候必须调用super，如果没有，则不用

如果在你声明的组件中存在constructor，则必须要加super，举个栗子：

class MyClass extends React.component {
    render(){
        return Hello { this.props.world };
    }
}

这段代码完美无误，你不需要为之去调用super，然而，如果在你的代码中存在consturctor，那你必须调用：

class MyClass extends React.component {
    constructor(){
        console.log(this) //Error: "this" is not allowed before super()

    }
}

之所以会报错，是因为若不执行super，则this无法初始化。

你也许会抱着侥幸心理猜测：那我直接写个空的constructor就得了呗~，然而，在ES6中的class语法中，只要你的class是子类，那必须得调用super，换句话说，有constructor就得有super（当然，子类也可以没有constructor）

解答二

仅当你想在constructor内使用props才将props传入super。React会自行props设置在组件的其他地方（以供访问）。
将props传入super的作用是可以使你在constructor内访问它：

class MyClass extends React.component{
    constructor(props){
        super();
        console.log(this.props); // this.props is undefined

    }
}

完善后：

class MyClass extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

如果你只是想在别处访问它，是不必传入props的，因为React会自动为你设置好：

class MyClass extends React.component{
    render(){
        // There is no need to call `super(props)` or even having a constructor 

        // this.props is automatically set for you by React 

        // not just in render but another where else other than the constructor

        console.log(this.props);  // it works!

    }
}

云服务器私有云 es6中的class es6class constructor super

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81269.html

[译]React ES6 class constructor super()

摘要：当我们在写时候会用到中的语法比较常见的情况如下这里有两个问题是否有必要在中调用函数调用和有何区别解答只有当你有一个时候调用才是必须的看代码上述代码完全符合规定所以你其实并没有必要去为你创建的每个调用话分两头如果你的代码中有你就必须调用出现上当我们在写React时候会用到ES6中的class语法 ,比较常见的情况如下： class MyClass extends React.Comp...

justjavac 2019-08-22 10:53 评论0 收藏0
[译]在 React.js 中使用 ES6+

摘要：如果是在中，我们也许只能这样做但是，在中，我们不仅可以在对象字面量属性的定义中使用表达式，还有使用使用字符串模板析构扩展运算符我们在编写组件的过程中，经常遇到要从父组件要把自己的很多属性多传给子组件的情况。原文地址： http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ showImg(http://7xiyp1.com1.z0.g...

Enlightenment 2019-08-21 10:40 评论0 收藏0
[译] React 组件中绑定回调

摘要：好的方案在构造函数中仍然使用，现在我们只要绕过每次渲染都要生成新的函数的问题就可以了。我们可以通过只在构造函数中绑定回调的上下问来解决这个问题，因为构造函数只会调用一次，而不是每次渲染都调用。原文：Binding callbacks in React components 在组件中给事件绑定处理函数是很常见的，比如说每当用户点击一个button的时候使用console.log打印一些...

Lin_R 2019-08-22 10:33 评论0 收藏0
【译】Handling Events

摘要：如果你使用实验性属性初始化语法，你能用这方法来正确绑定回调函数的绑定这语法在中默认支持。然而，如果这回调函数是作为一个传递到更下一级的组件中的时候，些组件可能会做一个额外的重新渲染。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

sugarmo 2019-08-20 14:47 评论0 收藏0
[译]JavaScript ES6 class指南

摘要：前言又称通过一些新的关键字，使类成为了中一个新的一等公民。类声明在中，有两个声明类的方式。在使用了新的关键字后在底层，所做的，也只是将这个方法添加为构造函数的一个属性。在想要调用父类的构造函数时，你可以简单地将关键字视作一个函数使用，如。前言 EcmaScript 2015 （又称ES6）通过一些新的关键字，使类成为了JS中一个新的一等公民。但是目前为止，这些关于类的新关键字仅仅是建...

CoderDock 2019-08-21 10:37 评论0 收藏0