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傳遞。