关于React的一些小知识

tuomao 发布于2019-08-23 16:29 / 491人阅读

摘要：关于的一些小知识这里搜集了几个关于的零散知识，有些虽然知道了也不一定能帮你写出更好的代码，但能够扩展一下知识。被设置为而不是是由于早期的会在某些情况下删除基本类型的属性。

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

云服务器 GPU云服务器关于网络安全的小知识 ddos一些比较小的网站关于网络安全的知识关于云计算的小故事

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

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

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0
正在暑假中的《课多周刊》(第1期)

摘要：正在暑假中的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。原理微信热更新方案涨知识了，热更新是以后的标配。正在暑假中的《课多周刊》(第1期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。远上寒山石径...

liukai90 2019-08-29 11:04 评论0 收藏0
正在暑假中的《课多周刊》(第1期)

摘要：正在暑假中的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。原理微信热更新方案涨知识了，热更新是以后的标配。正在暑假中的《课多周刊》(第1期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。远上寒山石径...

yintaolaowanzi 2019-08-20 10:11 评论0 收藏0