处理多个状态变化的最佳方式

Question

我对反应很陌生。我正在构建一个运行良好的 Web 应用程序，但我不确定我是否正确处理状态更改。例如，我有一个在 componentDidMount.

中调用的方法

继续调用 setState 似乎效率低下且不好，但我不确定是否有更好的方法。

我希望得到一些反馈。

class AuditScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      currentVehicle: null,
      currentVehicleIndex: 0,
      vehicles: [],
      activePictureIndex: 0,
      show: false,
      loading: false,
      next_page: `${props.backend.id}/images`,
    };
  }

  componentDidMount() {
    this.getImages()
  }


  getImages() {
    if (!this.state.loading) {
      this.setState({
        loading: true,
      });
      this.registerScrollEvent();
      axios.get(this.state.next_page)
        .then((response) => {
          const paginator = response.data;
          const vehicles = paginator.data.filter((vehicle) => {
            if (vehicle.enhanced && vehicle.enhanced.length) {
              return vehicle;
            }
          });
          if (vehicles && vehicles.length) {
            this.setState({
              vehicles: [...this.state.vehicles, ...vehicles],
              next_page: paginator.next_page_url,
            });

            if (this.state.currentVehicle === null) {
              this.setState({
                currentVehicle: vehicles[0]
              });
            }
          }

          // remove scroll event if next_page_url is null
          if (!paginator.next_page_url) {
            this.removeScrollEvent();
          }
        })
        .finally((response) => {
          this.setState({
            loading: false,
          });
        });
    }
  }
}

.....

}

谢谢！

Answer 1

如果你不想停止调用 react 中的 setState 方法，请使用小型项目的上下文或 redux 来保持状态和缩减器与功能组件。最好的问候。

Answer 2

正如@Dave Newton 所说，我不认为这是不好的做法。更新状态不会立即触发更新。相反，状态更新经常（但不总是）批量处理然后触发单个更新。

This article 详细解释批处理机制。直到 React 17，状态更新批处理只发生在事件处理程序和 componentDidMount 内。他们给出了一个明确的例子，其中“setState 在 componentDidMount 中被调用，这只会导致一个额外的更新（而不是三个）”。

所以 React 已经做了你想要的。 React 18 将使您能够更好地控制批处理行为，以及更多的自动批处理。我发现 this description 有助于了解即将发生的事情以及 React 17 和更低版本当前的工作方式。

处理多个状态变化的最佳方式

Best Way to Handle Multiple State Changes

reactjs

react-state-management