javascript - 如何使用异步更新编写 shouldComponentUpdate

Question

我的 React 类 EventTable 有几种模式，根据模式，它从服务器获取不同的数据并将它们显示到 <Table> 中。 .我首先让类显示静态数据并且它工作得很好，包括通过来自更高组件的 prop 切换 mod。但后来我从 fetch 切换到动态数据(ApiHelper 在 updateData() 中运行)，现在我遇到了问题。

我想不通shouldComponentUpdate功能。在当前状态下，该类在获取完成之前呈现，因此在初始模式下，它不显示任何内容，当模式更改时，它显示之前获取的数据。

例如，我尝试在 shouldComponentUpdate 中将旧数据与新数据进行比较或仅在 eventsLoaded 时更新是 true 并在获取之前将其设为 false，但随后它打破了组件无限更新的方式，这有时会在更改模式和服务器流量垃圾邮件时导致闪烁。

class EventTable extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = {
            eventsLoaded: false,
            data: undefined
        };
    }

    componentDidMount() {
        this.updateData();
    }

    componentDidUpdate() {
        this.updateData();
    }

    shouldComponentUpdate(nextProps, nextStates) {
        return this.props.mode !== nextProps.mode;
    }

    updateData() {
        if(this.props.mode === 0)
            ApiHelper.getAllEvents().then((result) => this.setState({data: result, eventsLoaded: true}));
        else if(this.props.mode === 1)
            ApiHelper.getMemberEvents(this.props.userToken).then((result) => this.setState({data: result, eventsLoaded: true}));
        else
            ApiHelper.getPastEvents().then((result) => this.setState({data: result, eventsLoaded: true}));
    }

   render() {
        //rendering a <Table> using this.state.data
   }
}

Answer 1

shouldComponentUpdate 在这里没有给您任何好处；它只是让事情变得更难(防止组件在您设置状态时重新呈现，这正是您想要的)。我现在会把它去掉，只有当您将 React 性能确定为一个问题，尤其是这个组件是一个原因时，才担心实现它。

然后，您要将上一个 Prop 与下一个 Prop 检查(当前在 shouldComponentDidUpdate 中)添加到 componentDidUpdate，并且只调用 this.updateData 当 Prop 改变时。如果您不将其包装在条件中，它将在每次渲染后触发，这可能导致循环行为。

有了这些更改，初始渲染和对 mode 属性的更改都将触发对 updateData 的调用，这将发出请求并更新状态，这将触发渲染。渲染之后，componentDidUpdate 将触发，但看到 props 没有改变，所以它不会尝试重新获取。