【译】你可能不需要派生状态

原文链接 You Probably Don’t Need Derived State

​ React 16.4包含了getDerivedStateFromProps的bug，这个 bug 会在 React components 复现一些已知的 bug。如果这个版本导致出现的问题，导致您在修复过之后还已知出现的话，我们非常抱歉。在这篇文章中，我们将解释一些常见的反模式与派生状态和我们的首选替代方案。

​ 很长一段时间，生命周期componentWillReceiveProps是更新状态以响应props改变没有额外渲染的的唯一方法。在版本16.3中，我们引入了替换生命周期，getDerivedStateFromProps以更安全的方式解决相同的情况。与此同时，我们意识到人们对如何使用这两种方法存在许多误解，并且我们发现反模式会导致细微而混乱的错误。getDerivedStateFromProps在16.4中的错误修正使得派生状态更具可预测性，因此滥用它的结果更容易被注意到

你不知道的数组去重

1. 双重循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var arr = [4, 4, 2, "2", 1]
function unique1(array) {
  var res = []
  for (let i = 0; i < arr.length; i++) {
    for (var j = 0; j < res.length; j++) {
      if (arr[i] === res[j]) {
        break;
      }
    }
    if (j === res.length) {
      res.push(arr[i])
    }
  }
  return res
}
console.log('unique1', unique1(arr))

时间复杂度 o(n^2) 空间复杂度 o(n)

优点： 兼容性好，

缺点： 代码较多， 时间复杂度也高。

Mask-Scroll

> 原码地址*

蒙层防穿透问题

> 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候， 手指滑动屏幕会出现底部内容也滑动的现象. 如图：

当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。 这就是蒙层穿透， 也可以叫 ‘滚动穿透’. 当然出现这种情况， 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头…)

解决方案

十一月份十个有趣的JS和CSS库

原文链接

Tutorialzine 的目的就是让你们能够及时知道web 开发的趋势以及最新资讯。这就是为什么我们为什么每月都会在发布一些我们精心挑选的一些值得你关注的东西。

如果你喜欢这些文章，一定要订阅 Dev Awesome哟。这是我们每周两次更新的一个平台，在这里我们会分享一些很酷的一些文章，库，以及免费的设计资源。

Vue Interactive Paycard

五步理解JSON Web Token(JWT)

原文链接5 Easy Steps to Understanding JSON Web Tokens (JWT)

​ 在这篇文章中我们讲会讲到： JSON Web Token(JWT)的基本原理是什么， 以及我们为什么要使用它？JWT是确保我们应用程序可信和安全的重要的一环。JWT 允许我们以安全的方式去表示像用户数据之类的声明。

​ 为了解释JWT 如何工作，我们从一个抽象的定义开始。

JSON Web Token 是一个JSON 对象。在 REC 7519 中这么定义：它表示双方的一组安全的信息方式。它由 头部（header）， 负载(payload) 和签名(signature)组成。