Javascript 当组件可以在任何时候使用React卸载时，如何管理使用效果中的竞争条件风险？

使用TypeScript 4，React 17（我写这些行时的当前版本）

假设我有以下组件

此组件位于React导航条件堆栈导航器后面。这意味着，如果用户取消连接，该组件将自动卸载，并显示整个UI，而不是显示登录屏幕

这由应用程序根导航器中的以下代码管理：

user ? (
    <RootStack.Screen name="Home" component={HomeScreen} />
) : (
    <RootStack.Screen name="Login" component={LoginScreen} />
)

用户？(
) : (
)

这是一个在主屏幕上打印的组件

我在另一个项目中遇到了一些问题，我的一个朋友建议，当一个组件因竞争条件的风险而卸载时，总是将此卸载条件置于卸载状态

我有一些比赛条件的问题，但在所有的组件上添加un安装到目前为止并没有解决它

我的朋友说的对吗，我将继续将这些组件卸载，或者对于以下组件这样的简单和同步的情况，它是不需要的

interface Props {
    prop1: number
}

const MyFunctionalComponent: FC<Props> = ({prop1 = 0}: Props) => {

    const [stateVariable, setStateVariable] = useState<string>('initial value')

    useEffect(() => {
        let mounted = true
        if (mounted) {
          // We are synchronous, no await there.
          const newStateVariable: string = stringify(prop1)
          setStateVariable(newStateVariable)
        }
        return (): void => {
          mounted = false
        }
    }, [prop1])

    return <Text>{ stateVariable }</Text>
}

界面道具{
prop1：数字
}
常量MyFunctionalComponent:FC=（{prop1=0}:Props）=>{
常量[stateVariable，setStateVariable]=useState（'初始值'）
useffect（（）=>{
设为真
如果（已安装）{
//我们是同步的，没有等待。
const newstate变量：string=stringify（prop1）
setStateVariable（newStateVariable）
}
return（）：void=>{
挂载=错误
}
}，[prop1]）
返回{statevaluate}
}

你对这个有什么用和了解

---

谢谢

您不必使用

useffect

hook's clean-up来执行此操作

useffect

hook在依赖项列表更改时运行。这类似于

React

类组件中的

componentdiddupdate

useEffect(() => {
   // This runs every time the prop1 changes

 return () => {
  // This runs every time the prop1 changes
 };
}, [prop1]);

useEffect(() => {
   // This runs when component mounts
   // see there is no dependency passed for this

 return () => {
  // This runs when component un mounts
  // Do your cleanup here as it is run only on unmount
 };
}, []);

如果依赖项列表只有空数组，那么它的工作方式类似于

React

类组件中的

componentDidMount

useEffect(() => {
   // This runs every time the prop1 changes

 return () => {
  // This runs every time the prop1 changes
 };
}, [prop1]);

useEffect(() => {
   // This runs when component mounts
   // see there is no dependency passed for this

 return () => {
  // This runs when component un mounts
  // Do your cleanup here as it is run only on unmount
 };
}, []);

useffect

hook在其自身的

state

或

props

更改（如果未传递空数组或依赖项列表）时运行所有

useEffect(() => {
   // Runs every time the component renders

});

我想你的案子现在已经清楚了

您不必使用

mounted

变量本身。每当您的

prop1

更改时，

statevaluate

将得到更新

const MyFunctionalComponent: FC<Props> = ({prop1 = 0}: Props) => {

    const [stateVariable, setStateVariable] = useState<string>('initial value')

    useEffect(() => {
       // We are synchronous, no await there.
       const newStateVariable: string = stringify(prop1)

       setStateVariable(newStateVariable)
    }, [prop1])

    return <Text>{ stateVariable }</Text>
}

constMyFunctionalComponent:FC=（{prop1=0}:Props）=>{
常量[stateVariable，setStateVariable]=useState（'初始值'）
useffect（（）=>{
//我们是同步的，没有等待。
const newstate变量：string=stringify（prop1）
setStateVariable（newStateVariable）
}，[prop1]）
返回{statevaluate}
}

某些情况下，您需要使用

cleanup

功能

在

文档

或

窗口

或功能组件所做的任何其他订阅上

删除EventListener

如果您正在使用redux，则发送到清理存储（如果需要）

到

clearInterval

或

clearTimeout

（如果有）

某些情况下不使用

清除功能

设置未安装的功能部件的状态


在这种情况下，比如你的问题（根本不需要）


对于
MyFunctionalComponent
，应该调用而不是
useState（）
和
useEffect（）
：

界面道具{
prop1：数字
}
常量MyFunctionalComponent:FC=（{prop1=0}:Props）=>{
const computedVariable=useMoom（（）=>{
返回字符串化（prop1）
}，[prop1]）
返回{computedVariable}
}

useState（）
只有在需要有状态值时才有必要。在您提供的示例中，
statevaluate
完全依赖于
prop1
，没有任何延迟，因此它实际上根本不需要有状态
useMemo（）
在技术上也是一个有状态的钩子，但它只是为了在输入不变的情况下避免不必要的重复昂贵的计算