component和render在react router中的应用

在react router项目中，有这样的一个需求，首先展示用户名列表，点击某个用户名后，根据用户名在后台取得用户具体信息在详情页进行展示。

此时可以将详情页封装成一个组件，利用react router将userId传递给详情页组件，详情页组件向后台请求数据，然后进行展示。

component

使用component时，详情页组件代码如下

import {PureComponent, Component} from "react";
import React from "react";

class ComponentUser extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {}
    }

    getUserId = () => {
        const {
            match: {
                params: {id},
            },
        } = this.props;
        return id;
    };

    fetchContent = (userId) => {
        console.log("fetch");
        this.setState({content: "loading"});
        new Promise(resolve => {
            setTimeout(() => {
                resolve("content of " + userId)
            }, 2000)
        }).then(content => {
            this.setState({content})
        })
    };

    componentDidMount() {
        const userId = this.getUserId();
        this.fetchContent(userId);
    }

    render() {
        const userId = this.getUserId();
        const {content} = this.state;

        return (
            <div>
                <div>{userId}</div>
                <div>{content}</div>
            </div>

        )
    }
}

export default ComponentUser

列表页代码如下

import React from "react";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import RenderUser from './RenderUser'
import ComponentUser from './ComponentUser'

const App = () => (
    <Router>
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/componentUser/user1">userA</Link>
                    </li>
                    <li>
                        <Link to="/componentUser/user2">userB</Link>
                    </li>
                </ul>
            </nav>

            <Route path="/componentUser/:id" component={ComponentUser}/>
        </div>
    </Router>
);

export default App;

不过此时会有个问题，切换点击切换userA和userB的时候，发现页面并没有更新，这是由component属性的性质决定的，react会进行组件复用。

所以需要在组件中添加componentDidUpdate函数，期望在userId发生变化后重新获取数据。

import {PureComponent, Component} from "react";
import React from "react";

class ComponentUser extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {}
    }

    getUserId = () => {
        const {
            match: {
                params: {id},
            },
        } = this.props;
        return id;
    };

    fetchContent = (userId) => {
        console.log("fetch");
        this.setState({content: "loading"});
        new Promise(resolve => {
            setTimeout(() => {
                resolve("content of " + userId)
            }, 2000)
        }).then(content => {
            this.setState({content})
        })
    };

    componentDidMount() {
        const userId = this.getUserId();
        this.fetchContent(userId);
    }

    componentDidUpdate(prevProps) {
        const userId = this.getUserId();
        const {
            match: {
                params: {id: previousUserId},
            },
        } = prevProps;
        if (userId !== previousUserId) {
            this.fetchContent(userId);
        }
    }

    render() {
        const userId = this.getUserId();
        const {content} = this.state;

        return (
            <div>
                <div>{userId}</div>
                <div>{content}</div>
            </div>

        )
    }
}

export default ComponentUser

这里要注意的是，componentDidUpdate中需要判断当前的userId是否和原来的userId一致，只有不一致的时候才需要重新获取数据。不这样做的话，会导致无限循环的setState和componentDidUpdate。

render

使用render则可以减少三分之一的代码行数，此时详情页组件代码如下

import {PureComponent} from "react";
import React from "react";

class RenderUser extends PureComponent {

    constructor() {
        super();
        this.state = {}
    }

    componentDidMount() {
        console.log("fetch");
        this.setState({content: "loading"});
        const {userId} = this.props;
        new Promise(resolve => {
            setTimeout(() => {
                resolve("content of " + userId)
            }, 1000)
        }).then(content => {
            this.setState({content})
        })
    }


    render() {
        const {userId} = this.props;
        const {content} = this.state;

        return (
            <div>
                <div>{userId}</div>
                <div>{content}</div>
            </div>

        )
    }
}

export default RenderUser

列表页代码如下

import React from "react";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import RenderUser from './RenderUser'
import ComponentUser from './ComponentUser'

const App = () => (
    <Router>
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/renderUser/user1">user1</Link>
                    </li>
                    <li>
                        <Link to="/renderUser/user2">user2</Link>
                    </li>
                </ul>
            </nav>

            <Route path="/renderUser/:id" render={
                ({match}) => (<RenderUser key={match.params.id} userId={match.params.id}/>)
            }/>
        </div>
    </Router>
);

export default App;

可以看到由于将userId作为组件的key，可以避免组件复用，从而降低代码的复杂程度。