Question

我有以下功能：

onSelectDepartment = (evt) => {
    const department = evt.target.value;
    const course = null;

    this.setState({ department, course });

    this.props.onChange({ name: 'department', value: department });
    this.props.onChange({ name: 'course', value: course });

    if (department) this.fetch(department);
};

问题是，在调用setState函数后，组件上的render函数会立即执行还是在函数调用完成后执行？

Answer 1

组件上的渲染函数将立即执行或之后执行函数调用完成了吗？

没有人可以保证何时调用render函数，因为setState是异步的，当我们调用setState时意味着我们要求使用新的状态值来更新ui（请求调用render方法），但确切地说在什么时候会发生，我们永远不会知道。

看看react doc says about setState：

setState（）将对组件状态的更改排入队列并告知React   这个组件及其子组件需要重新呈现   更新状态。这是用于更新用户的主要方法   接口响应事件处理程序和服务器响应。

将 setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会   延迟它，然后一次更新几个组件。的阵营   不保证立即应用状态更改。

检查此答案以获取有关setState的异步行为的更多详细信息：Why calling setState method doesn't mutate the state immediately?

Answer 2

如果您希望仅在setState完成后才执行一些代码，则可以使用以下格式。

this.setState({
   flag: true
}, ()=> {
         // any code you want to execute only after the newState has taken effect. 
         })

这是确保所需代码段仅在新状态下运行的方式。

是否在setState之后立即调用render？

2 个答案: