React router的Route中component和render属性的使用

在react router官方文档关于component的部分写着：

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

这段话如何理解呢？可以通过一个小例子来说明。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from "react-router-dom";

class Bar extends React.Component {

    componentDidMount() {
        console.log("componentDidMount")
    }

    render() {
        return (
            <div>Bar</div>
        )
    }
}

class App extends React.Component {

    constructor(prop) {
        super(prop);
        this.state = {idx: 1}
    }

    handleClick = () => {
        this.setState(state => ({idx: state.idx + 1}))
    };

    render() {
        return (
            <div>
                <div>
                    {this.state.idx}
                    <button onClick={this.handleClick}>add</button>
                </div>
                <div>
                    <BrowserRouter>
                        <Route component={Bar}/>
                    </BrowserRouter>
                </div>
            </div>
        );
    }
}


ReactDOM.render(<App/>, document.getElementById('root'));

上面的代码中，App组件内有一个简单的Bar组件，通过component属性被Route引用。

<Route component={Bar}/>

此时在页面中点击按钮，Bar组件的componentDidMount并不会被触发。
假设现在需要在Bar组件中接受App中的idx，需要将idx作为props传递给Bar，此时可以写成如下代码

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from "react-router-dom";

class Bar extends React.Component {

    componentDidMount() {
        console.log("componentDidMount")
    }

    render() {
        const {idx} = this.props;
        return (
            <div>in Bar : {idx}</div>
        )
    }
}

class App extends React.Component {

    constructor(prop) {
        super(prop);
        this.state = {idx: 1}
    }

    handleClick = () => {
        this.setState(state => ({idx: state.idx + 1}))
    };

    render() {
        return (
            <div>
                <div>
                    {this.state.idx}
                    <button onClick={this.handleClick}>add</button>
                </div>
                <div>
                    <BrowserRouter>
                        <Route component={() => (<Bar idx={this.state.idx}/>)}/>
                    </BrowserRouter>
                </div>
            </div>
        );
    }
}


ReactDOM.render(<App/>, document.getElementById('root'));

然而此时点击按钮，发现Bar的componentDidMount一直被调用，就像上面文档中说的一样

That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component.

所以正确的写法应该是

<Route render={() => (<Bar idx={this.state.idx}/>)}/>

此时Bar组件就不会出现重复的unmounting和mounting了。

其背后的原理在于，react在比较组件状态以便决定如何更新dom节点时，首先要比较组件的type和key。在使用<Route component={() => (<Bar idx={this.state.idx}/>)}/>时，由于调用了React.createElement，组件的type不是Bar这个类，而是一个匿名函数。App组件每次render时都生成一个新的匿名函数，导致生成的组件的type总是不相同，所以会产生重复的unmounting和mounting。

参考文档：
https://reactjs.org/docs/reconciliation.html
https://reactjs.org/docs/react-api.html#createelement

作者：大神带我来搬砖
链接：https://www.jianshu.com/p/a2a9b469a422
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。