反应 - useState 的 setter 函数能够改变吗?



useState 的 setter 能够在组件生命周期内更改吗?

例如,假设我们有一个将更新状态的useCallback。 如果资源库能够更改,则必须将其设置为回调的依赖项,因为回调使用它。

const [state, setState] = useState(false);
const callback = useCallback(
() => setState(true),
[setState] // <-- 
);

组件生命周期内,资源库函数不会更改

来自 Hooks FAQ:

(setCount 函数的标识保证是稳定的,因此可以安全地省略。

从组件重新挂载时useState更改返回的 setter 函数 (setState),但无论哪种方式,callback都会得到一个新的实例。

使用自定义钩子时,最好在依赖数组([setState])中添加状态资源库。例如,useDispatchreact-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>
);
};

简短的回答是,不,useState() 的设置器无法更改,并且 React 文档明确保证了这一点,甚至提供了证明可以省略设置器的示例。

我建议您不要在useCallback()的依赖项列表中添加任何内容,除非您知道其值可以更改。就像您不会添加从模块导入的任何函数或模块级函数一样,在组件外部定义的常量表达式等,添加这些内容是多余的,并且会使读取处理程序变得更加困难。

综上所述,这都是非常特定于useState()返回的函数的,并且没有理由将该推理线扩展到可能返回函数的每个可能的自定义钩子。原因是 React 文档明确保证了 useState()及其 setter 的稳定行为,但它并没有说任何自定义钩子都必须如此。

React 钩子仍然是一个新的实验性概念,我们需要确保我们互相鼓励,使它们尽可能可读,更重要的是,理解它们实际做了什么以及为什么。如果我们不这样做,它将被视为钩子是一个"坏主意"的证据,这将禁止采用和更广泛地理解它们。那会很糟糕;根据我的经验,他们倾向于为通常与 React 相关的基于类的组件生成更干净的替代方案,更不用说它们可以允许类根本不可能实现的组织技术。

相关内容

  • 没有找到相关文章

最新更新