因此,我决定使用使用效率来更新我的代码:
const Calculate({data}) => {
const [number, setNumber] = useState(0);
useEffect(() => {
if (data === 'end') {
setNumber(5)
}
}, []);
}
无论我不需要,我宁愿不将状态设置为零。
我可以通过使初始值有条件地解决吗?const Calculate({data}) => {
const [number, setNumber] = useState(data === 'end' ? 5 : 0);
return (...)
}
对此有任何副作用吗?为什么这项工作而不是我最初的尝试?
您可以在您的钩子内使用三元,它可以正常工作。但是,最好以以下方式将其包裹在功能表达式中:
useState
在设置初始状态时,将仅评估上述代码段中的函数表达式。将您的三元运算符包裹在函数表达式中。
提起,您想使用昂贵的计算的结果来设置初始状态,在这种情况下,您可以将其包装在函数表达式中:const [number, setNumber] = useState(() => data === 'end' ? 5 : 0)
这更好,因为
data === 'end' ? 5 : 0
将返回一个函数,该函数只能在初始渲染期间进行一次评估。而如果您不包装const [number, setNumber] = useState(() => expensiveFunction())
在函数表达式内部,则每次组件渲染并阻止代码执行时,都会对其进行评估,直到返回值。
这种方法也称为
() => expensiveFunction()
.
。对此有任何副作用吗?为什么这会起作用而不是我的 原始尝试?
没有没有副作用,这是您处境的方法。在您的情况下它不起作用,因为您违反了钩子的规则之一:没有在循环,条件或嵌套功能中调用钩子。 相反,始终在您的React功能的顶级使用钩子, 在任何提早回报之前。通过遵守此规则,您可以确保 每次组件呈现时,钩子都以相同的顺序调用。 这就是允许正确保留钩子状态的原因 在多个usestate和使用效率调用之间。 (如果您很好奇, 我们将在下面深入解释这一点。) 在本质上,您的
expensiveFunction
呼叫themy自己被包裹在一个条件下,这是一个问题。您的新方法不再是这种情况。
如果数据可以改变...。 您唯一需要确保处理的事情是,传递的数据不是Lazy initialization
如果不存在。
您应该在依赖阵列中具有
useState
以在任何更改时重新启用组件。
null