React優化子組件render

在react中，父組件的從新render會引起子組件的從新render，可是一些狀況下咱們會以爲這樣作有些多餘，好比：

1. 父組件並未傳遞props給子組件
2. 新傳遞的props渲染結果不變

class A extends React.Component {
	render() {
		console.log('render')
		return <div>這是A組件</div>
	}
}

class Main extends React.Component {
	render() {
		return (
			<div>
			    // 點擊button會讓A不斷調用render
				<button onClick={() => this.setState({ a: 1 })}>Main</button>
				<A />
			</div>
		)
	}
}
複製代碼

爲了解決這個問題，須要分爲ES6類組件和函數式組件兩種：

類組件

• 使用shouldComponentUpdate來對props和state進行判斷以此決定是否進行render

class A extends React.Component {
	shouldComponentUpdate(nextProps, nextState) {
	    //兩次props對比
		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區別在於它已經內置了shouldComponentUpdate來對props和state進行淺對比,並跳過更新

//PureComponent
class 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>
		)
	}
}
複製代碼

函數組件

• 使用高階組件React.memo來包裹函數式組件，它和類組件的PureComponent相似，也是對對props進行淺比較決定是否更新

const A = props => {
	console.log('render A')
	return <div>這是A組件</div>
}
// React.memo包裹A
const 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不會讓子組件從新render
			<B a={1} />
		</div>
	)
}
複製代碼

它的第二個參數接受一個兩次props做爲參數的函數，返回true則禁止子組件更新

• useCallback 在函數組件中，函數做爲props傳遞給子組件時，不管子組件是pureComponent仍是用React.memo進行包裹，都會讓子組件render，須要使用useCallback來對傳遞的方法進行保存，將useCallback的返回值傳遞給子組件就能讓子組件不隨父組件render。固然，使用閉包的形式，將變量保存在組件外部再傳入也能解決這個問題。

其餘

上面提到的淺比較就是根據內存地址判斷是否相同：

// extends React.Component
class 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>
		)
	}
}
複製代碼

結果是： 使用React.component:

使用React.PureComponent:

使用React.component，點擊以後子組件從新render。改成React.PureComponent以後，點擊button子組件並不會render。也所以，PureComponent根據先後內存地址判斷是否相等，因此向子組件傳遞函數做爲props時，使用內聯箭頭函數的形式將會致使子組件的從新render；因此能夠用箭頭函數做爲成員變量的形式再將函數引用做爲props傳遞。