关于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)?
