Question

我对React Lifecycle中的数据更新有疑问。

NewsTable子组件从父组件接收props（查询），然后父组件调用数据库并呈现表。父级还将发送更新的道具（新查询），以便更新表格。如果父级激发相同的查询两次，则该表不应该更新（也就是说，它不应该使用相同的查询继续命中数据库）。现在，我想使用shouldComponentUpdate来处理这个问题，但最终我会使用＆＃34; debounce＆＃34;库。

这是一个代码段：

import React from 'react';

var NewsTable = React.createClass({displayName: "NewsTable",
    getDefaultProps: function() {
        return {
        };
    },

    getInitialState: function() {
        return {
            query: null
        };
    },

    componentWillMount: function() {
        this.loadData(this.props.query);
    },

    componentDidMount: function() {
    },

    componentWillUnmount: function() {
    },

    loadData: function(query) {
        // time-consuming async, return "data"
        this.setState({
            query: query,
            data: data
        });
    },

    componentWillReceiveProps: function(newProps) {
    },

    shouldComponentUpdate: function(newProps, newState) {
        if (newState.query != newProps.query) {
            return true;
        } else {
            return false;
        }
    },

    componentWillUpdate: function(newProps, newState) {
        this.loadData(newProps.query);
        newState.query = newProps.query;
    },

    componentDidUpdate: function(oldProps, oldState) {
    },

    render: function() {
        console.log("NewsTable -> render");
        if (this.props.query != null) {
            return <div/>
        }
    }
});

export default NewsTable;

这里的NewsTable是一个子组件，它接收一个＆＃34;查询＆＃34; prop，向数据库发送请求，然后呈现表。

具体做法是：

传入道具＆＃34;查询＆＃34;传递给NewsTable。
初始化组件时，将启动getDefaultProps和getInitialState。
然后调用componentWillMount函数，该函数触发数据库请求，并调用loadData函数。当请求从数据库返回时，它调用setState。根据文档，这里setState不会自动调用render，但是在componentWillMount函数之后会自动调用render。这是从数据库加载数据的正确位置吗？
render，然后调用componentDidMount。我应该将loadData请求放在componentDidMount中，这与文档类似吗？ http://facebook.github.io/react/tips/initial-ajax.html在这种情况下，componentDidMount中的setState将调用shouldComponentUpdate，并比较查询参数。

现在当父组件更改查询道具时会发生什么？

在这种情况下，更新的道具调用shouldComponentUpdate - ＆gt; componentWillUpdate - ＆gt; loadData - ＆gt; setState（） - ＆gt; shouldComponentUpdate ???它进入了一个无限循环。

我应该如何最好地更新代码段以处理更新的查询道具，并阻止重复调用？

如何在React Lifecycle中更新数据？

0 个答案: