溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
pure render 我就不多說了，附上我另一片文章鏈接 react如何性能達到最大化(前傳)
不論你用不用immutable，只要你想達到pure render，下面值得你注意！
一天我和往常一樣，開開心心得寫著react，用著@pureRender，
export default class extends Component {
...
render() {
const {name,age} =this.state;
return (
<div>
<Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug 所在
</div>
)
}
...
}
發現一個問題，對于Person這個子組件來說，在父組件re－render的時候，即使Person得前后兩個props都沒改變，它依舊會re－render，即使用immutable.js也不好使。
原來啊，父組件每次render，_handleClick都會執行bind(this) 這樣_handleClick的引用每次都會改，所以Person前后兩次props其實是不一樣的。
那怎么辦？把bind（this）去掉？不行 還必須得用
真正的答案是 讓父組件每次render 不執行bind（this），直接提前在constructor執行好，修改之后
export default class extends Component {
constructor(props){
super(props)
this._handleClick=this._handleClick.bind(this)//改成這樣
}
render() {
const {name,age} =this.state;
return (
<div>
<Person name={name} age={age} onClick={this._handleClick}></Person>
</div>
)
}
...
}
參考：React.js pure render performance anti-pattern
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
