Question

我有一个容器组件，该组件获取页码作为属性并下载该页面的数据。我依靠componentDidUpdate()在componentDidUpdate()更改时触发pageNumber触发下载。这是一种合理的方法吗？

我注意到的一件事是，即使最初没有任何更改，组件在收到新的pageNumber时也会重新呈现，然后一旦下载了数据就重新呈现。第一次重新渲染是多余的。我不应该为此烦恼吗？

如果真的很烦，我可以让shouldComponentUpdate()仅在data更改时重新渲染。（我想知道此检查是否可能比重新渲染本身还要昂贵？）但是，如果我使用shouldComponentUpdate()而不更新页面更改，那么我将无法依靠componentDidUpdate()进行加载我的数据了。

这是否意味着下面是这样做的方法，还是有更好的方法？

import React from 'react';
import PropTypes from 'prop-types';
import Table from "../components/Table";
import Pagination from "../components/Pagination";
import {connect} from "react-redux";
import {changePage} from "../js/actions";


const PAGE_COUNT = 10;

const mapStateToProps = state => {
    return { currentPage: state.currentPage }
};

const mapDispatchToProps = dispatch => {
  return {
    changePage: page => dispatch(changePage(page))
  };
};

class ConnectedTableContainer extends React.Component {
    state = {
        data: [],
        loaded: false,
    };

    handlePageChange = page => {
        if (page < 1 || page > PAGE_COUNT) return;
        this.props.changePage(page);
    };

    loadData = () => {
        this.setState({ loaded: false });
        const { currentPage } = this.props;
        const pageParam = currentPage ? "?_page=" + currentPage : "";
        fetch('https://jsonplaceholder.typicode.com/posts/' + pageParam)
            .then(response => {
                if (response.status !== 200) {
                    console.log("Unexpected response: " + response.status);
                    return;
                }
                return response.json();
            })
            .then(data => this.setState({
                data: data,
                loaded: true,
            }))
    };

    componentDidMount() {
        this.loadData(this.props.currentPage);

    }

    componentDidUpdate(prevProps) {
       if (prevProps.currentPage != this.props.currentPage) {
            this.loadData();
        }
    }

    render() {
        const { loaded } = this.state;
        const { currentPage } = this.props;
        return (
            <div className="container">
                <div className="section">
                    <Pagination onPageChange={ this.handlePageChange } pageCount={ PAGE_COUNT } currentPage={ currentPage }/>
                </div>
                <div className={ "section " + (loaded ? "" : "loading") }>
                    <Table data={ this.state.data } />
                </div>
            </div>
        )
    }
}

ConnectedTableContainer.propTypes = {
    changePage: PropTypes.func.isRequired,
    currentPage: PropTypes.number.isRequired,
};

ConnectedTableContainer.defaultProps = {
    currentPage: 1,
};

const TableContainer = connect(mapStateToProps, mapDispatchToProps)(ConnectedTableContainer);

export default TableContainer;

Answer 1

当componentDidUpdate()更改时，使用pageNumber触发下载是完全可以的。

我不建议实现shouldComponentUpdate，而是从React.PureComponent继承。通过比较道具和状态为您实现shouldComponentUpdate。如果任何道具和状态发生变化（浅比较），它将重新渲染，否则不会渲染。

ReactJS：在prop更改上运行函数，而不使用不赞成使用的componentWillReceiveProps

1 个答案: