反应原生嵌套提取

Question

我必须用数据呈现一张卡片列表。第一步，我必须获取配置的 ID 列表。此获取速度相对较快。然后在第二步中，我将获取每个 ID 的详细信息。第二次获取相对较慢，因此每张带有详细信息的卡片都有自己的旋转器。

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

最好的方法是什么？

我尝试使用 redux 从容器的 ComponentDidMount 中获取 ID 列表。然后在每张卡的 ComponentDidMount 中，我开始获取每个 ID 的详细信息。这行得通。

在状态对象中，我有一个对象，其中包含这样的所有信息

```
{
   "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 的组件并且您调用this.setState({counter: 1})，该组件将重新渲染。要检查组件值是否发生变化，您可以实现shouldComponentUpdate() 方法：

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

也许在你的 UserBalanceCard 组件中试试这个。

例如：

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