React Hooks:为什么为useEffect和useCallback分别省略了create和callback是不好的？
React Hooks是React 16.8版本引入的一种新的特性，它可以让我们在函数组件中使用状态和其他React特性，而无需编写类组件。在React Hooks中，有两个常用的Hook，分别是useEffect和useCallback。
- useEffect:
- 概念：useEffect是React提供的一个Hook，用于在函数组件中执行副作用操作，比如数据获取、订阅事件、手动修改DOM等。
- 分类：useEffect属于React的副作用Hook。
- 优势：使用useEffect可以将副作用操作与组件逻辑分离，使代码更加清晰和易于维护。它还可以处理组件的生命周期，比如在组件挂载、更新或卸载时执行相应的操作。
- 应用场景：useEffect适用于需要在组件渲染后执行一些异步或副作用操作的场景，比如发送网络请求、订阅事件、操作本地存储等。
- 腾讯云相关产品：腾讯云提供了云函数SCF（Serverless Cloud Function）服务，可以用于执行无服务器函数，可以与React Hooks中的useEffect结合使用。详情请参考腾讯云SCF产品介绍：腾讯云SCF
- useCallback:
- 概念：useCallback是React提供的一个Hook，用于在函数组件中缓存回调函数，避免在每次渲染时创建新的回调函数实例。
- 分类：useCallback属于React的优化Hook。
- 优势：使用useCallback可以提高性能，特别是在将回调函数作为props传递给子组件时，可以避免子组件不必要的重新渲染。
- 应用场景：useCallback适用于需要将回调函数作为props传递给子组件，并且希望避免子组件不必要的重新渲染的场景。
- 腾讯云相关产品：腾讯云提供了云函数SCF（Serverless Cloud Function）服务，可以用于执行无服务器函数，可以与React Hooks中的useCallback结合使用。详情请参考腾讯云SCF产品介绍：腾讯云SCF
为什么省略了create和callback不好呢？这是因为React Hooks的设计初衷是为了简化函数组件的编写和理解，提高开发效率。省略了create和callback这些冗余的词汇，可以使代码更加简洁和易读。同时，React Hooks的命名规范也是根据其功能和用途来命名的，省略了冗余的词汇后，可以更直观地表达其作用。因此，省略了create和callback是为了提高代码的可读性和简洁性，并不会对使用造成负面影响。
相关·内容
我在读丹·阿布拉莫夫和Hooks docs写的“"A complete Guide to useEffect"” 在文章中，Dan给出了下面的例子： function SearchResults(){ constquery=' + query;
浏览 10提问于2019-04-24得票数 0
回答已采纳
1回答
我刚接触React钩子，但我正在尝试使用带有useCallback的useEffect，但得到了臭名昭著的React Hook "useList" cannot be called inside a callbackReact Hooks must be called in a React function component or a custom React Hook fun
浏览 0提问于2019-10-05得票数 18
回答已采纳
我需要一些关于exhaustive-deps规则的解释。我想我漏掉了什么。指出：
// or remove the dependency array r
浏览 1提问于2021-07-20得票数 2
根据下面的代码，每当inView为true时，我都需要调用一个函数，但是使用useEffect和useCallback列出依赖项时，我会导致无限循环。我设法避免它的唯一方法是不列出依赖项，但我得到了一个警告，我必须列出它们。我只尝试了useEffect，但结果是一样的，列出了依赖项，我在循环中遇到了问题。代码如下： import { useEffect, useCallback } from &qu
浏览 45提问于2020-09-28得票数 1
回答已采纳
我正在将基于类的组件中的生命周期方法替换为useEffect钩子，因为我对函数组件感兴趣。我不确定我是否正确地使用了useEffect。我们不能在useEffect中指向以前的状态或道具，我如何处理这些与useEffect this.cleanUp(); } else{
// t
浏览 5提问于2020-06-30得票数 3
回答已采纳
1回答
我有一个场景，我被迫调用触发器方法来显示来自两个不同地方的模式，一个是使用热键组合，另一个是单击工具栏按钮。import { useState, useCallback, useEffect } from "react" const [isShown, setIsShown] = use
浏览 6提问于2022-06-22得票数 0
7回答
我正在检查是否卸载了组件，以避免调用状态更新函数。
useEffect(() => { return () => {
use
浏览 17提问于2019-11-21得票数 18
我的应用请求许可才能使用定位服务。在ios上，他们可以选择直接返回应用程序。在Android上，我认为他们可以做类似的事情。有没有办法检测是否已返回应用程序，以便我可以再次检查他们的权限？我试过使用React导航的钩子： React.useCallback(() => {
console.log("navigated")return () =>
浏览 28提问于2020-08-05得票数 0
回答已采纳
我有一个名为fetchData的函数。它的目的是基于api端点参数检索数据，并基于间隔参数更新数据。import { useState, useEffect } from 'react';
const[jsonData, setJsonData] = useState(null);
const inn
浏览 48提问于2021-04-09得票数 1
解决了，我相信下面的两个效果应该有同样的效果。但是，为什么在第二种情况下，埃林特规则不抱怨呢？ void someProp;
useEffect(()=> doSomething(), [doSomething]); //
浏览 10提问于2020-05-29得票数 0
回答已采纳
TL；博士function useCallback(callback, deps) {在编写/hooks/contexts时，可以直接编写函数： // ...…或使用useCallback这是一种额外的<
浏览 0提问于2020-06-27得票数 5
在进行代码评审时，我遇到了一个自定义钩子： const ref = useRef() ref.current = func return useCallback((...args) => {
浏览 0提问于2021-01-20得票数 0
回答已采纳
我使用的是带有钩子的功能组件。我需要从一个孩子中更新父状态。我在家长中使用道具功能。所有工作正常，除了我的道具功能是得到以前的状态，而不是当前的状态。我的道具函数在useState挂钩设置当前状态之前执行。在useState调用之后，我如何才能等待回调函数的执行。我正在从基于类的组件中寻找类似于setState(状态回调)之类的东西。下面是代码片段：
function Parent
浏览 3提问于2019-03-02得票数 204
回答已采纳
1回答
最近，我使用了React钩子来处理大量的表单字段，这是从数组中迭代出来的。我的目标是防止在没有更改的字段组件上进行不必要的重呈现。我用这个代码实现了它，但仍然存在一些问题：
exportfunction Multip
浏览 1提问于2020-06-12得票数 1
回答已采纳
我使用的是useInterval钩子，由的Dan编写function Counter() { // Your
浏览 0提问于2019-07-09得票数 3
回答已采纳
我正在使用回调钩子来停止渲染组件，这些组件在每个渲染中都是由于作为道具传递的函数的更改而更改的。在这里，我向incrementSalary和incrementAge添加了回调钩子。Either exclude it or remove the dependency array react-hooks/exhaustive-deps
Line 15:5: ReactEither exclude it or remove the dependency
浏览 133提问于2021-02-08得票数 0
1回答
我想阻止axios的请求。我使用useInterval(custom hooks)(我引用了一个网站)请求api。所以我用useState来停止它，当我设定大约1000‘s的时间间隔时，它就完全停止了。但是，当我将间隔设置为100‘t时，就无法停止api请求。3秒后就停止了。此外，我还在chrome上查看了当所有请求的状态更改为200时，它就停止了</em
浏览 4提问于2022-03-10得票数 0
回答已采纳
2回答
我有一个有多个选项的react组件。我给每个选择都关联了一个快捷方式。为此，我使用了"react-hotkeys-hook“。 因此，第一个答案有快捷方式1，第二个答案有答案2，依此类推。问题是，在回答之后，我更新视图以显示另一个问题，该问题可以有不同数量的选择。这会使钩子爆炸，因为不同渲染的钩子数量不同。// sort of pseudo-code
for(let i=1; i <
浏览 10提问于2020-07-16得票数 1
回答已采纳
我有一个从topics派生出来的列表useSelector，我在回调函数updateXXX中使用它，并将它添加到依赖关系的useCallback数组中，不幸的是，它会导致无限的呈现。const topics = useSelector(...);
const filteredTopics = topics.filter(...);AFAIK，
浏览 4提问于2022-03-10得票数 0
2回答
随着钩子的引入，我是否可以将其放在钩子中并跨组件共享，从而省去在每个组件中编写相同的逻辑？ 我在一个组件中实现了它一次，如下所示。wrapperRef.current.contains(event.target as Node) setIsDropdownVisible(false); };
useEffect
浏览 13提问于2019-02-07得票数 13
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
