关于React的一些小知识-拖泥的前端之路-SegmentFault思否

关于react的一些小知识

这里搜集了几个关于react的零散知识，有些虽然知道了也不一定能帮你写出更好的代码，但能够扩展一下知识。

以下全部来自于https://overreacted.io，需要更详细解释的可以去里面找相关文章。

1. 关于lint

eslint有一条规则是不允许在componentdidmount中setstate，但实际上确实有一种情况需要这么做：计算出渲染好的dom尺寸然后执行后续操作。如果某种行为是需要被限制的，那么通常来说react一定会警告你或者拒绝执行：例如卸载后执行setstate。

所以lint并非是完美的开发规范，当然它能够规范团队的代码并且显著的帮你降低bug的出现，但是你需要知道你的代码被标红是为什么，该条规则是否是绝对正确的并且能降低bug？如果不是，你完全可以把它去掉。

2. $$typeof: symbol(react.element)

如果你把一个组件实例打印出来，你会发现除了我们熟悉的props children ref等属性，还有一个

$$typeof: symbol(react.element)

那么这个$$typeof是干嘛的呢？实际上是用于安全方面的。

假设你的站点不安全，然后使得用户可以存储json格式的数据，那么当你输出数据时这段json可能会被处理为对象，如果这个对象符合react element的定义就会形成xss攻击。

所以在react 0.14之后，react在每个react element上都附上了这个$$typeof: symbol(react.element)属性，由于symbol不能在json中进行传输所以没有办法用这种方式伪造react element。

不支持symbol怎么办？那就没办法获得这种保护了，这种情况下react为了一致性考虑会将$$typeof设置为一个数字：0xeac7 （0xeac7看起来像react）。

3. react怎么知道你的组件是函数组件还是类组件？

如果一个组件是函数组件，那么可以直接用page({ title: 'hello' })来创建，但是如果是类组件那么就需要用new操作符来实例化，那么react是怎么区分这两种组件的呢？

首先，直接判断是函数还是类是很困难的，即使你能够tell a class from a function in javascript，被babel转译后就行不通了，因为类也会被转译为函数。

下面直接出结论：由于当你写组件时一定是extends react.component的形式，所以只要在component上定义一个特殊字段表示这是类组件就可以了。不能是类的静态属性，因为有些转码器不能正确复制静态属性，所以需要设置为实例属性，也就是component.prototype.isreactcomponent = {};。

isreactcomponent被设置为{}而不是true是由于早期的jest会在某些情况下删除基本类型的属性。

用page.prototype instanceof react.component来判断行不行？不太行，因为有可能你的项目中有两个react包，不管是不是故意的。

4. super(props)到底要不要传入props

class checkbox extends react.component {
  constructor(props) {
    super(props);
    this.state = { ison: true };
  }
  // ...
}

简单来说，即使你不传props，react也会在组件实例化后自动把props挂载上去，这也是为什么你不传props但是你依然能在组件内其他地方使用this.props的原因：

 // inside react
 const instance = new yourcomponent(props);
 instance.props = props;

但是这种情况你不能在constructor内使用this.props，因为props只有在实例化之后才会被挂载到实例上面。那如果你希望在constructor内使用，你就需要将props传入super():

class checkbox extends react.component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }
  // ...
}

// 当执行super的时候
class component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

但是为什么能够在下面这种形式下使用this.props:

class checkbox extends react.component {
  state = { ison: this.props.ison };
  // ...
}

因为@babel/plugin-proposal-class-properties帮你提供了正确传递参数的默认constructor，否则你也不能使用这种写法。

参考：
writing resilient components
why do react elements have a $$typeof property?
how does react tell a class from a function?
why do we write super(props)?