1.JSX僅僅是creatElement()的語法糖（簡化語法）
image.png
2.組件更新機制
父組件重新渲染時摔寨，也會重新渲染子組件
3.減輕state
- 減輕state：只儲存根組件渲染相關(guān)數(shù)據(jù)（比如：count/數(shù)據(jù)列表/loading等）
- 注意：不用做渲染的數(shù)據(jù)不要放在state中蛔趴，比如定時器id等
- 對于這種需要在多個方法中用到的數(shù)據(jù)宙拉，應(yīng)該放在this中
4.避免不必要的重新渲染
父組件更新會引起子組件更新
問題：子組件沒有任何變化時也會重新渲染
如何避免不必要重新渲染呢？
解決：使用鉤子函數(shù)shouldComponentUpdate（nextProps,nextState）
作用：通過返回值決該組件是否重新渲染雹舀，返回true表示重新渲染，false表示不重新渲染
觸發(fā)時機：更新階段鉤子函數(shù)粗俱，組件重新渲染前執(zhí)行（執(zhí)行順序shouldComponentUpdate->render）
// 鉤子函數(shù)
shouldComponentUpdate(nextProps,nextState){
//返回false，阻止組件重新渲染
//return false
//最新狀態(tài)：
console.log('最新的state',nextState)
//更新前的狀態(tài)：
console.log('this.state',this.state)
//以上兩個狀態(tài)用來比較是否更新了寸认，是否需要重新渲染
return true
}
4.純組件
說明：純組件內(nèi)部的對比是shallow compare（淺層對比）
- 對于值類型來說：比較兩個值是否相同（直接復(fù)制即可签财，沒有坑）
- 但對于引用類型來說偏塞，只比較對象的引用（地址）是否相同
// 對象
// 正確做法，創(chuàng)建新數(shù)據(jù)
const newObj = { ...state.obj,number:2 }
setState({ obj:newObj })
// 數(shù)組
// 不要用數(shù)組的push / unShift 等直接修改當(dāng)前數(shù)組的方法
// 而應(yīng)該用concat 或 slice等這些返回數(shù)據(jù)的方法
// 或者用es6這種簡潔的方法
this.setState({
list:[...this.state.list,{新數(shù)據(jù)}]
})
5.虛擬DOM和Diff算法
React部分更新的原理：虛擬DOM和Diff算法
虛擬DOM：本質(zhì)上就是一個JS對象灸叼，用來描述你希望在屏幕上看到的內(nèi)容（UI）
image.png
虛擬DOM的真正價值從來都不是性能，虛擬DOM讓React脫離了瀏覽器環(huán)境的束縛古今，只要能夠運行js的地方屁魏，就能運行React，就能脫離瀏覽器運行捉腥，就能開發(fā)APP原生頁面氓拼，VR虛擬現(xiàn)實等
6.React路由
- 1.安裝： yarn add react-router-dom
- 2.導(dǎo)入路由的三個核心組件：
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
- 3.使用Router組件包裹整個應(yīng)用（重要）
<Router>
...
</Router>
4.使用Link組件作為導(dǎo)航菜單（路由入口）
<Link to="/first">頁面一</Link>
5.使用Route組件配置路由規(guī)則和要展示的組件（路由出口）
<Route path="/first" component="first"></Route>
6.常用組件說明
image.png
Link組件
Route組件
7.路由執(zhí)行過程
路由執(zhí)行過程
8.編程式導(dǎo)航
編程式導(dǎo)航
