reactjs - react 路由器 v4。需要防止组件重新渲染(尝试构建类似 instagram 的图像网格)

Question

我创建了一个 React 应用程序，它基本上有 3 条路线:

根/项目 : 显示产品列表

root/items/:itemId : 显示产品列表

根/管理员 :显示管理面板

我需要什么 :

航线上 根/项目和 root/items/:itemId ，我想创造一种与 Instagram 非常相似的体验: https://www.instagram.com/p/BjXyK9WAEjH/?taken-by=amazon

我希望用户点击任何产品触发到 的路线更改root/items/:itemId 并出现一个模态窗口(以显示有关产品的更多信息) 不重新渲染产品列表 .

当前发生的情况:

用户每次点击产品

路线变更，重新渲染 产品列表

并抖动页面，给模态显示带来麻烦

并造成糟糕的用户体验

有人有想法吗？非常感谢。

Answer 1

你可以:

1.使用2条路由渲染同一个组件

两者 root/items和 root/items/:itemId渲染相同的 ProductList 组件，如果 id，您应该检查渲染函数在 route 存在，并有条件地渲染带有信息的模态。您必须在 componentDidMount() 中检查服务器中的信息或 shouldComponentUpdate() ，看看如何在官方文档中实现这些。

root/items:将显示项目

root/items/:itemId: 相同的组件，但使用信息呈现模式。

或者

2.不要使用路由，其他组件的条件渲染

您可以有一个自定义组件 (ProductInfo)，它接收产品的 id 作为 Prop 并呈现产品的信息。在 ProductInfo 的 componentDidMount() 函数中您可以查询您的服务器以获取信息并显示它。现在，在您的产品列表组件 (ProductList) 中，您可以使用 props 中传递的 id 对 ProductInfo 进行条件渲染。

产品信息

// your imports here
class ProductInfo as Component {
    constructor(){
        this.state = {info:{}}
    }

    componentDidMount(){
        // load info and set info in state using this.props.id
    }

    render(){
        // check if info is set and render all the info however you like
        return(){
            <div>{JSON.stringify( this.state.info )}</div>
        }
    }
}

产品列表

//imports here
//import a Modal, or implement however you like, with bootstrap for example
import ProductInfo from './ProductInfo';

class ProductList as Component {
    constructor(){
        this.state = {infoId: -1}
    }

    changeId(e){
        // get the id from the pressed button (or link or whatever component you are using)
        // set the id in the state, remember to clean the state after the modal has been closed: set it back to -1.
    }

    render(){
        // check if id is set
        let {infoId} = this.state;
        let renderModal = infoId > -1;
        return(){
            <div>
                {renderModal &&
                    <Modal>
                        <ProductInfo id={infoId}/>
                    </Modal>
                }
                <ul>
                    <li>
                        <button
                            type={'button'}
                            name={'id1'}
                            onChange={(e) => this.changeId(e)}>
                            Info 1
                        </button>
                    </li>
                    <li>
                        <button
                            type={'button'}
                            name={'id2'}
                            onChange={(e) => this.changeId(e)}>
                            Info 2
                        </button>
                    </li>
                    <li>
                        <button
                            type={'button'}
                            name={'id3'}
                            onChange={(e) => this.changeId(e)}>
                            Info 3
                        </button>
                    </li>
                </ul>
            </div>
        }
    }
}

这是一个简单的例子，有很多方法可以更好地做到这一点，但我认为这可以回答你的问题。

防止重新渲染组件

如果您在这些建议之后仍然需要重新渲染，那么您可能会在每次加载信息时进行渲染。为防止这种情况发生，请将信息保持在该状态并仅在加载信息时进行条件渲染。

import api from './api'; // your custom api component to get data

class ProductList as Component {
    constructor(){
        this.state = {list:[], dataLoaded: false, infoId:-1}
    }

    ...

    componentDidMount(){
        let myList = api.getList(); // basically call any function that gets your data
        this.setState({
            list:myList , dataLoaded: true
        });
    }

    changeId(e){
        // same as previous example
    }

    render(){
        // only render list if data is loaded using conditional rendering
        // 
        let {dataLoaded, list, infoId} = this.state;
        let renderModal = infoId> -1;

        return(
            <div>
                {renderModal &&
                    <Modal>
                        <ProductInfo id={infoId}/>
                    </Modal>
                }
                {dataLoaded &&
                    <ul>
                        <li>

                        // render your list data here using the variable list from the state

                        <li>
                    </ul>
                }
            </div>
        );
    }
}

即使您显示模态，这也将阻止 React 重新渲染列表。