本文篇幅較長，將從 編譯階段 -> 路由階段 -> 渲染階段 -> 細節優化 -> 狀態管理 -> 海量數據源，長列表渲染
方向分別加以探討。
一 不能輸在起跑線上，優化babel配置,webpack配置為項
1 真實項目中痛點
當我們用create-react-app或者webpack構建react工程的時候，有沒有想過一個問題，我們的配置能否讓我們的項目更快的構建速度，更小的項目體積，更簡潔清晰的項目結構。隨着我們的項目越做越大，項目依賴越來越多，項目結構越來越來復雜，項目體積就會越來越大，構建時間越來越長，久而久之就會成了一個又大又重的項目，所以說我們要學會適當的為項目‘減負’，讓項目不能輸在起跑線上。
2 一個老項目
拿我們之前接觸過的一個react老項目為例。我們沒有用dva,umi快速搭建react，而是用react老版本腳手架構建的，這對這種老的react項目，上述的問題都會存在，下面讓我們一起來看看。
我們首先看一下項目結構。
再看看構建時間。
為了方便大家看構建時間，我簡單寫了一個webpack，plugin ConsolePlugin ,記錄了webpack在一次compilation所用的時間。
const chalk = require('chalk') /* console 顏色 */
var slog = require('single-line-log'); /* 單行打印 console */
class ConsolePlugin {
constructor(options){
this.options = options
}
apply(compiler){
/**
* Monitor file change 記錄當前改動文件
*/
compiler.hooks.watchRun.tap('ConsolePlugin', (watching) => {
const changeFiles = watching.watchFileSystem.watcher.mtimes
for(let file in changeFiles){
console.log(chalk.green('當前改動文件：'+ file))
}
})
/**
* before a new compilation is created. 開始 compilation 編譯 。
*/
compiler.hooks.compile.tap('ConsolePlugin',()=>{
this.beginCompile()
})
/**
* Executed when the compilation has completed. 一次 compilation 完成。
*/
compiler.hooks.done.tap('ConsolePlugin',()=>{
this.timer && clearInterval( this.timer )
const endTime = new Date().getTime()
const time = (endTime - this.starTime) / 1000
console.log( chalk.yellow(' 編譯完成') )
console.log( chalk.yellow('編譯用時：' + time + '秒' ) )
})
}
beginCompile(){
const lineSlog = slog.stdout
let text = '開始編譯：'
/* 記錄開始時間 */
this.starTime = new Date().getTime()
this.timer = setInterval(()=>{
text += '█'
lineSlog( chalk.green(text))
},50)
}
}
構建時間如下：
打包后的體積：
3 翻新老項目
針對上面這個react老項目，我們開始針對性的優化。由於本文主要講的是react，所以我們不把太多篇幅給webpack優化上。
① include 或 exclude 限制 loader 范圍。
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: path.resolve(__dirname, '../src'),
use:['happypack/loader?id=babel']
// loader: 'babel-loader'
}
② happypack多進程編譯
除了上述改動之外，在plugin中
/* 多線程編譯 */
new HappyPack({
id:'babel',
loaders:['babel-loader?cacheDirectory=true']
})
③緩存babel編譯過的文件
loaders:['babel-loader?cacheDirectory=true']
④tree Shaking 刪除冗余代碼
⑤按需加載，按需引入。
優化后項目結構
優化構建時間如下：
一次 compilation 時間 從23秒優化到了4.89秒
優化打包后的體積：
由此可見，如果我們的react是自己徒手搭建的，一些優化技巧顯得格外重要。
關於類似antd UI庫的瘦身思考
我們在做react項目的時候，會用到antd之類的ui庫，值得思考的一件事是，如果我們只是用到了antd中的個別組件，比如<Button /> ,就要把整個樣式庫引進來，打包就會發現，體積因為引入了整個樣式大了很多。我們可以通過.babelrc實現按需引入。
瘦身前
.babelrc 增加對 antd 樣式按需引入。
["import", {
"libraryName":
"antd",
"libraryDirectory": "es",
"style": true
}]
瘦身后
總結
如果想要優化react項目，從構建開始是必不可少的。我們要重視從構建到打包上線的每一個環節。
二 路由懶加載，路由監聽器
react路由懶加載，是筆者看完dva源碼中的 dynamic異步加載組件總結出來的，針對大型項目有很多頁面，在配置路由的時候，如果沒有對路由進行處理，一次性會加載大量路由，這對頁面初始化很不友好，會延長頁面初始化時間，所以我們想着用asyncRouter來按需加載頁面路由。
傳統路由
如果我們沒有用umi等框架，需要手動配置路由的時候，也許路由會這樣配置。
<Switch>
<Route path={'/index'} component={Index} ></Route>
<Route path={'/list'} component={List} ></Route>
<Route path={'/detail'} component={ Detail } ></Route>
<Redirect from='/*' to='/index' />
</Switch>
或者用list保存路由信息，方便在進行路由攔截，或者配置路由菜單等。
const router = [
{
'path': '/index',
'component': Index
},
{
'path': '/list'',
'component': List
},
{
'path': '/detail',
'component': Detail
},
]
asyncRouter懶加載路由,並實現路由監聽
我們今天講的這種react路由懶加載是基於import 函數路由懶加載， 眾所周知 ，import 執行會返回一個Promise作為異步加載的手段。我們可以利用這點來實現react異步加載路由
好的一言不合上代碼。。。
代碼
const routerObserveQueue = [] /* 存放路由衛視鈎子 */
/* 懶加載路由衛士鈎子 */
export const RouterHooks = {
/* 路由組件加載之前 */
beforeRouterComponentLoad: function(callback) {
routerObserveQueue.push({
type: 'before',
callback
})
},
/* 路由組件加載之后 */
afterRouterComponentDidLoaded(callback) {
routerObserveQueue.push({
type: 'after',
callback
})
}
}
/* 路由懶加載HOC */
export default function AsyncRouter(loadRouter) {
return class Content extends React.Component {
constructor(props) {
super(props)
/* 觸發每個路由加載之前鈎子函數 */
this.dispatchRouterQueue('before')
}
state = {Component: null}
dispatchRouterQueue(type) {
const {history} = this.props
routerObserveQueue.forEach(item => {
if (item.type === type) item.callback(history)
})
}
componentDidMount() {
if (this.state.Component) return
loadRouter()
.then(module => module.default)
.then(Component => this.setState({Component},
() => {
/* 觸發每個路由加載之后鈎子函數 */
this.dispatchRouterQueue('after')
}))
}
render() {
const {Component} = this.state
return Component ? <Component {
...this.props
}
/> : null
}
}
}
asyncRouter實際就是一個高級組件,將()=>import()作為加載函數傳進來，然后當外部Route加載當前組件的時候，在componentDidMount生命周期函數，加載真實的組件，並渲染組件，我們還可以寫針對路由懶加載狀態定制屬於自己的路由監聽器beforeRouterComponentLoad和afterRouterComponentDidLoaded，類似vue中 watch $route 功能。接下來我們看看如何使用。
使用
import AsyncRouter ,{ RouterHooks } from './asyncRouter.js'
const { beforeRouterComponentLoad} = RouterHooks
const Index = AsyncRouter(()=>import('../src/page/home/index'))
const List = AsyncRouter(()=>import('../src/page/list'))
const Detail = AsyncRouter(()=>import('../src/page/detail'))
const index = () => {
useEffect(()=>{
/* 增加監聽函數 */
beforeRouterComponentLoad((history)=>{
console.log('當前激活的路由是',history.location.pathname)
})
},[])
return <div >
<div >
<Router >
<Meuns/>
<Switch>
<Route path={'/index'} component={Index} ></Route>
<Route path={'/list'} component={List} ></Route>
<Route path={'/detail'} component={ Detail } ></Route>
<Redirect from='/*' to='/index' />
</Switch>
</Router>
</div>
</div>
}
效果
這樣一來，我們既做到了路由的懶加載，又彌補了react-router沒有監聽當前路由變化的監聽函數的缺陷。
三 受控性組件顆粒化 ，獨立請求服務渲染單元
可控性組件顆粒化，獨立請求服務渲染單元是筆者在實際工作總結出來的經驗。目的就是避免因自身的渲染更新或是副作用帶來的全局重新渲染。
1 顆粒化控制可控性組件
可控性組件和非可控性的區別就是dom元素值是否與受到react數據狀態state控制。一旦由react的state控制數據狀態，比如input輸入框的值，就會造成這樣一個場景，為了使input值實時變化，會不斷setState，就會不斷觸發render函數，如果父組件內容簡單還好，如果父組件比較復雜，會造成牽一發動全身，如果其他的子組件中componentWillReceiveProps這種帶有副作用的鈎子，那么引發的蝴蝶效應不敢想象。比如如下demo。
class index extends React.Component<any,any>{
constructor(props){
super(props)
this.state={
inputValue:''
}
}
handerChange=(e)=> this.setState({ inputValue:e.target.value })
render(){
const { inputValue } = this.state
return <div>
{ /* 我們增加三個子組件 */ }
<ComA />
<ComB />
<ComC />
<div className="box" >
<Input value={inputValue} onChange={ (e)=> this.handerChange(e) } />
</div>
{/* 我們首先來一個列表循環 */}
{
new Array(10).fill(0).map((item,index)=>{
console.log('列表循環了' )
return <div key={index} >{item}</div>
})
}
{
/* 這里可能是更復雜的結構 */
/* ------------------ */
}
</div>
}
}
組件A
function index(){
console.log('組件A渲染')
return <div>我是組件A</div>
}
組件B，有一個componentWillReceiveProps鈎子
class Index extends React.Component{
constructor(props){
super(props)
}
componentWillReceiveProps(){
console.log('componentWillReceiveProps執行')
/* 可能做一些騷操作 wu lian */
}
render(){
console.log('組件B渲染')
return <div>
我是組件B
</div>
}
}
組件C有一個列表循環
class Index extends React.Component{
constructor(props){
super(props)
}
render(){
console.log('組件c渲染')
return <div>
我是組件c
{
new Array(10).fill(0).map((item,index)=>{
console.log('組件C列表循環了' )
return <div key={index} >{item}</div>
})
}
</div>
}
}
效果
當我們在input輸入內容的時候。就會造成如上的現象，所有的不該重新更新的地方，全部重新執行了一遍，這無疑是巨大的性能損耗。這個一個setState觸發帶來的一股巨大的由此組件到子組件可能更深的更新流，帶來的副作用是不可估量的。所以我們可以思考一下，是否將這種受控性組件顆粒化，讓自己更新 -> 渲染過程由自身調度。
說干就干，我們對上面的input表單單獨顆粒化處理。
const ComponentInput = memo(function({ notifyFatherChange }:any){
const [ inputValue , setInputValue ] = useState('')
const handerChange = useMemo(() => (e) => {
setInputValue(e.target.value)
notifyFatherChange && notifyFatherChange(e.target.value)
},[])
return <Input value={inputValue} onChange={ handerChange } />
})
此時的組件更新由組件單元自行控制，不需要父組件的更新，所以不需要父組件設置獨立state保留狀態。只需要綁定到this上即可。不是所有狀態都應該放在組件的 state 中. 例如緩存數據。如果需要組件響應它的變動, 或者需要渲染到視圖中的數據才應該放到 state 中。這樣可以避免不必要的數據變動導致組件重新渲染.
class index extends React.Component<any,any>{
formData :any = {}
render(){
return <div>
{ /* 我們增加三個子組件 */ }
<ComA />
<ComB />
<ComC />
<div className="box" >
<ComponentInput notifyFatherChange={ (value)=>{ this.formData.inputValue = value } } />
<Button onClick={()=> console.log(this.formData)} >打印數據</Button>
</div>
{/* 我們首先來一個列表循環 */}
{
new Array(10).fill(0).map((item,index)=>{
console.log('列表循環了' )
return <div key={index} >{item}</div>
})
}
{
/* 這里可能是更復雜的結構 */
/* ------------------ */
}
</div>
}
}
效果
這樣除了當前組件外，其他地方沒有收到任何渲染波動，達到了我們想要的目的。
2 建立獨立的請求渲染單元
建立獨立的請求渲染單元，直接理解就是，如果我們把頁面，分為請求數據展示部分(通過調用后端接口，獲取數據)，和基礎部分(不需要請求數據，已經直接寫好的)，對於一些邏輯交互不是很復雜的數據展示部分，我推薦用一種獨立組件，獨立請求數據，獨立控制渲染的模式。至於為什么我們可以慢慢分析。
首先我們看一下傳統的頁面模式。
頁面有三個展示區域分別，做了三次請求，觸發了三次setState,渲染三次頁面，即使用Promise.all等方法，但是也不保證接下來交互中，會有部分展示區重新拉取數據的可能。一旦有一個區域重新拉取數據，另外兩個區域也會說、受到牽連，這種效應是不可避免的，即便react有很好的ddiff算法去調協相同的節點，但是比如長列表等情況，循環在所難免。
class Index extends React.Component{
state :any={
dataA:null,
dataB:null,
dataC:null
}
async componentDidMount(){
/* 獲取A區域數據 */
const dataA = await getDataA()
this.setState({ dataA })
/* 獲取B區域數據 */
const dataB = await getDataB()
this.setState({ dataB })
/* 獲取C區域數據 */
const dataC = await getDataC()
this.setState({ dataC })
}
render(){
const { dataA , dataB , dataC } = this.state
console.log(dataA,dataB,dataC)
return <div>
<div> { /* 用 dataA 數據做展示渲染 */ } </div>
<div> { /* 用 dataB 數據做展示渲染 */ } </div>
<div> { /* 用 dataC 數據做展示渲染 */ } </div>
</div>
}
}
接下來我們，把每一部分抽取出來，形成獨立的渲染單元，每個組件都獨立數據請求到獨立渲染。
function ComponentA(){
const [ dataA, setDataA ] = useState(null)
useEffect(()=>{
getDataA().then(res=> setDataA(res.data) )
},[])
return <div> { /* 用 dataA 數據做展示渲染 */ } </div>
}
function ComponentB(){
const [ dataB, setDataB ] = useState(null)
useEffect(()=>{
getDataB().then(res=> setDataB(res.data) )
},[])
return <div> { /* 用 dataB 數據做展示渲染 */ } </div>
}
function ComponentC(){
const [ dataC, setDataC ] = useState(null)
useEffect(()=>{
getDataC().then(res=> setDataC(res.data) )
},[])
return <div> { /* 用 dataC 數據做展示渲染 */ } </div>
}
function Index (){
return <div>
<ComponentA />
<ComponentB />
<ComponentC />
</div>
}
這樣一來，彼此的數據更新都不會相互影響。
總結
拆分需要單獨調用后端接口的細小組件，建立獨立的數據請求和渲染，這種依賴數據更新 -> 視圖渲染的組件，能從整個體系中抽離出來 ，好處我總結有以下幾個方面。
1 可以避免父組件的冗余渲染 ，react的數據驅動，依賴於 state 和 props 的改變，改變state 必然會對組件 render 函數調用，如果父組件中的子組件過於復雜，一個自組件的 state 改變，就會牽一發動全身，必然影響性能，所以如果把很多依賴請求的組件抽離出來，可以直接減少渲染次數。
2 可以優化組件自身性能，無論從class聲明的有狀態組件還是fun聲明的無狀態，都有一套自身優化機制，無論是用shouldupdate 還是用 hooks中 useMemo useCallback ，都可以根據自身情況，定制符合場景的渲條 件，使得依賴數據請求組件形成自己一個小的，適合自身的渲染環境。
3 能夠和redux ,以及redux衍生出來 redux-action , dva,更加契合的工作，用 connect 包裹的組件，就能通過制定好的契約，根據所需求的數據更新，而更新自身，而把這種模式用在這種小的，需要數據驅動的組件上，就會起到物盡其用的效果。
四 shouldComponentUpdate ,PureComponent 和 React.memo ,immetable.js 助力性能調優
在這里我們拿immetable.js為例，講最傳統的限制更新方法，第六部分將要將一些避免重新渲染的細節。
1 PureComponent 和 React.memo
React.PureComponent 與 React.Component 用法差不多 ,但 React.PureComponent 通過props和state的淺對比來實現 shouldComponentUpate()。如果對象包含復雜的數據結構(比如對象和數組)，他會淺比較，如果深層次的改變，是無法作出判斷的，React.PureComponent 認為沒有變化，而沒有渲染試圖。
如這個例子
class Text extends React.PureComponent<any,any>{
render(){
console.log(this.props)
return <div>hello,wrold</div>
}
}
class Index extends React.Component<any,any>{
state={
data:{ a : 1 , b : 2 }
}
handerClick=()=>{
const { data } = this.state
data.a++
this.setState({ data })
}
render(){
const { data } = this.state
return <div>
<button onClick={ this.handerClick } >點擊</button>
<Text data={data} />
</div>
}
}
效果
我們點擊按鈕，發現 <Text /> 根本沒有重新更新。這里雖然改了data但是只是改變了data下的屬性，所以 PureComponent 進行淺比較不會update。
想要解決這個問題實際也很容易。
<Text data={{ ...data }} />
無論組件是否是 PureComponent，如果定義了 shouldComponentUpdate()，那么會調用它並以它的執行結果來判斷是否 update。在組件未定義 shouldComponentUpdate() 的情況下，會判斷該組件是否是 PureComponent，如果是的話，會對新舊 props、state 進行 shallowEqual 比較，一旦新舊不一致，會觸發渲染更新。
react.memo 和 PureComponent 功能類似 ，react.memo 作為第一個高階組件，第二個參數 可以對props 進行比較 ，和shouldComponentUpdate不同的, 當第二個參數返回 true 的時候，證明props沒有改變，不渲染組件，反之渲染組件。
2 shouldComponentUpdate
使用 shouldComponentUpdate() 以讓React知道當state或props的改變是否影響組件的重新render，默認返回ture，返回false時不會重新渲染更新，而且該方法並不會在初始化渲染或當使用 forceUpdate() 時被調用，通常一個shouldComponentUpdate 應用是這么寫的。
控制狀態
shouldComponentUpdate(nextProps, nextState) {
/* 當 state 中 data1 發生改變的時候，重新更新組件 */
return nextState.data1 !== this.state.data1
}
這個的意思就是 僅當state 中 data1 發生改變的時候，重新更新組件。 控制prop屬性
shouldComponentUpdate(nextProps, nextState) {
/* 當 props 中 data2發生改變的時候，重新更新組件 */
return nextProps.data2 !== this.props.data2
}
這個的意思就是 僅當props 中 data2 發生改變的時候，重新更新組件。
3 immetable.js
immetable.js 是Facebook 開發的一個js庫，可以提高對象的比較性能，像之前所說的pureComponent 只能對對象進行淺比較，,對於對象的數據類型,卻束手無策,所以我們可以用 immetable.js 配合 shouldComponentUpdate 或者 react.memo來使用。immutable 中
我們用react-redux來簡單舉一個例子，如下所示 數據都已經被 immetable.js處理。
import { is } from 'immutable'
const GoodItems = connect(state =>
({ GoodItems: filter(state.getIn(['Items', 'payload', 'list']), state.getIn(['customItems', 'payload', 'list'])) || Immutable.List(), })
/* 此處省略很多代碼～～～～～～ */
)(memo(({ Items, dispatch, setSeivceId }) => {
/* */
}, (pre, next) => is(pre.Items, next.Items)))
通過 is 方法來判斷，前后Items(對象數據類型)是否發生變化。
五 規范寫法，合理處理細節問題
有的時候，我們在敲代碼的時候，稍微注意一下，就能避免性能的開銷。也許只是稍加改動，就能其他優化性能的效果。
①綁定事件盡量不要使用箭頭函數
面臨問題
眾所周知，react更新來大部分情況來自於props的改變(被動渲染)，和state改變(主動渲染)。當我們給未加任何更新限定條件子組件綁定事件的時候，或者是PureComponent 純組件， 如果我們箭頭函數使用的話。
<ChildComponent handerClick={()=>{ console.log(666) }} />
每次渲染時都會創建一個新的事件處理器，這會導致 ChildComponent 每次都會被渲染。
即便我們用箭頭函數綁定給dom元素。
<div onClick={ ()=>{ console.log(777) } } >hello,world</div>
每次react合成事件事件的時候，也都會重新聲明一個新事件。
解決問題
解決這個問題事件很簡單，分為無狀態組件和有狀態組件。
有狀態組件
class index extends React.Component{
handerClick=()=>{
console.log(666)
}
handerClick1=()=>{
console.log(777)
}
render(){
return <div>
<ChildComponent handerClick={ this.handerClick } />
<div onClick={ this.handerClick1 } >hello,world</div>
</div>
}
}
無狀態組件
function index(){
const handerClick1 = useMemo(()=>()=>{
console.log(777)
},[]) /* [] 存在當前 handerClick1 的依賴項*/
const handerClick = useCallback(()=>{ console.log(666) },[]) /* [] 存在當前 handerClick 的依賴項*/
return <div>
<ChildComponent handerClick={ handerClick } />
<div onClick={ handerClick1 } >hello,world</div>
</div>
}
對於dom，如果我們需要傳遞參數。我們可以這么寫。
function index(){
const handerClick1 = useMemo(()=>(event)=>{
const mes = event.currentTarget.dataset.mes
console.log(mes) /* hello,world */
},[])
return <div>
<div data-mes={ 'hello,world' } onClick={ handerClick1 } >hello,world</div>
</div>
}
②循環正確使用key
無論是react 和 vue,正確使用key,目的就是在一次循環中，找到與新節點對應的老節點，復用節點，節省開銷。想深入理解的同學可以看一下筆者的另外一篇文章 全面解析 vue3.0 diff算法 里面有對key詳細說明。我們今天來看以下key正確用法,和錯誤用法。
1 錯誤用法
錯誤用法一：用index做key
function index(){
const list = [ { id:1 , name:'哈哈' } , { id:2, name:'嘿嘿' } ,{ id:3 , name:'嘻嘻' } ]
return <div>
<ul>
{ list.map((item,index)=><li key={index} >{ item.name }</li>) }
</ul>
</div>
}
這種加key的性能,實際和不加key效果差不多，每次還是從頭到尾diff。
錯誤用法二:用index拼接其他的字段
function index(){
const list = [ { id:1 , name:'哈哈' } , { id:2, name:'嘿嘿' } ,{ id:3 , name:'嘻嘻' } ]
return <div>
<ul>
{ list.map((item,index)=><li key={index + item.name } >{ item.name }</li>) }
</ul>
</div>
}
如果有元素移動或者刪除，那么就失去了一一對應關系，剩下的節點都不能有效復用。
2 正確用法
正確用法：用唯一id作為key
function index(){
const list = [ { id:1 , name:'哈哈' } , { id:2, name:'嘿嘿' } ,{ id:3 , name:'嘻嘻' } ]
return <div>
<ul>
{ list.map((item,index)=><li key={ item.id } >{ item.name }</li>) }
</ul>
</div>
}
用唯一的健id作為key,能夠做到有效復用元素節點。
③無狀態組件hooks-useMemo 避免重復聲明。
對於無狀態組件，數據更新就等於函數上下文的重復執行。那么函數里面的變量，方法就會重新聲明。比如如下情況。
function Index(){
const [ number , setNumber ] = useState(0)
const handerClick1 = ()=>{
/* 一些操作 */
}
const handerClick2 = ()=>{
/* 一些操作 */
}
const handerClick3 = ()=>{
/* 一些操作 */
}
return <div>
<a onClick={ handerClick1 } >點我有驚喜1</a>
<a onClick={ handerClick2 } >點我有驚喜2</a>
<a onClick={ handerClick3 } >點我有驚喜3</a>
<button onClick={ ()=> setNumber(number+1) } > 點擊 { number } </button>
</div>
}
每次點擊button的時候,都會執行Index函數。handerClick1 , handerClick2,handerClick3都會重新聲明。為了避免這個情況的發生，我們可以用 useMemo 做緩存，我們可以改成如下。
function Index(){
const [ number , setNumber ] = useState(0)
const [ handerClick1 , handerClick2 ,handerClick3] = useMemo(()=>{
const fn1 = ()=>{
/* 一些操作 */
}
const fn2 = ()=>{
/* 一些操作 */
}
const fn3= ()=>{
/* 一些操作 */
}
return [fn1 , fn2 ,fn3]
},[]) /* 只有當數據里面的依賴項，發生改變的時候，才會重新聲明函數。*/
return <div>
<a onClick={ handerClick1 } >點我有驚喜1</a>
<a onClick={ handerClick2 } >點我有驚喜2</a>
<a onClick={ handerClick3 } >點我有驚喜3</a>
<button onClick={ ()=> setNumber(number+1) } > 點擊 { number } </button>
</div>
}
如下改變之后，handerClick1 , handerClick2,handerClick3 會被緩存下來。
④懶加載 Suspense 和 lazy
Suspense 和 lazy 可以實現 dynamic import 懶加載效果，原理和上述的路由懶加載差不多。在 React 中的使用方法是在 Suspense 組件中使用 <LazyComponent> 組件。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function demo () {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
)
}
LazyComponent 是通過懶加載加載進來的，所以渲染頁面的時候可能會有延遲，但使用了 Suspense 之后，在加載狀態下，可以用<div>Loading...</div>作為loading效果。
Suspense 可以包裹多個懶加載組件。
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
<LazyComponent1 />
</Suspense>
六 多種方式避免重復渲染
避免重復渲染,是react性能優化的重要方向。如果想盡心盡力處理好react項目每一個細節，那么就要從每一行代碼開始，從每一組件開始。正所謂不積硅步無以至千里。
① 學會使用的批量更新
批量更新
這次講的批量更新的概念，實際主要是針對無狀態組件和hooks中useState,和 class有狀態組件中的this.setState，兩種方法已經做了批量更新的處理。比如如下例子
一次更新中
class index extends React.Component{
constructor(prop){
super(prop)
this.state = {
a:1,
b:2,
c:3,
}
}
handerClick=()=>{
const { a,b,c } :any = this.state
this.setState({ a:a+1 })
this.setState({ b:b+1 })
this.setState({ c:c+1 })
}
render= () => <div onClick={this.handerClick} />
}
點擊事件發生之后，會觸發三次 setState,但是不會渲染三次，因為有一個批量更新batchUpdate批量更新的概念。三次setState最后被合成類似如下樣子
this.setState({
a:a+1 ,
b:b+1 ,
c:c+1
})
無狀態組件中
const [ a , setA ] = useState(1)
const [ b , setB ] = useState({})
const [ c , setC ] = useState(1)
const handerClick = () => {
setB( { ...b } )
setC( c+1 )
setA( a+1 )
}
批量更新失效
當我們針對上述兩種情況加以如下處理之后。
handerClick=()=>{
setTimeout(() => {
this.setState({ a:a+1 })
this.setState({ b:b+1 })
this.setState({ c:c+1 })
}, 0)
}
const handerClick = () => {
Promise.resolve().then(()=>{
setB( { ...b } )
setC( c+1 )
setA( a+1 )
})
}
我們會發現，上述兩種情況 ，組件都更新渲染了三次 ，此時的批量更新失效了。這種情況在react-hooks中也普遍存在，這種情況甚至在hooks中更加明顯，因為我們都知道hooks中每個useState保存了一個狀態，並不是讓class聲明組件中，可以通過this.state統一協調狀態，再一次異步函數中，比如說一次ajax請求后，想通過多個useState改變狀態，會造成多次渲染頁面，為了解決這個問題，我們可以手動批量更新。
手動批量更新
react-dom 中提供了unstable_batchedUpdates方法進行手動批量更新。這個api更契合react-hooks，我們可以這樣做。
const handerClick = () => {
Promise.resolve().then(()=>{
unstable_batchedUpdates(()=>{
setB( { ...b } )
setC( c+1 )
setA( a+1 )
})
})
}
這樣三次更新，就會合並成一次。同樣達到了批量更新的效果。
② 合並state
class類組件(有狀態組件)
合並state這種，是一種我們在react項目開發中要養成的習慣。我看過有些同學的代碼中可能會這么寫(如下demo是模擬的情況，實際要比這復雜的多)。
class Index extends React.Component<any , any>{
state = {
loading:false /* 用來模擬loading效果 */,
list:[],
}
componentDidMount(){
/* 模擬一個異步請求數據場景 */
this.setState({ loading : true }) /* 開啟loading效果 */
Promise.resolve().then(()=>{
const list = [ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ]
this.setState({ loading : false },()=>{
this.setState({
list:list.map(item=>({
...item,
name:item.name.toLocaleUpperCase()
}))
})
})
})
}
render(){
const { list } = this.state
return <div>{
list.map(item=><div key={item.id} >{ item.name }</div>)
}</div>
}
}
分別用兩次this.state第一次解除loading狀態，第二次格式化數據列表。這另兩次更新完全沒有必要，可以用一次setState更新完美解決。不這樣做的原因是，對於像demo這樣的簡單結構還好，對於復雜的結構，一次更新可能都是寶貴的，所以我們應該學會去合並state。將上述demo這樣修改。
this.setState({
loading : false,
list:list.map(item=>({
...item,
name:item.name.toLocaleUpperCase()
}))
})
函數組件(無狀態組件)
對於無狀態組件，我們可以通過一個useState保存多個狀態，沒有必要每一個狀態都用一個useState。
對於這樣的情況。
const [ a ,setA ] = useState(1)
const [ b ,setB ] = useState(2)
我們完全可以一個state搞定。
const [ numberState , setNumberState ] = useState({ a:1 , b :2})
但是要注意，如果我們的state已經成為 useEffect , useCallback , useMemo依賴項，請慎用如上方法。
③ useMemo React.memo隔離單元
react正常的更新流，就像利劍一下，從父組件項子組件穿透，為了避免這些重復的更新渲染，shouldComponentUpdate , React.memo等api也應運而生。但是有的情況下，多余的更新在所難免，比如如下這種情況。這種更新會由父組件 -> 子組件 傳遞下去。
function ChildrenComponent(){
console.log(2222)
return <div>hello,world</div>
}
function Index (){
const [ list ] = useState([ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ])
const [ number , setNumber ] = useState(0)
return <div>
<span>{ number }</span>
<button onClick={ ()=> setNumber(number + 1) } >點擊</button>
<ul>
{
list.map(item=>{
console.log(1111)
return <li key={ item.id } >{ item.name }</li>
})
}
</ul>
<ChildrenComponent />
</div>
}
效果
針對這一現象，我們可以通過使用useMemo進行隔離，形成獨立的渲染單元，每次更新上一個狀態會被緩存，循環不會再執行，子組件也不會再次被渲染,我們可以這么做。
function Index (){
const [ list ] = useState([ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ])
const [ number , setNumber ] = useState(0)
return <div>
<span>{ number }</span>
<button onClick={ ()=> setNumber(number + 1) } >點擊</button>
<ul>
{
useMemo(()=>(list.map(item=>{
console.log(1111)
return <li key={ item.id } >{ item.name }</li>
})),[ list ])
}
</ul>
{ useMemo(()=> <ChildrenComponent />,[]) }
</div>
}
有狀態組件
在class聲明的組件中，沒有像 useMemo 的API ，但是也並不等於束手無策，我們可以通過 react.memo 來阻攔來自組件本身的更新。我們可以寫一個組件，來控制react 組件更新的方向。我們通過一個 <NotUpdate> 組件來阻斷更新流。
/* 控制更新 ,第二個參數可以作為組件更新的依賴 ， 這里設置為 ()=> true 只渲染一次 */
const NotUpdate = React.memo(({ children }:any)=> typeof children === 'function' ? children() : children ,()=>true)
class Index extends React.Component<any,any>{
constructor(prop){
super(prop)
this.state = {
list: [ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ],
number:0,
}
}
handerClick = ()=>{
this.setState({ number:this.state.number + 1 })
}
render(){
const { list }:any = this.state
return <div>
<button onClick={ this.handerClick } >點擊</button>
<NotUpdate>
{()=>(<ul>
{
list.map(item=>{
console.log(1111)
return <li key={ item.id } >{ item.name }</li>
})
}
</ul>)}
</NotUpdate>
<NotUpdate>
<ChildrenComponent />
</NotUpdate>
</div>
}
}
const NotUpdate = React.memo(({ children }:any)=> typeof children === 'function' ? children() : children ,()=>true)
沒錯，用的就是 React.memo，生成了阻斷更新的隔離單元，如果我們想要控制更新，可以對 React.memo 第二個參數入手， demo項目中完全阻斷的更新。
④ ‘取締’state，學會使用緩存。
這里的取締state，並完全不使用state來管理數據，而是善於使用state,知道什么時候使用,怎么使用。react 並不像 vue 那樣響應式數據流。在 vue中 有專門的dep做依賴收集，可以自動收集字符串模版的依賴項，只要沒有引用的data數據， 通過 this.aaa = bbb ,在vue中是不會更新渲染的。因為 aaa 的dep沒有收集渲染watcher依賴項。在react中，我們觸發this.setState 或者 useState，只會關心兩次state值是否相同，來觸發渲染，根本不會在乎jsx語法中是否真正的引入了正確的值。
沒有更新作用的state
有狀態組件中
class Demo extends React.Component{
state={ text:111 }
componentDidMount(){
const { a } = this.props
/* 我們只是希望在初始化,用text記錄 props中 a 的值 */
this.setState({
text:a
})
}
render(){
/* 沒有引入text */
return <div>{'hello,world'}</div>
}
}
如上例子中,render函數中並沒有引入text ,我們只是希望在初始化的時候，用 text 記錄 props 中 a 的值。我們卻用 setState 觸發了一次無用的更新。無狀態組件中情況也一樣存在，具體如下。
無狀態組件中
function Demo ({ a }){
const [text , setText] = useState(111)
useEffect(()=>{
setText(a)
},[])
return <div>
{'hello,world'}
</div>
}
改為緩存
有狀態組件中
在class聲明組件中，我們可以直接把數據綁定給this上，來作為數據緩存。
class Demo extends React.Component{
text = 111
componentDidMount(){
const { a } = this.props
/* 數據直接保存在text上 */
this.text = a
}
render(){
/* 沒有引入text */
return <div>{'hello,world'}</div>
}
}
無狀態組件中
在無狀態組件中, 我們不能往問this,但是我們可以用useRef來解決問題。
function Demo ({ a }){
const text = useRef(111)
useEffect(()=>{
text.current = a
},[])
return <div>
{'hello,world'}
</div>
}
⑤ useCallback回調
useCallback 的真正目的還是在於緩存了每次渲染時 inline callback 的實例，這樣方便配合上子組件的 shouldComponentUpdate 或者 React.memo 起到減少不必要的渲染的作用。對子組件的渲染限定來源與，對子組件props比較，但是如果對父組件的callback做比較，無狀態組件每次渲染執行，都會形成新的callback ,是無法比較，所以需要對callback做一個 memoize 記憶功能，我們可以理解為useCallback就是 callback加了一個memoize。我們接着往下看👇👇👇。
function demo (){
const [ number , setNumber ] = useState(0)
return <div>
<DemoComponent handerChange={ ()=>{ setNumber(number+1) } } />
</div>
}
或着
function demo (){
const [ number , setNumber ] = useState(0)
const handerChange = ()=>{
setNumber(number+1)
}
return <div>
<DemoComponent handerChange={ handerChange } />
</div>
}
無論是上述那種方式，pureComponent 和 react.memo 通過淺比較方式，只能判斷每次更新都是新的callback，然后觸發渲染更新。useCallback給加了一個記憶功能，告訴我們子組件，兩次是相同的 callback無需重新更新頁面。至於什么時候callback更改，就要取決於 useCallback 第二個參數。好的，將上述demo我們用 useCallback 重寫。
function demo (){
const [ number , setNumber ] = useState(0)
const handerChange = useCallback( ()=>{
setNumber(number+1)
},[])
return <div>
<DemoComponent handerChange={ handerChange } />
</div>
}
這樣 pureComponent 和 react.memo 可以直接判斷是callback沒有改變，防止了不必要渲染。
七 中規中矩的使用狀態管理
無論我們使用的是redux還是說 redux 衍生出來的 dva ,redux-saga等,或者是mobx，都要遵循一定'使用規則'，首先讓我想到的是，什么時候用狀態管理，怎么合理的應用狀態管理，接下來我們來分析一下。
什么時候使用狀態管理
要問我什么時候適合使用狀態狀態管理。我一定會這么分析，首先狀態管理是為了解決什么問題，狀態管理能夠解決的問題主要分為兩個方面，一 就是解決跨層級組件通信問題 。二 就是對一些全局公共狀態的緩存。
我們那redux系列的狀態管理為例子。
我見過又同學這么寫的
濫用狀態管理
/* 和 store下面text模塊的list列表，建立起依賴關系，list更新，組件重新渲染 */
@connect((store)=>({ list:store.text.list }))
class Text extends React.Component{
constructor(prop){
super(prop)
}
componentDidMount(){
/* 初始化請求數據 */
this.getList()
}
getList=()=>{
const { dispatch } = this.props
/* 獲取數據 */
dispatch({ type:'text/getDataList' })
}
render(){
const { list } = this.props
return <div>
{
list.map(item=><div key={ item.id } >
{ /* 做一些渲染頁面的操作.... */ }
</div>)
}
<button onClick={ ()=>this.getList() } >重新獲取列表</button>
</div>
}
}
這樣頁面請求數據，到數據更新，全部在當前組件發生，這個寫法我不推薦，此時的數據走了一遍狀態管理,最終還是回到了組件本身，顯得很雞肋，並沒有發揮什么作用。在性能優化上到不如直接在組件內部請求數據。
不會合理使用狀態管理
還有的同學可能這么寫。
class Text extends React.Component{
constructor(prop){
super(prop)
this.state={
list:[],
}
}
async componentDidMount(){
const { data , code } = await getList()
if(code === 200){
/* 獲取的數據有可能是不常變的，多個頁面需要的數據 */
this.setState({
list:data
})
}
}
render(){
const { list } = this.state
return <div>
{ /* 下拉框 */ }
<select>
{
list.map(item=><option key={ item.id } >{ item.name }</option>)
}
</select>
</div>
}
}
對於不變的數據，多個頁面或組件需要的數據，為了避免重復請求,我們可以將數據放在狀態管理里面。
如何使用狀態管理
分析結構
我們要學會分析頁面，那些數據是不變的，那些是隨時變動的，用以下demo頁面為例子：
如上 紅色區域，是基本不變的數據，多個頁面可能需要的數據，我們可以統一放在狀態管理中，藍色區域是隨時更新的數據，直接請求接口就好。
總結
不變的數據，多個頁面可能需要的數據，放在狀態管理中，對於時常變化的數據，我們可以直接請求接口
八 海量數據優化-時間分片，虛擬列表
時間分片
時間分片的概念，就是一次性渲染大量數據，初始化的時候會出現卡頓等現象。我們必須要明白的一個道理，js執行永遠要比dom渲染快的多。 ，所以對於大量的數據，一次性渲染，容易造成卡頓，卡死的情況。我們先來看一下例子
class Index extends React.Component<any,any>{
state={
list: []
}
handerClick=()=>{
let starTime = new Date().getTime()
this.setState({
list: new Array(40000).fill(0)
},()=>{
const end = new Date().getTime()
console.log( (end - starTime ) / 1000 + '秒')
})
}
render(){
const { list } = this.state
console.log(list)
return <div>
<button onClick={ this.handerClick } >點擊</button>
{
list.map((item,index)=><li className="list" key={index} >
{ item + '' + index } Item
</li>)
}
</div>
}
}
我們模擬一次性渲染 40000 個數據的列表，看一下需要多長時間。
我們看到 40000 個 簡單列表渲染了，將近5秒的時間。為了解決一次性加載大量數據的問題。我們引出了時間分片的概念，就是用setTimeout把任務分割，分成若干次來渲染。一共40000個數據，我們可以每次渲染100個， 分次400渲染。
class Index extends React.Component<any,any>{
state={
list: []
}
handerClick=()=>{
this.sliceTime(new Array(40000).fill(0), 0)
}
sliceTime=(list,times)=>{
if(times === 400) return
setTimeout(() => {
const newList = list.slice( times , (times + 1) * 100 ) /* 每次截取 100 個 */
this.setState({
list: this.state.list.concat(newList)
})
this.sliceTime( list ,times + 1 )
}, 0)
}
render(){
const { list } = this.state
return <div>
<button onClick={ this.handerClick } >點擊</button>
{
list.map((item,index)=><li className="list" key={index} >
{ item + '' + index } Item
</li>)
}
</div>
}
}
效果
setTimeout 可以用 window.requestAnimationFrame() 代替，會有更好的渲染效果。我們demo使用列表做的，實際對於列表來說，最佳方案是虛擬列表，而時間分片，更適合熱力圖，地圖點位比較多的情況。
虛擬列表
筆者在最近在做小程序商城項目，有長列表的情況， 可是肯定說 虛擬列表 是解決長列表渲染的最佳方案。無論是小程序，或者是h5 ，隨着 dom元素越來越多，頁面會越來越卡頓,這種情況在小程序更加明顯 。稍后，筆者講專門寫一篇小程序長列表渲染緩存方案的文章，感興趣的同學可以關注一下筆者。
虛擬列表是按需顯示的一種技術，可以根據用戶的滾動，不必渲染所有列表項，而只是渲染可視區域內的一部分列表元素的技術。正常的虛擬列表分為 渲染區，緩沖區 ，虛擬列表區。
如下圖所示。
為了防止大量dom存在影響性能，我們只對，渲染區和緩沖區的數據做渲染，，虛擬列表區 沒有真實的dom存在。緩沖區的作用就是防止快速下滑或者上滑過程中，會有空白的現象。
react-tiny-virtual-list
react-tiny-virtual-list 是一個較為輕量的實現虛擬列表的組件。這是官方文檔。
import React from 'react';
import {render} from 'react-dom';
import VirtualList from 'react-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F', ...];
render(
<VirtualList
width='100%'
height={600}
itemCount={data.length}
itemSize={50} // Also supports variable heights (array or function getter)
renderItem={({index, style}) =>
<div key={index} style={style}> // The style property contains the item's absolute position
Letter: {data[index]}, Row: #{index}
</div>
}
/>,
document.getElementById('root')
);
手寫一個react虛擬列表
let num = 0
class Index extends React.Component<any, any>{
state = {
list: new Array(9999).fill(0).map(() =>{
num++
return num
}),
scorllBoxHeight: 500, /* 容器高度(初始化高度) */
renderList: [], /* 渲染列表 */
itemHeight: 60, /* 每一個列表高度 */
bufferCount: 8, /* 緩沖個數 上下四個 */
renderCount: 0, /* 渲染數量 */
start: 0, /* 起始索引 */
end: 0 /* 終止索引 */
}
listBox: any = null
scrollBox : any = null
scrollContent:any = null
componentDidMount() {
const { itemHeight, bufferCount } = this.state
/* 計算容器高度 */
const scorllBoxHeight = this.listBox.offsetHeight
const renderCount = Math.ceil(scorllBoxHeight / itemHeight) + bufferCount
const end = renderCount + 1
this.setState({
scorllBoxHeight,
end,
renderCount,
})
}
/* 處理滾動效果 */
handerScroll=()=>{
const { scrollTop } :any = this.scrollBox
const { itemHeight , renderCount } = this.state
const currentOffset = scrollTop - (scrollTop % itemHeight)
/* translate3d 開啟css cpu 加速 */
this.scrollContent.style.transform = `translate3d(0, ${currentOffset}px, 0)`
const start = Math.floor(scrollTop / itemHeight)
const end = Math.floor(scrollTop / itemHeight + renderCount + 1)
this.setState({
start,
end,
})
}
/* 性能優化：只有在列表start 和 end 改變的時候在渲染列表 */
shouldComponentUpdate(_nextProps, _nextState){
const { start , end } = _nextState
return start !== this.state.start || end !==this.state.end
}
/* 處理滾動效果 */
render() {
console.log(1111)
const { list, scorllBoxHeight, itemHeight ,start ,end } = this.state
const renderList = list.slice(start,end)
return <div className="list_box"
ref={(node) => this.listBox = node}
>
<div
style={{ height: scorllBoxHeight, overflow: 'scroll', position: 'relative' }}
ref={ (node)=> this.scrollBox = node }
onScroll={ this.handerScroll }
>
{ /* 占位作用 */}
<div style={{ height: `${list.length * itemHeight}px`, position: 'absolute', left: 0, top: 0, right: 0 }} />
{ /* 顯然區 */ }
<div ref={(node) => this.scrollContent = node} style={{ position: 'relative', left: 0, top: 0, right: 0 }} >
{
renderList.map((item, index) => (
<div className="list" key={index} >
{item + '' } Item
</div>
))
}
</div>
</div>
</div>
}
}
效果
具體思路
① 初始化計算容器的高度。截取初始化列表長度。這里我們需要div占位,撐起滾動條。
② 通過監聽滾動容器的 onScroll事件,根據 scrollTop 來計算渲染區域向上偏移量, 我們要注意的是，當我們向下滑動的時候，為了渲染區域，能在可視區域內，可視區域要向上的滾動; 我們向上滑動的時候，可視區域要向下的滾動。
③ 通過重新計算的 end 和 start 來重新渲染列表。
性能優化點
① 對於移動視圖區域，我們可以用 transform 來代替改變 top值。
② 虛擬列表實際情況，是有 start 或者 end 改變的時候，在重新渲染列表，所以我們可以用之前 shouldComponentUpdate 來調優，避免重復渲染。
總結
react 性能優化是一個攻堅戰，需要付出很多努力，將我們的項目做的更完美，希望看完這篇文章的朋友們能找到react優化的方向，讓我們的react項目飛起來。
文章就分享到這，歡迎關注“前端大神之路”
