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 后，点击遮罩层或右上角叉，不会封闭 模态框

 <Modal
    title={""}
    visible={this.state.isible}
    //不能解释掉 onCancel
    onCancel={this.handleCancel}
>
</Modal>

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 (
      <div
            style={{height:'330px',border:'1px red solid',overflow: 'auto'}}
            ref={this.aa}
          >
        //100个肯定高度的div
      </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;
}

（完）