[译]React ES6 class constructor super()

justjavac 发布于2019-08-22 10:53 / 834人阅读

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

当我们在写React时候会用到ES6中的class语法 ,比较常见的情况如下：

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

这里有两个问题：

是否有必要在constructor中调用super()函数？

调用super()和super(props) 有何区别 ?

解答 Q1：

Always call super() if you have a constructor and don"t worry about it if you don"t have a constructor

只有当你有一个constructor时候调用super()才是必须的看代码：

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

上述代码完全符合规定所以你其实并没有必要去为你创建的每个React Component 调用super() 话分两头如果你的代码中有constructor你就必须调用super()

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

出现上述错误的原因是 super() 未被调用之前 this 还未被初始化 (uninitialized) 了解更多
或许聪敏的你会想着使用一个空的constructor从而摆脱super()

class MyClass extends React.component {
    constructor(){} // Error: missing super() call in constructor
}

ES6的 class 的constructors如果属于子类就必须调用super()方法所以一旦你的代码有
constructor 你就必须调用用 super()

解答Q 2：

Call super(props) only if you want to access this.props inside the constructor. React automatically set it for you if you want to access it anywhere else.

假使你想获取到constructor中的this.props 你就必须调用super(props) 然后React就会自动为你自动为你配置好它以便你可以在随便什么地方调用它

看一下使用super() 和 super(props) 的不同：

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

    }
}

当使用super(props)时你可以从constructor中获取到this.props

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

当然还有一点当你想在其他地方使用它时也没有必要将props传递到constructor中 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!
    }
}

我的理解是总之需要绑定 this. 方法或是需要在 constructor 使用操作 props 定义 state，就需要 constructor ，否则例如在其他方法中（如 render()）使用 this.props 则没必要要使用 constructor

原文链接： React ES6 class constructor super()

云服务器服务器托管 es6中的class es6class constructor super

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

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

[译]React ES6 class constructor super()

摘要：会自行设置在组件的其他地方以供访问。将传入的作用是可以使你在内访问它完善后如果你只是想在别处访问它，是不必传入的，因为会自动为你设置好原博文地址: http://cheng.logdown.com/posts/2016/03/26/683329 当我们像下面这样使用React的ES6 class语法创建一个组件的时候： class MyClass extends React.comp...

terasum 2019-08-20 13:50 评论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