什么是派生状态？考虑文本的一种状态，然后考虑大写文本的另一种状态。
导出状态
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，只考虑函数：
你会调用一个带有变量的函数，然后调用另一个可以在内部计算的变量吗？
