在react中，父組件的重新render會(huì)引發(fā)子組件的重新render，但是一些情況下我們會(huì)覺得這樣做有些多余，比如：
class A extends React.Component { render() { console.log('render') return <div>這是A組件</div> }}class Main extends React.Component { render() { return ( <div> // 點(diǎn)擊button會(huì)讓A不斷調(diào)用render <button onClick={() => this.setState({ a: 1 })}>Main</button> <A /> </div> ) }}為了解決這個(gè)問題，需要分為ES6類組件和函數(shù)式組件兩種：
類組件
使用shouldComponentUpdate來對(duì)props和state進(jìn)行判斷以此決定是否進(jìn)行render
class A extends React.Component { shouldComponentUpdate(nextProps, nextState) { //兩次props對(duì)比 return nextProps.a === this.props.a ? false : true } render() { console.log('render') return <div>這是A組件</div> }}class Main extends React.Component { // ... render() { return ( <div> <button onClick={() => this.setState({ a: 1 })}>Main</button> <A a={this.state.a} /> </div> ) }}通過返回false來跳過這次更新
使用React.PureComponent，它與React.Component區(qū)別在于它已經(jīng)內(nèi)置了shouldComponentUpdate來對(duì)props和state進(jìn)行淺對(duì)比,并跳過更新
//PureComponentclass A extends React.PureComponent { render() { console.log('render') return <div>這是A組件</div> }}class Main extends React.Component { state = { a: 1 } render() { return ( <div> <button onClick={() => this.setState({ a: 1 })}>Main</button> <A a={this.state.a} /> </div> ) }}函數(shù)組件
使用高階組件React.memo來包裹函數(shù)式組件，它和類組件的PureComponent類似，也是對(duì)對(duì)props進(jìn)行淺比較決定是否更新
const A = props => { console.log('render A') return <div>這是A組件</div>}// React.memo包裹Aconst B = React.memo(A)const Main = props => { const [a, setA] = useState(1) console.log('render Main') return ( <div> // 通過setA(a + 1)讓父組件重新render <button onClick={() => setA(a + 1)}>Main</button> // 一直傳入相同的props不會(huì)讓子組件重新render <B a={1} /> </div> )}它的第二個(gè)參數(shù)接受一個(gè)兩次props作為參數(shù)的函數(shù)，返回true則禁止子組件更新
其他
上面提到的淺比較就是根據(jù)內(nèi)存地址判斷是否相同：
// extends React.Componentclass A extends React.Component { render() { console.log('render A') console.log(this.props) return <div>這是組件A</div> }}class Main extends React.Component { test = [1, 2, 3] render() { console.log('render Main') return ( <div> <button onClick={() => { // 父組件render this.setState({}) this.test.push(4) }} > Main </button> <A test={this.test} /> </div> ) }}結(jié)果是：
使用React.component:
使用React.PureComponent:
使用React.component，點(diǎn)擊之后子組件重新render。改為React.PureComponent之后，點(diǎn)擊button子組件并不會(huì)render。也因此，PureComponent根據(jù)前后內(nèi)存地址判斷是否相等，所以向子組件傳遞函數(shù)作為props時(shí)，使用內(nèi)聯(lián)箭頭函數(shù)的形式將會(huì)導(dǎo)致子組件的重新render；所以可以用箭頭函數(shù)作為成員變量的形式再將函數(shù)引用作為props傳遞。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
