React里面是如何区分Class和Function的

栏目: 服务器 · 发布时间: 7年前

内容简介:针对文章从两种形式的Component中获取node节点的方式不一样,Function的直接调用,Class的需要实例化,再调用实例的render方法。没法针对Function和Class都调用

针对文章 https://overreacted.io/how-does-react-tell-a-class-from-a-function/ 的摘录

为什么要区分

从两种形式的Component中获取node节点的方式不一样,Function的直接调用,Class的需要实例化,再调用实例的render方法。

没法针对Function和Class都调用 new 操作符

+ arrow function 调用new会报错

+ Function的返回值可能不是对象,调用new得到的不会是预期的对象

+ Function里面的this不是实例对象,使得最终调用new之后的结果不是预期的

没法针对Function和Class都直接调用

+ 一些babel的处理中,针对构造函数的直接调用会报错

+ 未被babel转译过的ES6形式的Class,直接调用会报错

如何区分

instanceof 运算符

关于 prototype__proto__ 的区别

__proto__ 是指向一个对象的原型

prototype是Function和Class才具有的,是指向的经由Function和Class实例化出来的实例的 __proto__

为什么不能使用 instanceof来区分

因为早起的一些实践,导致同一个页面可能同时出现多个React, 这个时候instanceof可能就会出错

static属性

一些Class的实现中,并不会拷贝Class的static属性给实例

prototype属性

class Component{}
Component.prototype.isReactComponent = {}

class Greeting extends Component {}
console.log(Greeting.prototype.isReactComponent); // yes

至于为什么isReactComponent需要是一个对象而不是一个简单的基本类型,这是因为需要兼容早期的Jest


以上所述就是小编给大家介绍的《React里面是如何区分Class和Function的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创新者

创新者

[美] 沃尔特 · 艾萨克森 / 关嘉伟、牛小婧 / 中信出版社 / 2016-6 / 88.00

讲述了计算机和互联网从无到有的发展历程,并为我们生动地刻画出数字时代的创新者群像。 在近200年的数字化进程中群星闪耀,艾萨克森从一个计算机程序的创造者、诗人拜伦之女埃达说起,细数了这一群站在科学与人文交叉路口的创新者,他们包括通用型电子计算机的创造者奠奇利、科学家冯·诺依曼、仙童半导体公司的“八叛逆”、天才图灵、英特尔的格鲁夫、微软的比尔·盖茨、苹果公司的乔布斯、谷歌的拉里·佩奇等。《创新......一起来看看 《创新者》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具