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


针对文章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


文章作者: wanuq
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 wanuq !
 上一篇
2019博客迁移 2019博客迁移
为什么要迁移我的这个博客从17底年迁移到vultr上(参看博客搬迁2017)到现在已经运行了一年多,一直也算是正常运行。不过要说问题,那也是很有一些的。 首先是基于docker配置的Wordpress和mysql,经常会莫名的挂掉。有些时候
2019-02-19 wanuq
下一篇 
@reach/router的嵌套路由失效的可能原因 @reach/router的嵌套路由失效的可能原因
TL;DR请确认失效路由的上一级路由配置path的时候,附带了后缀/* 出错代码// App.tsx const NotFound = (props: RouteComponentProps) => <p>Sorry, n
2018-11-07
  目录