假设我有以下代码片段（请将其视为伪代码）
Parent.js
const [state,action]=useState(0);
return <View><Child1/><Button onPress={()=>action(1)}/></View>
Child1.js
const [state]=useState(Math.random());
return <Text>{state}</Text>
所以我的问题是当我单击父级中的按钮时 Chil1 状态是否会改变。 在我的本地机器上，它似乎发生了变化。
答案 0 :(得分：1)
useState 的好处是一旦一个组件被挂载，状态值不会在重新渲染时改变，直到更新状态函数被调用，传递一个新的状态值。
因此，即使您的父组件 Button 按下状态更改触发了子组件的重新渲染，由于子组件只是重新渲染而不是卸载/重新安装，Math.random() 的初始状态将保持不变。< /p>
答案 1 :(得分：1)
我不知道确切的场景是什么，但如果你只是设置默认state，state 会像场景 1 一样被记住
场景一
这样即使state重新渲染，Child的{{1}}也不会改变
Parent场景 2
除非你删除它然后重新渲染const Child = () => {
const [state] = useState(Math.random());
return <div>{state}</div>
}
const Parent = () => {
const [, action] = useState(true);
return (
<>
<button onClick={() => action(false)}>Not Change</button>
<Child />
</>
);
}
，即使记住所有Parent，那就是
Child场景 3
可能的话，如果你不使用默认的const Child = () => {
const [state] = useState(Math.random());
return <div>{state}</div>
}
const Parent = () => {
const [state, action] = useState(true);
useEffect(() => {
if (!state) action(true)
}, [state])
return (
<>
<button onClick={() => action(false)}>Change</button>
{state && <Child />}
</>
);
}
，这样每次渲染都会像这样改变
state场景 4
如果我们不想const Child = () => {
return <div>{Math.random()}</div>
}
const Parent = () => {
const [, action] = useState(true);
return (
<>
<button onClick={() => action(prev => !prev)}>Change</button>
<Child />
</>
);
}
重新渲染，我们可以尝试memo来记住它
Child场景 5
然而，当 const Child = memo(() => {
return <div>{Math.random()}</div>
})
有 props 时，也许我们应该调用 useCallback 或 useMemo 来确保 props 的值或内存地址像常量一样“固定”，这样 {{ 1}} 不会重新渲染
（我们不必一直使用 Child 或 Child，没有性能问题时无所谓）
useCallback