反应天然嵌套的提取物

Question

我必须渲染带有数据的卡列表。在第一步，我必须获取配置的ID列表。此提取相对较快。然后，在第二步中，我将为每个ID获取详细信息。第二个提取相对较慢，因此每个带有详细信息的卡都有自己的旋转器。

ID和详细信息来自不同的异步数据源。

最好的方法是什么？

我尝试使用Redux从容器的ComponentDidmount中获取ID列表。然后，在每张卡的组成部分中，我启动了每个ID的详细信息。这有效。

在状态对象中，我有一个对象，该对象容纳所有Infos

```
{
   "accounts": {
        "id1": { "detailedInfo": "Datailed Info 1", fetching : false },
        "id2": { "detailedInfo": "Datailed Info 2", fetching : false },
        "id3": { "detailedInfo": "", fetching : true },
        ...
   },
   fetching : false,
   error : false
}
```

问题是，如果我更改帐户映射中的条目之一，则整个列表将重新渲染。

是否可以将每张卡"绑定"到props.Accounts中的条目？因此，仅在更改特定详细信息时才会重新渲染该卡？

这是列表的容器

```
class BalancesContent extends React.Component {
    static propTypes = {
        dispatch: PropTypes.func,
        fetching: PropTypes.bool,
        getAccounts: PropTypes.func,
    };
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        if (this.props.accounts.accounts.length == 0) {
            this.props.getAccounts();
        }
    }
    onRefresh() {
        this.props.getAccounts();
    }
    setState(newState) {
        console.log("bc new state", newState);
        super.setState(newState);
    }
    render() {
        const userCards = this.props.accounts.accounts?Object.keys(this.props.accounts.accounts).map((acc) =>
            <UserBalancesCard
                key={acc}
                account={acc}
                refreshing={false}
                balances={null} />
        ):null;
        return (
            <Content padder
                refreshControl={
                    <RefreshControl
                        refreshing={this.props.accounts.fetching}
                        onRefresh={this.onRefresh.bind(this)}
                        title="Loading..."
                    />
                }>
                <BalancesSummary />        
                {userCards}        
            </Content>
        )
    }
}
const mapStateToProps = state => {
    return {
        accounts: state.accounts
    };
};
const mapDispatchToProps = dispatch => {
    return {
        getAccounts: () => dispatch(AccountsActions.accountsRequest()),
    };
};
```

这是具有详细信息的组件

```
class UserBalancesCard extends Component {
    static propTypes = {
        dispatch: PropTypes.func,
        fetching: PropTypes.bool,
        updateAccount: PropTypes.func,
    };
    getAccount() {
        return this.props.accounts.accounts[this.props.account];
    }
    componentDidMount() {
        console.log("ubc did mount");
        const acc = this.getAccount();
        if (!(acc.balances.timestamp && acc.balances.timestamp > 0)) {
            this.props.updateAccount(this.props.account);
        }
    }
    render() {
        const acc = this.getAccount();
        console.log("render UBC", this.props.account);
        return (
            <Card style={styles.container}>
                <CardItem header>
                    <H1>{this.props.account}</H1>
                </CardItem>
                <BalancesCardItem balances={acc.balances} />
                <CardItem footer>
                    <Right>{acc.fetching && <ActivityIndicator animating={true} size="small" />}</Right>
                </CardItem>
            </Card>
        )
    }
}

const mapStateToProps = state => {
    return {
        accounts: state.accounts
    };
};
const mapDispatchToProps = dispatch => {
    return {
        updateAccount: (account) => dispatch(AccountsActions.balanceRequest(account),),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(UserBalancesCard);
```

Answer 1

当您将新列表映射到单个组件时，您会更改这些组件和React的陈词力，然后再次开始渲染。例如，如果您有一个带有this.state.counter = 1的CompoEnnt，并且调用this.setState({counter: 1})组件将恢复。要检查组件值是否更改，您可以实现shouldComponentUpdate()方法：

https://reactjs.org/docs/reeact-component.html#shouldcomponentupdate

也许在您的UserBalanceCard组件中尝试一下。

例如：

shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.counter != this.props.counter) return true;
}