什么是派生状态?考虑文本的一种状态,然后考虑大写文本的另一种状态。
function foo() { const [text, settext] = usestate('hello, za warudo!'); const [uppercasetext, setuppercasetext] = usestate(text.touppercase()); useeffect(() => { setuppercasetext(text.touppercase()); }, [text]) ... }
这么说吧,认为有人会这样做真是太疯狂了……对吧?对吗?
是的,这样的例子就可以清楚地表明这是错误的。
假设这是一个昂贵的计算......解决方案是使用 usememo。
function foo() { const [text, settext] = usestate('hello, za warudo!'); const uppercasetext = usememo(() => text.touppercase(), [text]); ... }
我想出了一个很好的思考方式,应该可以更容易知道状态是否应该是“另一个状态”或只是一个计算属性(是否记住,具体取决于情况)。
function Foo({ text = 'hello, za warudo!', uppercaseText = text.toUpperCase(), }) { ... } // Forget react for a moment... // Would you ever call a function like this? const text = 'hello, za warudo!'; Foo({ text, uppercaseText: text.toUpperCase(), });
如果您将这些状态视为“道具”,那么这使它更加明显地成为它应该的样子。
完全忘记 react,只考虑函数:
你会调用一个带有变量的函数,然后调用另一个可以在内部计算的变量吗?