是useState的制定者能够在部件的使用寿命期间的变化?
useState
例如,假设我们有一个useCallback将更新状态的对象。如果setter能够更改,则必须将其设置为回调的依赖项,因为回调使用它。
useCallback
const [state, setState] = useState(false); const callback = useCallback( () => setState(true), [setState] // <-- );
设置器 功能在组件寿命期间不会更改 。
从Hooks常见问题解答:
(保证setCount函数的身份是稳定的,因此可以安全地省略。)
组件重新安装更改后setState返回的setter函数()useState,但无论哪种方式,callback都会获得一个新实例。
setState
callback
最好 在依赖项数组([setState])中添加状态设置器,尽管在大多数情况下不是必需的。
[setState]
例如,当使用 自定义钩子时 ,像您这样useDispatch的人react-redux可能会在没有以下情况的情况下发生不良行为:
useDispatch
react-redux
// Custom hook import { useDispatch } from "react-redux"; export const CounterComponent = ({ value }) => { // Always new instance const dispatch = useDispatch(); // Should be in a callback const incrementCounter = useCallback( () => dispatch({ type: "increment-counter" }), [dispatch] ); return ( <div> <span>{value}</span> // May render unnecessarily due to the changed reference <MyIncrementButton onIncrement={dispatch} /> // In callback, all fine <MyIncrementButton onIncrement={incrementCounter} /> </div> ); };