react-hooks相关内容

react-navigation:检测屏幕、标签栏何时被激活/出现/聚焦/模糊

以前,当我想在打开屏幕时执行某些操作时,我将它们放在 componentDidMount 中.例如我可以获取一些数据. 像这样. componentDidMount() {this.updateData();} 但是使用 react-navigation componentDidMount 只在用户第一次打开屏幕时发生一次,如果以后用户再次打开这个页面不会触发 componentDidM ..
发布时间:2021-12-06 22:09:55 其他开发

如何使用 TypeScript 在 React Native 中将 forwardRef 与 FunctionComponent 一起使用

我已经查看了许多文档和示例,但我似乎仍然不太明白如何在 React Native 中将 forwardRef 与带有 TypeScript 的功能组件一起使用.下面是我使用自定义函数创建 MyCustomComponent 的示例,我尝试通过创建引用从父级调用该函数.但是,由于 ref 定义不正确且 null,我显然收到一条错误消息,告诉我该函数不存在.请帮助我了解如何在 React Native ..
发布时间:2021-12-06 21:54:58 前端开发

带有钩子的 React 函数组件与类组件

随着 React 中 hooks 的引入,现在的主要困惑是何时使用带有钩子和类组件的函数组件,因为在钩子的帮助下,即使在函数组件中也可以获得state和部分生命周期钩子.所以,我有以下问题 钩子的真正优势是什么? 何时使用带有钩子的函数组件与类组件? 例如,带有钩子的函数组件不能像类组件那样在性能上有所帮助.他们不能跳过重新渲染,因为他们没有实现 shouldComponentUpd ..
发布时间:2021-12-02 10:45:50 前端开发

从组件中的 useState 多次调用状态更新程序会导致多次重新渲染

我第一次尝试 React 钩子,一切似乎都很好,直到我意识到当我获取数据并更新两个不同的状态变量(数据和加载标志)时,我的组件(数据表)被渲染了两次,甚至尽管对状态更新器的两次调用都发生在同一个函数中.这是我的 api 函数,它将两个变量返回给我的组件. const getData = url =>{const [data, setData] = useState(null);const [lo ..
发布时间:2021-12-02 10:35:06 前端开发

为什么 useState 不会触发重新渲染?

我已经初始化了一个数组状态,当我更新它时,我的组件不会重新渲染.这是一个最小的概念验证: function App() {const [numbers, setNumbers] = React.useState([0, 1, 2, 3]);console.log(“渲染中...");返回 ( {numbers.map(number => ( {数字} ))}{让旧 = 数字;旧 [0] ..
发布时间:2021-12-02 10:30:36 前端开发

如何使用 useEffect 钩子注册事件?

我正在学习关于如何使用钩子注册事件的 Udemy 课程,讲师给出了以下代码: const [userText, setUserText] = useState('');const handleUserKeyPress = 事件 =>{const { key, keyCode } = 事件;if (keyCode === 32 || (keyCode >= 65 && keyCode {win ..
发布时间:2021-12-02 10:30:09 前端开发

反应 useEffect 比较对象

我正在使用 react useEffect 钩子并检查对象是否已更改,然后再次运行钩子. 我的代码看起来像这样. const useExample = (apiOptions) =>{const [数据,更新数据] = useState([]);useEffect(() => {const [data, updateData] = useState([]);doSomethingCool( ..
发布时间:2021-12-02 10:24:51 前端开发

如何在 React Hooks 的对象数组中更新状态“onChange"

我已经检索了使用 useState 存储在对象数组中的数据,然后将数据输出到表单字段中.现在我希望能够在我输入时更新字段(状态). 我见过有人更新数组中属性的状态的例子,但从来没有更新过对象数组中的状态,所以我不知道该怎么做.我已经将对象的索引传递给回调函数,但我不知道如何使用它来更新状态. //示例数据结构常量数据 = [{编号:1,姓名:'约翰',性别:'m'}{编号:2,name: ..
发布时间:2021-12-02 10:24:44 前端开发

`useRef` 和 `createRef` 有什么区别?

当我偶然发现 useRef. 看看他们的例子...... function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () =>{//`current` 指向挂载的文本输入元素inputEl.current.focus();};返回 ( ..
发布时间:2021-12-02 10:23:08 前端开发

React 中的 useState() 是什么?

我目前正在 React 中学习钩子概念并试图理解下面的示例. import { useState } from 'react';函数示例(){//声明一个新的状态变量,我们称之为“count";const [count, setCount] = useState(0);返回 ( 您点击了 {count} 次 setCount(cou ..
发布时间:2021-12-02 10:22:16 前端开发

使用初始状态反应 useState 钩子事件处理程序

我仍然在思考 React 钩子问题,但正在努力找出我在这里做错了什么.我有一个用于调整面板大小的组件,边缘的 onmousedown 我更新状态上的值然后有一个用于 mousemove 的事件处理程序,它使用这个值,但它似乎没有值改变后更新. 这是我的代码: 导出默认备忘录(() => {const [activePoint, setActivePoint] = useState(null ..
发布时间:2021-12-02 10:19:13 前端开发

如何通过 React Hook 使用油门或去抖动?

我正在尝试在功能组件中使用 lodash 中的 throttle 方法,例如: const App = () =>{const [value, setValue] = useState(0)useEffect(throttle(() => console.log(value), 1000), [value])返回 (setValue(value + 1 ..
发布时间:2021-12-02 10:18:41 其他开发

我在哪里可以使用钩子进行 API 调用以进行反应?

基本上我们在 React 类组件中的 componentDidMount() 生命周期方法中调用 API,如下所示 componentDidMount(){//这里我们做API调用并相应地做setState} 但是在 React v16.7.0 引入 hooks 之后,基本上都是函数式组件 我的问题是,我们究竟需要在哪些地方使用钩子在功能组件中进行 API 调用? 我们有类似co ..
发布时间:2021-12-02 10:18:20 前端开发

了解 React Hooks 'exhaustive-deps' lint 规则

我很难理解 'exhaustive-deps' lint 规则. 我已经阅读了这篇文章和这篇文章,但我找不到答案. 这是一个带有 lint 问题的简单 React 组件: const MyCustomComponent = ({onChange}) =>{const [value, setValue] = useState('');useEffect(() => {onChange( ..
发布时间:2021-12-02 10:10:56 其他开发

React hooks - 清除超时和间隔的正确方法

我不明白为什么当我使用 setTimeout 函数时,我的反应组件开始无限的 console.log.一切正常,但 PC 开始滞后.有人说超时功能会改变我的状态和重新渲染组件,设置新的计时器等等.现在我需要了解如何清除它是正确的. 导出默认函数 Loading() {//如果数据获取很慢,1 秒后我会显示一些加载动画const [showLoading, setShowLoading] = us ..
发布时间:2021-12-02 10:10:00 前端开发

如何在 React 的 UseEffect() 中调用异步函数?

我想调用一个异步函数并获取我的 UseEffect 的结果. 我在网上找到的fetch api例子是直接在useEffect函数中制作的.如果我的 URL 发生变化,我必须修补我所有的提取. 当我尝试时,我收到一条错误消息. 这是我的代码. 异步函数 getData(userId) {const data = await axios.get(`http://url/api/da ..
发布时间:2021-12-02 10:08:28 前端开发

我可以在 useEffect 钩子内设置状态吗

假设我有一些依赖于其他状态的状态(例如,当 A 更改时,我希望 B 更改). 在 useEffect 钩子中创建一个观察 A 并设置 B 的钩子是否合适? 效果是否会级联,当我单击按钮时,第一个效果将触发,导致 b 更改,导致第二个效果在下一次渲染之前触发?像这样构建代码是否有任何性能方面的缺点? let MyComponent = props =>{让 [a, setA] = us ..
发布时间:2021-12-02 10:06:56 前端开发