如何在不重复安装和卸载的情况下实现 useEffect？

Question

我想知道是否有更好的方法来实现与以下相同的目标。此代码有效，但它强制此 useEffect 安装和卸载几次，然后才能通过 if 语句，这并不理想。

我有一个如下所示的 useEffect...

useEffect(() => {
    console.log("setNames mounted")
    if (devices !== null && deviceNames !== null){
        setNames(trueDeviceNames(devices.devices, deviceNames.values))
    }
    return ()=> {
        console.log("setNames un-mounted")
    }
}, [devices, deviceNames])

我还有 2 个用于获取数据和 setDevices 和 setDeviceNames 的 useEffects。在他们完成提取并且不再为空之前，我不想运行这个 useEffect。我的代码有效，但肯定有更简洁的方法来实现这一点吗？

Answer 1

useEffect mount和unmount是在[devices, deviceNames]浅比较的一半，所以函数调用是由于设备或者deviceNames的变化引起的。您可能需要考虑这些值来优化您的 useEffects。

在两个设备的 deviceNames 不等于 null 之前，您的 useEffect 不会导致您的组件重新渲染。

注意 对对象的浅比较使用引用检查 ant 每次更改时都会通过 true。

例如

shallowEqual({value: '1'},  {value: 1}) // false
shallowEqual({value: 1},  {value: 1}) // false
shallowEqual({value:'1'},  {value: '1'}) // false

shallowEqual('1', '1') // true
shallowEqual(1, 1}) // true
shallowEqual('1',  1) // false '1' !== 1

所以你可以通过更精确的依赖数组来优化你的 useEffect

useEffect(() => {
    console.log("setNames mounted")
    if (devices !== null && deviceNames !== null){
        setNames(trueDeviceNames(devices.devices, deviceNames.values))
    }
    return ()=> {
        console.log("setNames un-mounted")
    }
}, [devices && devices.devices, deviceNames && deviceNames.values])

或者如果您确定设备和设备名称是可调用的，您可以编写更简洁的版本

[devices.devices, deviceNames.values])

这些只会通过确切的值更改来更新，并防止大量重新渲染

如果您只想在两个值都存在时调用 useEffect，您可以添加如下依赖项

[Boolean(devices) && Boolean(deviceNames)]

这将是错误的，直到两者都具有真实值并且在启动场景中最多调用 useEffect 2 次​​p>