问题标签 [react-hooks]

如何触发useEffect()按钮单击而不是渲染组件？

当我在这样的函数中使用它时，我收到一条错误消息：

Hooks 只能在函数组件内部调用

根据文档：

componentDidUpdate()在更新发生后立即调用。初始渲染不调用此方法。

我们可以使用新的useEffect()钩子来模拟componentDidUpdate()，但它似乎useEffect()在每次渲染后都运行，即使是第一次。如何让它不在初始渲染时运行？

正如您在下面的示例中所见，componentDidUpdateFunction在初始渲染期间打印，但在初始渲染componentDidUpdateClass期间未打印。

使用 React 钩子的 、 和 生命周期钩子componentDidMount的componentDidUpdate等价物是什么 ？componentWillUnmountuseEffect

tldr; 如何模拟componentDidUpdate或以其他方式使用key带有数组的道具来强制重置我的组件？

我正在实现一个组件，它显示一个计时器并在它达到零时执行一个回调。目的是让回调更新对象列表。后一个组件由新的React hooks useState和useEffect.

state包含对计时器启动时间和剩余时间的引用。设置每秒调用一次的effect间隔来更新剩余时间，并检查是否应该调用回调。

该组件不打算重新安排计时器，或者在达到零时保持间隔，它应该执行回调并空闲。为了让计时器刷新，我希望将一个数组传递给key它会导致组件的状态被重置，因此计时器将重新启动。不幸的是key必须与字符串一起使用，因此无论我的数组的引用是否已更改都不会产生任何影响。

我还尝试通过传递我关心的数组来将更改推送到道具，但状态保持不变，因此间隔没有重置。

观察数组中的浅变化以强制仅使用新的钩子 API 更新状态的首选方法是什么？

尝试使用key：

尝试与道具更改一起使用：

listOfObjects指的是一个对象数组，其中对象本身不一定会改变，所以该数组应该与!==. 通常，该值将来自Redux，其中该操作updateListOfObjects会导致数组重新初始化，如下所示newListOfObjects = [...listOfObjects]：

我正在尝试带有 react 16.7 钩子的功能组件，出现错误：

src/components/页脚/index.js

包.json

我应该怎么办？

我创建了一个简单的示例https://codesandbox.io/s/4zq852m7j0。

如您所见，我正在从远程源获取一些数据。我想将返回值用作我的文本字段中的值。

但是，使用函数内部的值useState不起作用。我认为useState仅在第一次渲染时使用默认值。首次渲染时，显然没有设置该值，因为它是异步的。文本字段应该有值bar，但它是空的。

从远程获取值后，我希望能够在本地更改它。

有任何想法吗？

我正在玩钩子，我正在尝试执行以下操作：

这将失败，因为current它是 null，因为组件还没有重新渲染，并且输入字段还没有渲染（因此还不能被聚焦）。

这样做的正确方法是什么？我可以使用usePreviousReact Hooks FAQ 中提出的钩子，但这似乎是一个痛苦的解决方法。

有不同的方法吗？

我正在尝试以下useEffect示例：

我在控制台中收到此警告。但是我认为清理对于异步调用是可选的。我不确定为什么会收到此警告。以链接沙箱为例。https://codesandbox.io/s/24rj871r0p

下面的代码演示了我如何尝试使用反应钩子实现反应的上下文，这里的想法是我将能够轻松地从任何子组件访问上下文

首先，我创建了一个导出上下文和提供程序的文件。

这可行，但我在value提供者下方出现错误，可能是因为我在其中添加了操作，因此问题是，有没有办法让我保留所有类型的内容并仍然能够导出上下文和提供者？

我相信我也不能createContext放入我的主要功能，因为它会一直重新创建它？

[ts] 类型 '{ authState: { email: string; 密码：字符串；}; authActions: { setEmail: (email: string) => void; 设置密码：（密码：字符串）=> 无效；}; }' 不可分配给类型 '{ email: string; 密码：字符串；}'。对象字面量只能指定已知属性，并且 'authState' 不存在于类型 '{ email: string; 密码：字符串；}'。[2322] index.d.ts(266, 9)：预期类型来自属性“值”，该属性在此处声明类型为“IntrinsicAttributes & ProviderProps<{ email: string; 密码：字符串；}>' (property) authState: { email: string; 密码：字符串；}

我目前对新的 react hooks API 的用例以及你可以用它做什么感到非常惊讶。

实验时出现的一个问题是，总是创建一个新的处理函数只是为了在使用useCallback.

考虑这个例子：

尽管我将处理程序包装到 auseCallback中以避免每次它呈现内联箭头函数时传递一个新的处理程序，但仍然必须创建只是在大多数情况下被丢弃。

如果我只渲染几个组件，可能没什么大不了的。但是，如果我这样做 1000 次，对性能的影响有多大？是否存在明显的性能损失？什么是避免它的方法？可能是一个静态处理程序工厂，仅在必须创建新处理程序时才被调用？