相关疑难解决方法(0)

当react组件状态发生变化时,将调用render方法.因此,对于任何状态更改,可以在呈现方法主体中执行操作.那么setState回调是否有特定的用例？

以下是两个几乎完成相同任务的React组件。一个是功能；另一个是功能。另一个是一类。每个组件都有一个Animated.Value带有异步侦听器的组件，该侦听器会_foo在更改时进行更新。我需要能够_foo像this._foo在经典组件中那样在功能组件中进行访问。

• FunctionalBar_foo万一有一个以上的情况，不应在全球范围内FunctionalBar。
• FunctionalBar不能包含_foo在功能范围内，因为_foo每次FunctionalBar渲染时都会重新初始化。_foo也不应处于状态，因为_foo更改时组件无需呈现。
• ClassBar不会出现此问题，因为它在组件的整个生命周期中都保持_foo初始化状态this。

如何_foo在FunctionalBar不将其置于全局范围内的情况下保持初始化？

功能实现

import React from 'react';
import { Animated, View } from 'react-native';

var _foo = 0;

function FunctionalBar(props) {

  const foo = new Animated.Value(0);

  _onChangeFoo({ value }) {
    _foo = value;
  }

  function showFoo() {
    let anim = Animated.timing(foo, { toValue: …

从React DOCS：

https://reactjs.org/docs/state-and-lifecycle.html

状态更新可能是异步的

React可以将多个setState（）调用批处理到单个更新中以提高性能。

这是完全合理的。如果您具有类似下面的功能，则在每次setState调用时重新渲染效率很低

const [state1,setState1] = useState(false);
const [state2,setState2] = useState(false);
const [state3,setState3] = useState(false);

function handleClick() {
  setState1(true);
  setState2(true);
  setState3(true);
}

因此，在上述情况下，我期望React将所有3个setState调用分批处理成一个单独的重新渲染。而它确实做到了！

但是我想知道的是：

一旦handleClick完成，正在重新绘制一定会发生的immediatelly handleClick做跑步？我的意思是立即立即开始，就像立即同步一样？

从我构建的这段代码来看，这似乎是对的。完成后，React将同步应用更新（重新渲染）handleClick。如果我认为不对，请纠正我。

请参见下面的代码段：

• 单击速度尽可能快3倍
• handleClick将调用a setState并记录当前props.counter
• 上有一个昂贵的循环App，因此重新渲染将需要很长时间
• 您能够以比React可以重新渲染整个App更快的速度单击
• 但是props.counter，即使您多次快速单击，您也会看到每次都不同，没有任何重复
• 这意味着一旦处理完第二次单击（由于昂贵的循环会花一些时间），React就已经重新渲染了整个内容，并且handleClick已经使用props.counter来自counter更新状态的新值重新创建了该函数。
• 尝试快速单击5次，您会发现行为是相同的。

题

当setState在事件处理程序函数内进行调用时，一旦该处理程序函数完成运行，是否可以确保在处理程序完成后立即（同步）进行重新渲染？

const [state1,setState1] = useState(false);
const [state2,setState2] = useState(false);
const [state3,setState3] = useState(false); …