谈谈super(props) 的重要性

ninefive 发布于2019-08-23 15:06 / 1337人阅读

摘要：不过还是让我们回到前面这个例子，这次只用的特性为什么我们要调用可以调用它吗如果必须要调用，不传递参数会发生什么还有其他参数吗接下来我们试一试在中，指的是父类的构造函数。重要的是，在调用父类构造函数之前，你不能在构造函数中使用。

</>复制代码 
翻译：疯狂的技术宅
原文：https://overreacted.io/why-do...

本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章

我听说 Hooks 最近很火。讽刺的是，我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何？

本文中这些坑对于你正常使用 React 并不是很重要。但是假如你想更深入的了解它的运作方式，就会发现实际上它们很有趣。

开始第一个。

首先在我的职业生涯中写过的 super(props) 自己都记不清：

</>复制代码 
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

当然，在类字段提案（class fields proposal）中建议让我们跳过这个开头：

</>复制代码 
class Checkbox extends React.Component {
  state = { isOn: true };
  // ...
}

在2015年 React 0.13 增加对普通类的支持时，曾经打算用这样的语法。定义 constructor 和调用 super(props) 始终是一个临时的解决方案，可能要等到类字段能够提供在工程学上不那么反人类的替代方案。

不过还是让我们回到前面这个例子，这次只用ES2015的特性：

</>复制代码 
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

为什么我们要调用super？可以调用它吗？如果必须要调用，不传递prop参数会发生什么？还有其他参数吗？接下来我们试一试：

在 JavaScript 中，super 指的是父类的构造函数。（在我们的示例中，它指向React.Component 的实现。）

重要的是，在调用父类构造函数之前，你不能在构造函数中使用this。 JavaScript 是不会让你这样做的：

</>复制代码 
class Checkbox extends React.Component {
  constructor(props) {
    //

GPU云服务器云服务器谈谈对php的理解 super 好域名的重要性学算法的重要性

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

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

一个播放器引发的思考——谈谈React跨组件通信

摘要：如果某个组件订阅该事件太晚，那发布者之前所发布的该类事件，它都接收不到，而方案一和二的优点则在于，无论如何，组件都能拿到该的最终状态值有存在内存泄漏的风险。原文地址 - 欢迎关注我的博客在我们react项目日常开发中，往往会遇到这样一个问题：如何去实现跨组件通信？为了更好的理解此问题，接下来我们通过一个简单的栗子说明。实现一个视频播放器假设有一个这样的需求，需要我们去实现一个...

Dean 2019-08-26 13:50 评论0 收藏0
一个播放器引发的思考——谈谈React跨组件通信

摘要：如果某个组件订阅该事件太晚，那发布者之前所发布的该类事件，它都接收不到，而方案一和二的优点则在于，无论如何，组件都能拿到该的最终状态值有存在内存泄漏的风险。原文地址 - 欢迎关注我的博客在我们react项目日常开发中，往往会遇到这样一个问题：如何去实现跨组件通信？为了更好的理解此问题，接下来我们通过一个简单的栗子说明。实现一个视频播放器假设有一个这样的需求，需要我们去实现一个...

zhongmeizhi 2019-08-02 15:06 评论0 收藏0
简单谈谈我理解的React组件生命周期

摘要：用处你在组建中所有的移除所有组建中的监听生命周期父子组件渲染顺序父组件代码引入子组件子组件代码浏览器中的执行结果如下图结论所以在的组件挂载及过程中，最底层的子组件是最先完成挂载及更新的。原文首发在我的个人博客：欢迎点此访问我的个人博客学了一段时间的react了，现在对自己学习的react的生命周期做一个简单总结（如有错误请留言指正，谢谢） react一共有如下几个生命周期函数 c...

lowett 2019-08-26 11:36 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

ZweiZhao 2019-08-02 11:52 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

funnyZhang 2019-08-29 17:09 评论0 收藏0