react性能優(yōu)化達到最大化的方法 immutable.js使用的必要性
一行代碼勝過千言萬語。這篇文章呢，主要講述我一步一步優(yōu)化react性能的過程，為什么要用immutable.js呢。毫不夸張的說。有了immutable.js（當然也有其他實現(xiàn)庫）。。才能將react的性能發(fā)揮到極致！要是各位看官用過一段時間的react，而沒有用immutable那么本文非常適合你。那么我開始吧！
1、對于react的來說，如果父組件有多個子組件
想象一下這種場景，一個父組件下面一大堆子組件。然后呢，這個父組件re－render。是不是下面的子組件都得跟著re－render。可是很多子組件里面是冤枉的?。『芏嘧咏M件的props 和 state 然而并沒有改變?。。‰m然virtual dom 的diff 算法很快，但是性能也不是這么浪費的??！下面我們上代碼
1）.原始代碼如下
以下是父組件代碼。。負責輸入name 和 age 然后循環(huán)顯示name 和 age
export default class extends Component {
constructor(props){
super(props)
this.state={
name:"",
age :"",
persons:[]
}
}
render() {
const {name,age,persons} = this.state
return (
<div>
<span>姓名:</span><input value={name} name="name" onChange={this._handleChange.bind(this)}></input>
<span>年齡:</span><input value={age} name="age" onChange={this._handleChange.bind(this)}></input>
<input type="button" onClick={this._handleClick.bind(this)} value="確認"></input>
{persons.map((person,index)=>(
<Person key={index} name={person.name} age={person.age}></Person>
))}
</div>
)
}
_handleChange(event){
this.setState({[event.target.name]:event.target.value})
}
_handleClick(){
const {name,age} = this.state
this.setState({
name:"",
age :"",
persons:this.state.persons.concat([{name:name,age:age}])
})
}
}
以下是子組件代碼單純的顯示name和age而已
class Person extends Component {
componentWillReceiveProps(newProps){
console.log(`我新的props的name是${newProps.name}，age是${newProps.age}。我以前的props的name是${this.props.name}，age是${this.props.age}是我要re-render了`);
}
render() {
const {name,age} = this.props;
return (
<div>
<span>姓名:</span>
<span>{name}</span>
<span> age:</span>
<span>{age}</span>
</div>
)
}
}
運行起來長下圖這個樣
好那么問題來了，我們看一下控制臺：
天哪，這么多次re-reder..細細觀看，不難發(fā)現(xiàn)。要re-render這么多次，父組件一re-render,子組件就跟著re-render啊。那么多么浪費性能，好PureRenderMixin出場
2）.PureRenderMixin
因為咱用的是es2015的 Component，所以已經(jīng)不支持mixin了，不過沒關(guān)系，可以用HOCs，這個比mixin還更受推崇呢。我有空回用代碼來展示他倆的異同，鑒于不是本文重點，，大家可以看這兩篇文章了解下React Mixin 的前世今生 和Mixins Are Dead. Long Live Composition
所以在這里我們用Pure render decorator代替PureRenderMixin，那么代碼如下
import pureRender from "pure-render-decorator"
...
@pureRender
class Person extends Component {
render() {
console.log("我re-render了");
const {name,age} = this.props;
return (
<div>
<span>姓名:</span>
<span>{name}</span>
<span> age:</span>
<span>{age}</span>
</div>
)
}
}
加個這東西就完事了？看上去咋這么不令人信服啊。不管怎樣，試試吧。
果然可以做到pure render，在必須render 的時候才render。
好我們看看它的神奇之處
@pureRender
是es7的Decorators語法。上面這么寫就和下面這么寫一樣
class PersonOrigin extends Component {
render() {
console.log("我re-render了");
const {name,age} = this.props;
return (
<div>
<span>姓名:</span>
<span>{name}</span>
<span> age:</span>
<span>{age}</span>
</div>
)
}
}
const Person = pureRender(PersonOrigin)
pureRender其實就是一個函數(shù)，接受一個Component。把這個Component搞一搞，返回一個Component看他pureRender的源代碼就一目了然
function shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
function pureRende(component) {
component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;
pureRender很簡單，就是把傳進來的component的shouldComponentUpdate給重寫掉了，原來的shouldComponentUpdate，無論怎樣都是return ture，現(xiàn)在不了，我要用shallowCompare比一比，shallowCompare代碼及其簡單，如下
function shallowCompare(instance, nextProps, nextState) {
return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}
一目了然。分別拿現(xiàn)在props&state和要傳進來的props&state，用shallowEqual比一比，要是props&state都一樣的話，就return false，是不是感覺很完美？不。。這才剛剛開始，問題就出在shallowEqual上了
3）.shallowEqual的問題
shallowEqual引起的bug
很多時候，父組件向子組件傳props的時候，可能會傳一個復雜類型，比如我們改下。
render() {
const {name,age,persons} = this.state
return (
<div>
...省略.....
{persons.map((person,index)=>(
<Person key={index} detail={person}></Person>
))}
</div>
)
}
person是一個復雜類型。這就埋下了隱患，在演示隱患前，我們先說說shallowEqual，是個什么東西，shallowEqual其實只比較props的第一層子屬性是不是相同，就像上述代碼，props 是如下
{
detail:{
name:"123",
age:"123"}
}
他只會比較props.detail ===nextProps.detail
那么問題來了，上代碼
如果我想修改detail的時候考慮兩種情況
情況一，我修改detail的內(nèi)容，而不改detail的引用
這樣就會引起一個bug，比如我修改detail.name,因為detail的引用沒有改，所以props.detail ===nextProps.detail 還是為true。
所以我們?yōu)榱税踩鹨姳仨毿薷膁etail的引用，（redux的reducer就是這么做的）
情況二，我修改detail的引用
這種雖然沒有bug，但是容易誤殺，比如如果我新舊兩個detail的內(nèi)容是一樣的，豈不是還要，render。所以還是不完美，你可能會說用深比較就好了，但是 深比較及其消耗性能，要用遞歸保證每個子元素一樣。
這只是說沒有用immutable引起各種、、、下一篇我講寫，如何用immutable.j。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React教程之Props驗證的具體用法（Props Validation）
這篇文章主要介紹了React教程之Props驗證的具體用法（Props Validation），非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了淺談箭頭函數(shù)寫法在ReactJs中的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
react數(shù)據(jù)管理中的setState與Props詳解
setState?是?React?中用于更新組件狀態(tài)（state）的方法,本文給大家介紹react數(shù)據(jù)管理中的setState與Props知識,感興趣的朋友跟隨小編一起看看吧2023-10-10
jsx就是javsscript與xml結(jié)合的一種格式，是js語法的一種擴展，只要把html代碼寫在js中就是jsx。react中定義組件有3種寫法：函數(shù)的方式、es5的寫法、es6（類）的寫法2022-08-08
useState和useEffect是React的兩個重要Hook,用于組件狀態(tài)管理和處理副作用,useState允許添加狀態(tài)變量,控制組件渲染,而useEffect用于執(zhí)行渲染后的副作用操作,本文給大家介紹React中的useState和useEffect詳細解析,感興趣的朋友跟隨小編一起看看吧2024-10-10
React中super()和super(props)的區(qū)別小結(jié)
本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
React中的Refs提供了一種方式，允許我們訪問DOM節(jié)點或在render方法中創(chuàng)建的React元素，本文給大家介紹react refs的相關(guān)知識，感興趣的朋友一起看看吧2021-07-07
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React-Router(V6)的權(quán)限控制實現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
react循環(huán)數(shù)據(jù)(列表)的實現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04