前端小知识10点（2019.4.14）-白红宇

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 实现<div>滚动到最下方

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 复制代码

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;       }); 复制代码

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); 复制代码

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

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

（完）