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 (
            

                
{userId}
                
{content}
            

        )
    }
}

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 = () => (
    
        

            

                

                    

                        userA
                    
                    

                        userB
                    
                
            

            
        
    
);

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 (
            

                
{userId}
                
{content}
            

        )
    }
}

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 (
            

                
{userId}
                
{content}
            

        )
    }
}

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 = () => (
    
        

            

                

                    

                        user1
                    
                    

                        user2
                    
                
            

             ()
            }/>
        
    
);

export default App;

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