React.js: Будут ли несколько вызовов асинхронного метода setState всегда перерисовываться после и влиять на производительность? - PullRequest
Новая
       7

React.js: Будут ли несколько вызовов асинхронного метода setState всегда перерисовываться после и влиять на производительность?

1 голос
/ 07 июля 2019

Я видел метод React setState с обратным вызовом, что означает, что обратный вызов будет выполнен после того, как будет гарантировано, что новое состояние было установлено и компонент был перерисован, например, в следующем примере: 

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
}); //new state will be logged to console after it was set and rendered

Теперь, если я не совсем не прав, то же самое можно реализовать с помощью async. Функции: 

async someFunction(){
await this.setState({value: event.target.value});
console.log(this.state.value);
}

Мой вопрос сейчас таков: повлияет ли это на производительность, если я использую несколько вызовов await setState в одной функции? выполнит ли он повторную визуализацию после каждого вызова setState и будет ждать завершения процесса рендеринга, а затем выполнит вызов netSaait setState и т. д. и, возможно, создаст проблемы с производительностью? например: 

async someFunction(){
await this.setState({value: event.target.value});
let result = await someAPICall();
await this.setState({resultApiCall: result});
await.....
}

1 Ответ

3 голосов
/ 07 июля 2019

Да, вы совершенно не правы :) setState не возвращает обещание, поэтому вы не можете просто await выполнить его. Конечно, вы можете превратить обратный вызов в обещание, но вам, вероятно, это не нужно (поскольку вам обычно не нужно ждать повторного отображения).

Повлияет ли это на производительность, если я буду использовать несколько вызовов setState для await в одной функции?

Конечно. Вызов функции дважды примерно в два раза медленнее, чем один раз.

будет ли он перерисовываться после каждого вызова setState и будет ждать завершения процесса рендеринга, а затем [продолжаться]?

Да, если бы вы await обещали, вот так: 

 await new Promise(resolve => this.setState(/*...*/, resolve));

и, возможно, создать проблемы с производительностью?

Нет, вероятно, нет. Вызов setState будет выполнять очень быстро , вам придется вызывать его сотни раз, чтобы повлиять на производительность.

...