ReactJS：在道具更改时运行函数而不使用已弃用的 componentWillReceiveProps答案

【问题标题】：ReactJS: run function on prop change without using deprecated componentWillReceivePropsReactJS：在道具更改时运行函数而不使用已弃用的 componentWillReceiveProps
【发布时间】：2018-11-06 17:32:23
【问题描述】：

我有一个容器组件，它获取页码作为道具并下载该页面的数据。我依靠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;

【问题讨论】：

当 setState() 方法被调用时，渲染函数会被调用 stackoverflow.com/a/53033950/7865621 这可能会给一些想法

标签： reactjs react-redux

【解决方案1】：

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

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

【讨论】：