何时使用ReactisesetState回调

Question

何时使用ReactisesetState回调当ReactiveComponent状态发生变化时，将调用Render方法。因此，对于任何状态更改，都可以在呈现方法主体中执行操作。那么，对于setState回调是否有特定的用例？

Answer 1

是的，因为setState工作于asynchronous方式，道路。这意味着在打电话后setState这个this.state变量不会立即更改。因此，如果要在设置状态变量的状态后立即执行操作，然后返回结果，则回调将非常有用。

考虑下面的例子

....changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();},validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }},....

以上代码可能无法按预期工作，因为title变量在对其执行验证之前可能没有发生变异。现在，您可能会想知道我们是否可以在render()函数本身，但是如果我们能够在changeTitle函数本身中处理这个问题，它会更好，更干净，因为这会使您的代码更有组织性和可理解性。

在这种情况下，回调很有用。

....changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });},validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }},....

另一个例子是当你想dispatch以及状态改变时的行动。您将希望在回调中执行此操作，而不是在render()因为它将被称为每次重命名发生，因此许多这样的场景是可能的，在那里您将需要回调。

另一个案例是API Call

当您需要根据特定的状态更改进行api调用时，可能会出现这样的情况，如果在呈现方法中这样做，则在每次呈现时都会调用它。onState更改，或者是因为某些支持传递给了Child Component变化。

在这种情况下，您可能希望使用setState callback将更新的状态值传递给api调用

....changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());},APICallFunction: function () {
  // Call API with the updated value}....

Answer 2

在我的脑海中出现的1.用法是api调用，它不应该进入呈现，因为它将运行each状态改变。而api调用应该只在特殊状态变化时执行，而不是在每一，每个渲染。

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)} performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });}

因此，对于任何状态更改，都可以在呈现方法主体中执行操作。

非常糟糕的做法，因为render-方法应该是纯的，它意味着没有操作、状态更改、API调用，应该执行，只需要组合视图并返回它。应该只对某些事件执行操作。呈现不是一个事件，而是componentDidMount例如。