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
複製程式碼stackoverflow.com/questions/4…
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;
}
複製程式碼
（完）