React Hooks记忆成本
是指使用React Hooks编写代码所需的学习和适应成本。React Hooks是React 16.8版本引入的一种新的特性，它允许开发者在无需编写类组件的情况下，使用状态和其他React特性。
React Hooks的记忆成本包括以下几个方面：
- 学习新的概念：使用React Hooks需要理解一些新的概念，如useState、useEffect等。开发者需要花时间学习这些概念及其用法，以便正确地使用React Hooks。
- 适应新的编程模式：相对于传统的类组件，React Hooks使用函数式组件进行开发，这种编程模式与传统的面向对象编程模式有所不同。开发者需要适应这种新的编程模式，理解函数式组件的生命周期、作用域等概念。
- 调试和排错：使用React Hooks编写代码时，可能会遇到一些问题和错误，例如依赖项管理不正确导致的无限循环更新。开发者需要学会调试和排错这些问题，以确保代码的正确性和性能。
尽管React Hooks的记忆成本存在，但它也带来了一些优势和应用场景。React Hooks可以使组件的代码更加简洁、可维护，提高开发效率。它可以解决类组件中的一些问题，如状态共享、副作用处理等。React Hooks还可以与其他React生态系统中的工具和库很好地集成，如Redux、React Router等。
在腾讯云中，相关的产品和服务可以提供支持React Hooks开发的环境和工具。例如，腾讯云函数计算（Serverless）可以用于部署和运行基于React Hooks的应用程序。另外，腾讯云COS（对象存储）可以用于存储和管理React Hooks应用程序中的静态资源。具体的产品介绍和链接地址可以参考腾讯云的官方文档和开发者资源。
相关·内容
1回答
我刚接触React钩子，但我正在尝试使用带有useCallback的useEffect，但得到了臭名昭著的React Hook "useList" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks错误。
此文件包含makeRequest：
function useConnections = () => {
con
浏览 0提问于2019-10-05得票数 18
回答已采纳
多亏了React hooks，我们开始将所有组件作为功能组件进行开发。但是我们错过了PureComponent，它避免了不必要的重新渲染。我们过去常常创建每个扩展PureComponent的组件。
我的问题是:我们是否应该盲目地用React.memo包装所有的功能组件？它会以任何方式减慢或影响应用程序吗？有没有不应该用React.memo包装功能组件的情况？
浏览 4提问于2019-11-10得票数 2
回答已采纳
我不明白为什么我不能在react-modal或react-aria-modal中使用react-table。当我尝试显示模式时，显示react-table的组件不断地重新渲染，最终由于Maximum update depth错误而崩溃。 我已经创建了一个CodeSandbox来说明这个问题。有没有办法在同一棵树中同时使用这两个组件？ 由于某种原因，CodeSandbox不会显示此错误，但在开发过程中，我也会遇到此错误(这些堆栈跟踪似乎来自react-table)： (anonymous function)
/src/hooks/useColumnVisibility.js:207
204
浏览 33提问于2020-07-01得票数 0
回答已采纳
1回答
下面的代码在单击Toggle按钮后抛出错误"Maximum update depth exceeded“。
在从依赖数组中删除allJobs之后，它可以工作，但我想了解为什么会发生这个错误，以及如何更好地编写它。
import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
const JOBS = gql`
query Jobs($cursor: String) {
浏览 9提问于2020-02-09得票数 1
回答已采纳
我正在尝试创建一个简单的示例，该示例遵循页的文档中的React Hooks示例
在没有useCallback的情况下，代码会按照本例中的方式查找：
import React, { useCallback } from "react";
function Test(props) {
function doSomething(a, b) {
console.log("doSomething called");
return a + b;
}
return (
<div>
{Array.from({ le
浏览 1提问于2019-03-01得票数 12
回答已采纳
如何通过React Hooks传递函数？我使用过useCallback，但它显示了一个错误，表明它不是一个函数。
在类组件中，我是这样做的：
hidePopUp = (event) => {
event.preventDefault();
this.setState({
popup: !this.state.popup
})
}
然后我在传递函数：
<Popup hidePopUp={this.hidePopUp}/>
这就是我对Hooks的问题：
const hidePopup = useCallback(
(event) =
浏览 5提问于2019-05-08得票数 0
回答已采纳
1回答
我最近开始使用钩子，并且有一个关于“成员函数”的相对简单的问题。以前，成员函数在react类中的工作方式如下： class App extends React.Component {
constructor(props) {
this.state = { toggle: false };
this.toggle = this.toggle.bind(this);
}
// Member function
toggle() {
this.setState(toggle: !this.state.toggle);
}
render() {
浏览 14提问于2019-02-24得票数 2
在我尝试更好地理解React Hooks的过程中，我遇到了一些我没有预料到的行为。我试图创建一个ref数组，并通过传递给我的<div>'s的onRef函数推送到所述数组。每次组件重新呈现时，数组都会变得越来越大，这可能只是因为它是一个简单的箭头函数，而不是内存。
因此，我添加了useCallback钩子，以确保我不会多次获得相同的ref，但令我惊讶的是，它仍然会在每次重新呈现时调用该函数。在添加一个空数组作为第二个参数后，refs只在每个组件中触发一次。
下面的代码片段演示了这种行为。
const Example = () => {
const _refs =
浏览 26提问于2019-03-06得票数 32
回答已采纳
我是否正确地说，不可能使用 eslint插件与tslint？
我尝试将它添加到我的tslint.json中：
"plugins": ["react-hooks"],
"rules: {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
但是，我在控制台中看到了以下错误：
Could not find implementations for the following rules
浏览 0提问于2019-02-23得票数 2
回答已采纳
我知道我可以禁用该文件或禁用该行，但我现在想要全局地这样做，这样我就不必在每次想要使用useEffect作为componentDidMount()时都写入它。 我试过了： {
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "off"/0, // tried each
"react-hooks/exhaustive-deps"
浏览 369提问于2020-09-20得票数 4
以下是我的代码 import React, { FC, useState,useMemo } from "react";
const FormSearch: FC<{ params: string }> = ({
params
}) => {
const [category, useCategory] = useState<string>("All");
const [search, setSearch] = useState<string>("");
useMemo(() =&g
浏览 31提问于2019-06-07得票数 7
我正在使用react 16.8和eslint - .When -react- hooks 1.6.0插件，我有条件地使用钩子，我希望eslint会警告我。下面是我的配置：
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
浏览 0提问于2019-04-28得票数 15
在react 17中不一定使用
import React from 'react';
但是如果我没有它，所以eslint给了我错误
'React' must be in scope when using JSX react/react-in-jsx-scope
你知道如何修改.eslintrc.js吗？
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
}
浏览 1提问于2020-11-02得票数 20
回答已采纳
我想在我的.eslintrc.json文件中启用对“默认”typescript命名约定的警告。您如何做到这一点？
//package.json
//...
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"easy-peasy": "^5.0.3",
"eslint-plugin-react": "^7.23.2
浏览 30提问于2021-05-28得票数 0
回答已采纳
我试图获得react-hooks规则，但它似乎不适用于我的设置(VSCode，CRA，airbnb，tslint，更漂亮)。
这是我的.eslintrc.json在崩溃前的情况：
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"g
浏览 0提问于2020-04-29得票数 0
回答已采纳
嗨，开发人员，我只是React.js的初学者。我试着把道具从父母传给孩子。
这是app.js文件
import React from "react";
import Hooks from "./components/ReactHooks1";
import Hooks2 from "./components/ReactHooks2";
const App = () => {
return (
<div>
<h1>
浏览 10提问于2022-05-13得票数 2
我正在制作一个表，它从后端获取数据，然后在前端显示。 我正在做的是-> fetch data，useState，使用ReactMemo上的useState，但是我无法让它工作。 当我尝试运行它并打印数据时，它是空白的，当我打印已加载状态时，它是未定义的，但当我控制这些东西时(ti.e，response打印我想要的值) import React,{useEffect,useState} from 'react'
import styled from 'styled-components'
import { useTable } from 'reac
浏览 3提问于2021-07-28得票数 0
我是react的初学者。我正在尝试使用react-hooks将数据库的值从一个文件发送到另一个文件，并得到以下错误，有人能帮助我吗？
第5:41行:不能在顶层调用React Hook "useState“。React Hooks必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks代码中调用：
import React, {useState, useEffect} from "react";
import Axios from "axios";
const [collegeList, setcol
浏览 47提问于2021-05-18得票数 0
我一直在尝试使用React Hooks，所以我避免使用类。在最近的代码审查中，我的一位同事建议我使用类组件而不是使用Hooks的函数组件来重写组件。他的论点是，每次呈现我的组件时，所有的“内部成员函数”都会被重新创建，这可能会导致更差的性能。我的印象是React团队希望人们尽可能地逃课。在一个无状态的函数组件中包含大量的辅助函数真的会导致糟糕的性能吗？ const Foo = () => {
const helper = () => {
doSomething()
}
return (<View />)
}
OR
class Bar
浏览 13提问于2019-05-07得票数 1
刚把react从v16更新到v17，得到了错误，编译失败。 Line 37:9: React Hook "Api.useAuth" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
Line 47:9: React Hook &
浏览 31提问于2021-01-20得票数 0
回答已采纳
当我把它放在我的.eslintrc.json中时，“redux/useSelector-偏好-选择器”的规则没有得到遵守，但是其他的规则是。但是，当我
/* eslint react-redux/useSelector-prefer-selectors: "off" */
在违规文件的顶部，错误会消失。
我的.eslintrc.json文件(在根目录中)：
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
浏览 6提问于2022-02-11得票数 0
回答已采纳
1回答
我在使用usestate()钩子进行状态操作后遇到问题。
无法编译错误：
./src/App.js
Line 6:43: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 14:39: React Hook "useState" is called in functio
浏览 13提问于2020-03-05得票数 0
我有这个组件：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';
const clientes = () => {
const dispatch = u
浏览 1提问于2021-04-03得票数 2
import React, { useState } from "react";
import { Redirect } from "react-router-dom";
function Update(data) {
if(!data.location.state) return <Redirect to="/"/>
const [name, setName] = useState(data.location.state.name);
return (<
浏览 1提问于2021-06-12得票数 0
在React类组件中，这对我来说总是很有效的：
let myValue: string = "Hello World";
<Button onClick={this.handleClick.bind(this, myValue)}></Button>
我在React Hooks文档中找到了这个语法，我很喜欢它，但它并不总是传回值：
<Button onClick={handleClick} value={myValue}></Button>
这种语法可以工作，但很难输入，而且看起来很混乱：
<Button onClick={
浏览 2提问于2019-04-04得票数 9
回答已采纳
我使用的是VSCode，当我将行'react-hooks/exhaustive-deps': 'warn'添加到我的.eslintrc.js中时，会在ESLint输出中得到以下内容：
Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"
这就破坏了所有其他的皮毛。我尝试在我的.es
浏览 4提问于2021-10-15得票数 37
回答已采纳
我有一个带有useEffect钩子的react组件，如下所示：
const LocationEditor: React.FC<SectionEditorProps> = (props) => {
const [section, setSection] = useState({...(props.section as Location)});
useEffect(() => {
props.onChange(section);
}, [section]);
当我运行这个项目时，我得到了这样的警告：
React Hook useEffect has a missin
浏览 2提问于2021-01-13得票数 5
在这里你可以看到我有一个非常简单的react组件，但是eslint规则给了我一个假阳性。 ? 配置详细信息 package.json "devDependencies": {
"eslint": "^5.13.0",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.0.1",
} .eslintrc.js module.exports = {
"en
浏览 19提问于2019-02-13得票数 0
我想让data!.id
错误：
警告禁止非空断言@typescript-eslint/no-null断言
当前配置：
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescr
浏览 2提问于2020-02-20得票数 32
回答已采纳
1回答
如何启用Gatsby中的react钩子/详尽-deps警告？我的问题是关于盖茨比项目，我在反应项目方面没有问题。
我知道eslint-plugin-react-hooks是installed.In --我的.eslintrc文件--我添加了这些更改，但无法工作。
在rules中我添加了"react-hooks/exhaustive-deps": "warn",
在plugins中我添加了"react-hooks",
浏览 4提问于2022-06-20得票数 -1
回答已采纳
我正在尝试使用这个指南来实现一个反应表：
在指南中的某一点上，它说要使用React.useMemo创建数据：
const columns = React.useMemo(
() => [
{
Header: 'Column 1',
accessor: 'col1', // accessor is the "key" in the data
},
{
Header: 'Column 2',
accessor: 'col2',
浏览 2提问于2020-06-19得票数 0
我正在尝试使用react-native中的函数组件来实现agora视频通话，但得到的引擎没有定义错误。我刚接触react hooks，有人能帮我吗？下面是它的代码:声明引擎-> let引擎；
const init = async() => {
if (Platform.OS === 'android') {
// Request required permissions from Android
requestCameraAndAudioPermission().then(() => {
console.log(
浏览 5提问于2021-02-23得票数 1
我正在使用Firebase Cloud Functions托管我的SSR Nextjs应用程序。我可以在firebase云函数上部署Nextjs应用程序，并在没有React Hooks的情况下通过干净的URL访问它，但使用React Hooks时，我会收到一条错误消息：
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1.
浏览 0提问于2019-10-19得票数 9
1回答
如何删除分号规则？
我试过取消半规则，但我不会成功的。当我保存文件时，一旦它删除了分号，lint就会抱怨它丢失了，而当我插入它时，它会再次抱怨说要删除。
我想保留分号
这是我的.prettierrc文件：
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"endOfLine":"auto",
"semi": true
}
浏览 15提问于2022-04-26得票数 3
我安装了@apollo/react-components，以便在react项目中使用ApolloProvider，这会导致以下错误：
找不到./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js模块:无法解析“ -client”
浏览 2提问于2020-06-07得票数 1
回答已采纳
1回答
制作一个视频游戏剪辑发布应用程序。我有一个控制器在后端，这将给我的剪辑的顺序，大多数评论剪辑到最少。我希望在数据正常排序之间进行切换，通过使用select标记(稍后我将添加更多过滤器)从大多数到最少的注释。我希望能够根据select标记onChange中的状态有条件地呈现这两个获取，但是我得到了一个错误。
Line 18:5: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render
浏览 10提问于2022-05-24得票数 0
回答已采纳
我正在尝试将"class component“转换为"react hooks”
这是“类组件”的代码：，它正在工作，但当我们点击“提交按钮”时，会出现一个警告。
下面是我想要转换成"react hooks“的代码：
问题出在下面这一行：
form onSubmit={this.handleSubmit}
我如何使用react-hooks修复它呢？
浏览 1提问于2019-04-30得票数 0
我正在尝试使用jest.spyOn()代替jest.mock进行测试，因为mock的返回值不能进行类型检查。但是，当我使用它时，我得到以下错误：
TypeError: Cannot set property useGame of #<Object> which has only a getter
> 3 | const STATE_SPY = jest.spyOn(hooks, "useGame");
| ^
at ModuleMockerClass.spyOn (node_modules/jest-mo
浏览 27提问于2020-07-30得票数 1
我想要将eslint import/order配置为自定义配置，但我无法在react typescript文件中使用它。 这是我的规则： "import/order":[
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups":[{
"pattern": "react",
浏览 127提问于2021-01-07得票数 2
回答已采纳
我的react应用程序在浏览器中显示以下错误
Failed to compile
./src/pages/home.js
Line 24:30: React Hook "useQuery" is called in function "home" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
浏览 1提问于2020-08-10得票数 1
1回答
你好，我正在尝试在Gatsby中使用chart js。我目前正在学习在react中使用chart js的教程，我不确定问题是不是他使用的是creat-react-app，而不是Gatsby，但错误似乎并没有表明这一点。 首先，我安装了以下软件： npm i --save react-chartjs-2 然后 npm i --save chart.js chartData.js： import React, {useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
浏览 13提问于2020-06-19得票数 0
回答已采纳
错误：
React Hook "useState" is called in function "createFlight" that is
neither a React function component nor a custom React Hook function.
React component names must start with an uppercase letter react-
hooks/rules-of-hooks
我的代码：
import React, {Component} from 'react'
浏览 1提问于2021-11-27得票数 0
我试着用React Hooks让异步等待if条件。下面的代码是在我试图让它成为React Hooks之前的代码：
<code>A0</code>
我试着把它放进React Hooks
<code>A1</code>
我还试图在我的jsx中调用它，如下所示：
<code>A2</code>
它没有工作，我写错了吗？
浏览 11提问于2020-07-30得票数 0
import {useState} from 'react'
const nav = () => {
const [activeNav, setActiveNav] = useState('#')
}
我想建个导航吧。我搞错了，我不知道为什么
React Hook "useState" is called in function "nav" that is neither a React function component nor a custom React Hook function. React compone
浏览 7提问于2022-03-17得票数 1
这个问题与eslint-plugin-react-hooks有关。
当我在CodeSanbox中使用React时，我可以使用props对象的单个属性作为useEffect钩子的依赖项：
示例1：
useEffect(()=>{
console.log('Running useEffect...');
console.log(typeof(props.myProp)); // USING ONLY 'myProp' PROPERTY
},[ ]); // EMPTY ARRAY
示
浏览 2提问于2019-07-31得票数 2
我正在尝试将一个react项目从javascript转换为TypeScript。项目是使用CRA --typescript创建的。我在其中使用了redux-saga。我没有编译错误，但我面临一个运行时错误。 我已经检查了this question和其他几个，我认为我没有违反上面提到的规则。 import { IEventDto } from "dtos/event";
import React, { Dispatch, memo, useEffect } from "react";
import { connect } from "react-redu
浏览 25提问于2019-12-06得票数 1
回答已采纳
1回答
我刚开始使用react组件，在使用react时会遇到这个错误，这是我的代码，有人能帮我吗？这是错误的细节。
这种情况的发生有以下原因之一：
您可能有React的不匹配版本，而呈现程序(如React )您可能违反了Hooks的规则，您可能在同一应用程序中有多个React副本，参见中有关如何调试和修复此问题的提示。
const newParams = "params"
// eslint-disable-next-line react-hooks/rules-of-hooks
const history = useHistory();
// eslint-disable-next
浏览 5提问于2022-01-31得票数 0
回答已采纳
当我在后台收到通知时，我尝试用apollo-hooks和react-native-firebase从服务器获取数据。
我创建了新的函数和registerHeadlessTask。
但它发生在Hooks can only be called inside the body of a function component.上
react-native: 0.59.8 react-native-firebase: 5.5.6 react-apollo-hooks: 0.4.5
我尝试使用react-apollo-hooks获取数据，但出现错误。而且，我得到了另一个上下文的自定义钩子，它也发生了Hoo
浏览 2提问于2019-08-29得票数 1
我正在测试如何使用上下文在反应，但由于某些原因，我不能运行的应用程序，因为我的打字错误，我得到！
代码：
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
function Toolbar(props) {
// The Toolbar component must take
浏览 2提问于2020-02-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
