前端小知识10点（2019.4.14）

android_c 发布于2019-08-23 17:04 / 1761人阅读

摘要：函数中最好从和读取数据，仅在宝贵的时刻用。服务端渲染将在废弃，改成这个方法会从中删除已经挂载的并且清理上面注册的事件和状态，如果中没有挂载，则调用此函数不执行任何操作。

1、React.PureComponent 与 React.Component 的区别
React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过 prop 和 state 的浅对比来实现 shouldComponentUpate()
React.Component：

class A extends React.Component{
  //xxx
}

React.PureComponent：

class B extends React.PureComponent{
  //xxx
}

注意：如果 props 和 state 包含复杂的数据结构，React.PureComponent 可能会因深层数据不一致而产生错误的否定判断，即 state、props 深层的数据已经改变，但是视图没有更新。

2、shouldComponentUpate() 的机制
只要 state、props 的状态发生改变，就会 re-render，即使 state、props 的值和之前一样

有三种办法优化 shouldComponentUpate 生命周期
（1）只用简单的 props 和 state 时，考虑 PureComponent （理由如第 1 点）
（2）当开发者知道深层的数据结构已经发生改变时使用 forceUpate()
（3）使用 不可变对象（如 Immutable.js） 来促进嵌套数据的快速比较

3、React 强制更新状态之 forceUpdate()
我们都知道，当 state、props 状态改变时，React 会重渲染组件。

但如果你不用 props、state，而是其他数据，并且在该数据变化时，需要更新组件的话，就可以调用 forceUpdate()，来强制渲染

举个例子：

class A extends Component {
  this.a=1

  Add(){
    this.a+=1
    this.forceUpdate()
  } 
  //调用Add() ...
}

流程：当调用 forceUpdate() 方法后

注意：
（1）如果改变标签的话，React 仅会更新 DOM。
（2）render() 函数中最好从 this.props 和 this.state 读取数据，forceUpdate() 仅在“宝贵”的时刻用。

4、服务端渲染
ReactDOM.render() 将在 React.v17废弃，改成 ReactDOM.hydrate()

5、ReactDOM.unmountComponentAtNode(container)
这个方法会从 DOM 中删除已经挂载的 React component 并且清理上面注册的事件和状态，如果 container 中没有挂载 component，则调用此函数不执行任何操作。

返回 true 或 false

6、babel-plugin-transform-remove-console
在打包React项目后，清除所有console.log()语句

7、antd 的 Modal 去掉 onCancel 后，点击遮罩层或右上角叉，不会关闭模态框

8、利用 ref 实现

滚动到最下方

class A extends Component {
  constructor(props){
     //xxx
    this.aa = React.createRef();
  }
  render() {
    if(this.aa&&this.aa.current){
      this.aa.current.scrollTop = this.aa.current.scrollHeight
    }

    return (
      
        //100个一定高度的div
      
  )}
}

9、ESLint Unexpected use of isNaN：错误使用isNaN

// bad
isNaN("1.2"); // false
isNaN("1.2.3"); // true
// good
Number.isNaN("1.2.3"); // false
Number.isNaN(Number("1.2.3")); // true

https://stackoverflow.com/questions/46677774/eslint-unexpected-use-of-isnan/48747405#48747405

10、Assignment to property of function parameter "item" ：循环时，不能添加/删除对象属性

let obj=[{a:1,b:2},{c:3,d:4}]
//bad
obj.map((item, index) => {
      //添加Index属性    
      item.index = index + 1;
  });
//good

      columnsData.forEach((item, index) => {
        // 添加序号
        item.index = index + 1;
      });

https://github.com/airbnb/javascript/issues/1653

11、error Use array destructuring：使用数组结构来赋值

//bad
newTime = array[0];
//good
[newTime] = array;

12、error Use object destructuring：使用对象结构来赋值

//bad
const clientWidth = document.body.clientWidth;
//good
const {body:{clientWidth}} = document;

13、Require Radix Parameter (radix)：缺少参数

//bad
parseInt(numberOne);
//good
parseInt(numberOne,10);

https://eslint.org/docs/rules/radix#require-radix-parameter-radix

14、禁止浏览器双击选中文字

.aa{
  //浏览器双击选不到文字
  -webkit-user-select: none;
}

（完）

GPU云服务器云服务器前端知识小知识前端知识阿里云 html前端知识

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

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

前端小知识10点（2019.5.18）

摘要：当给数组的赋负数或小数时，数组的长度有无变化由此可见，的属性只计算非负整数下标不计算负数小数项目热更新慢并且是在时卡住怎么办本人实际上是文件里多写了个逗号。。。。 showImg(https://segmentfault.com/img/remote/1460000019223033); 1、当给数组的index赋负数或小数时，数组的长度有无变化？ let arr=[] arr...

neuSnail 2019-08-26 13:50 评论0 收藏0
前端小知识10点（2019.5.28）

摘要：可以看到，这组参数，以上三条全部满足。详情请参考浏览器类别判断安全浏览器完 showImg(https://segmentfault.com/img/remote/1460000019316485); 1、火狐（firefox）的mouseenter问题 { this.mouseEnter(e,); }} onBlur={() => {...

Imfan 2019-08-26 13:57 评论0 收藏0
前端小知识10点（2019.5.2）

摘要：为什么整体上是一个匿名函数自调用因为匿名函数自执行里面的所有东西都是局部的，这样引用时，能防止和其他的代码冲突。对象的类型标签是。由于代表的是空指针大多数平台下值为，因此，的类型标签也成为了，就错误的返回了。 showImg(https://segmentfault.com/img/remote/1460000019062498); 1、为什么 jQuery 整体上是一个匿名函数自调用...

yibinnn 2019-08-23 17:16 评论0 收藏0