react钩子可以用来注入组件吗？
React钩子是React 16.8版本引入的新特性，它们是一些用于在函数组件中添加状态和其他React特性的函数。React钩子不能用来直接注入组件，但可以用来管理组件的状态和生命周期。
React钩子的作用是为函数组件添加类似于类组件中this.state和生命周期方法的功能。其中最常用的钩子是useState和useEffect。useState用于在函数组件中添加状态，而useEffect用于在组件渲染后执行副作用操作。
当需要在组件中管理状态时，可以使用useState钩子。它接受一个初始值作为参数，并返回一个状态变量和一个更新该变量的函数。通过调用更新函数，可以改变状态变量的值，并触发组件重新渲染。
例如，以下是一个使用useState钩子管理状态的示例：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}useEffect钩子用于在组件渲染后执行副作用操作，例如订阅数据、添加事件监听器等。它接受一个函数作为参数，在每次组件渲染后都会执行这个函数。
以下是一个使用useEffect钩子订阅数据的示例：
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
};
fetchData();
}, []);
return (
<div>
<p>Data: {data}</p>
</div>
);
}总结：React钩子可以用于在函数组件中管理状态和执行副作用操作，但不能直接用来注入组件。它们提供了更简洁的语法和更好的性能，使得函数组件与类组件的功能差距变小，提升了开发效率和代码可读性。
腾讯云相关产品和产品介绍链接地址：
相关·内容
在这个例子中，我有这个react类：
class MyDiv extends React.component
constructor(){
this.state={sampleState:'hello world'}
}
render(){
return <div>{this.state.sampleState}
}
}
问题是，我是否可以在其中添加React钩子。我知道React-Hooks是React Class风格的替代。但是，如果我希望慢慢迁移到React钩子中，我可以将有用的钩子添加到类中吗？
浏览 4提问于2018-11-19得票数 62
当我下载一个react项目时，默认的App.js是：
function App()
但是，许多YouTube教程使用：
class App extends React.Component {
这两者有什么区别吗？一个是老一点吗？
浏览 0提问于2021-03-22得票数 0
回答已采纳
2回答
我目前正在尝试完成从组件到组件的路由，并传递数据，以便新打开的组件可以使用它。经过几个小时的研究，我偶然发现了一些在我的案例中行不通的解决方案。
在我的应用程序中，我有两页:主页和搜索。应用程序由几个不同的组件层组成，例如: App.js -> imports Home.js -> imports Body.js。App.js通过使用React路由器来定义路由。主页的正文包含一个搜索栏。执行搜索时，应用程序将获取数据，并需要将这些数据传递给将显示数据的搜索页。请参阅以下文件：
App.js
import React from "react";
import {
浏览 6提问于2022-05-25得票数 1
回答已采纳
首先，我想表达对所有聪明的程序员的感谢。在更新了反应性路由器后，我面临着这个问题。在这里，我想提一件事，我是一个“类组件”的情人。
，但这是react.中的基本组件。
import React, { Fragment, Component } from 'react'
import axios from 'axios'
import { Col , Row} from 'react-bootstrap'
import { Link } from 'react-router-dom'
export default class Bl
浏览 4提问于2021-11-11得票数 1
在引入Hooks之前，对我来说，有状态组件和无状态组件之间有明显的区别。然而，有了React Hooks，现在可以安全地说函数组件可以是无状态的还是有状态的，这取决于它是如何使用的(例如，如果使用useState和/或使用are Hooks，则是有状态的)？
此外，如果没有使用状态和/或使用生命周期方法，类组件(扩展到React组件基类)是否可以被视为无状态？
我一直在阅读关于stackoverflow的关于无状态与有状态(类与函数)组件的文章，但在React v16.8之前，许多问题都得到了回答。
浏览 15提问于2019-07-12得票数 0
回答已采纳
1回答
给出了以下反应成分：
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { store, StoreState } from "../../redux/actions";
import { setBackgroundAction } from "../../redux/title.actions";
import "./Loader.scss&#
浏览 2提问于2020-06-22得票数 0
回答已采纳
我是一个学习react的初学者，最近我使用了CRA 4.0.0模板，我注意到我们不再需要导入react，我有一个问题，CRA开发团队是如何实现这个更改的？
浏览 5提问于2020-11-24得票数 0
2回答
如何检测'/‘根路径是否为真？我想设置一些基本代码来隐藏路径'/‘上的导航栏元素，但是我看到的所有东西都需要使用钩子，而我的应用程序是在一个类组件中设置的，所以我不能使用这些钩子。有什么解决方案吗？到目前为止的基本代码。 import React, { Component, Fragment } from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import './tailwind.css'
import { LandingP
浏览 17提问于2020-04-03得票数 2
我有一个react组件，我注意到每次所有者组件呈现时都会重命名它，即使传递的道具没有改变。
这是正常行为吗？我认为只有当所有者发送新的道具时，组件才会更改，即道具有不同的值或内部状态更改。
假设以上所述为真，那么调试哪些更改会导致组件重登有什么诀窍吗？
浏览 1提问于2015-09-08得票数 2
回答已采纳
3回答
我试图使用按钮单击导航到另一个页面，但是如果说是can not read property push of undefined.，则会引发错误。
我对用于功能组件的history进行了一些研究。
如何在类组件中使用历史记录，或者如何使用其他方式(反应方式)来导航其他页面。
这是我的密码。
import React, { Component } from 'react';
class CentralBar extends Component {
constructor(props){
super(props)
this.state = {
浏览 5提问于2021-06-18得票数 1
回答已采纳
import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
每次需要重新渲染时，React
浏览 1提问于2019-11-08得票数 9
BlogDetailsPage.js
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
const BlogDetailsPage = (props) => {
const { id } = useParams();
return <div>Blog Details: {}</div>;
};
const mapStateToProps = (state, props) => {
const
浏览 15提问于2022-05-22得票数 2
回答已采纳
我在组件屏幕中看到navigation属性的警告或错误
export default function FoodMenuList({ navigation }) {}
因为我没有为navigation赋值类型
Binding element 'navigation' implicitly has an 'any'
我试图搜索react导航的导航道具类型，但我找不到
什么是react导航导航道具类型？
或者可能是？
export default function FoodMenuList({ navigation }: {navigation: {navigate
浏览 3提问于2021-03-23得票数 0
1回答
只是想知道我怎么能解决这个问题？我听说过使用consumers，但我认为这不会解决问题，因为我需要在handleChange()函数中调用setSaveEnabled，如果要创建一个消费者，就不能在消费者内部定义这个函数。还有什么别的路我可以走吗？
我在开关组件中的handleChange()争论中调用onchange。
import SaveContext from "../../context/SaveContext";
class EnableSwitch extends Component {
constructor() {
super();
thi
浏览 6提问于2022-03-21得票数 1
回答已采纳
当我导航到嵌套堆栈导航器时，我想显示屏幕/面包屑的路径，我使用的是react导航v5。
浏览 2提问于2020-08-02得票数 2
回答已采纳
我正在做Todo应用程序在React Redux；got，actions，reducer & Addodo组件运行中的调度；但是在显示Todo时却被塞住了：
如果我的initialState=[]如何从存储中检索数据？
商店：
import { createStore } from 'redux';
import rootReducer from '../reducer';
export const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &a
浏览 8提问于2021-07-15得票数 3
回答已采纳
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
浏览 4提问于2020-06-25得票数 1
我有一个useEffect钩子，当组件挂载时执行几个操作，这个useEffect在许多组件中重复，我想知道我能否将这些操作提升到一个自定义钩子中，然后在每个组件中使用它，这会是什么样子？
我的useEffect钩子看起来像：
useEffect(() => {
performOperationOne();
performOperationTwo();
}, []);
我只是创建一个钩子usePerformOperation并添加这个useEffect逻辑，然后将钩子导入到每个组件中，然后将钩子调用添加到另一个组件中：
const triggerOperations = usePe
浏览 5提问于2020-08-20得票数 1
假设我有下面的代码，它有一个useState钩子，它的默认值是一个空数组：
import React, { useState, useEffect } from "react";
export default () => {
const [fooData, setFooData] = useState([]);
useEffect(() => {
// some data fetching from and API happens here... example: setFooData(data);
// this is what I
浏览 34提问于2020-05-22得票数 0
回答已采纳
我计划构建一个react组件库。react组件是UI组件，但应该只实现特定的逻辑。我希望用户能够定义一组用于组成实际组件的原子(基本react组件)。我的主要目标是使该库独立于特定的UI组件库，如MaterialUI、ChakraUI等。
我的想法是使用React.Context来注入这样的组件：
// Button Atom
const Button: FC = ({ children }) => (<button>{children}</button>)
const atoms = { button: Button }
const AtomContext =
浏览 2提问于2021-03-18得票数 2
当我读到有关文档时，我发现有两种方法来实现React组件，基于功能的和基于类的。我知道在响应16.8之前，不可能在功能组件中管理状态，但在那之后就有了React。
问题是，对React似乎有一个限制，它们只能在功能组件中使用。以服务器客户端为例，它需要在接收401时更改isAuthenticated状态。
//client.js
import { useUserDispatch, signOut } from "auth";
export function request(url, args) {
var dispatch = useUserDispatch();
r
浏览 2提问于2020-05-29得票数 6
回答已采纳
我们什么时候应该使用钩子而不是HOC，什么时候应该使用HOC而不是React中的挂钩？
例如，我可以完美地使用一个钩子来管理身份验证状态，然后在组件中使用它……但我也可以有一个HOC，它管理身份验证状态并包装组件以使用它的逻辑。
所以..。有没有什么规则可以让你知道你的兴趣是实现一个点还是钩子？
浏览 1提问于2021-04-04得票数 1
嗨，我是React的新手。我在过去的两周里开始学习React，目前我正在和一个朋友一起做一个使用MERN堆栈的网站。每当我发现需要维护状态时，我都会使用类组件，但我刚刚发现钩子可以模仿React类，并理应减少代码长度，增加可读性，并创建更可维护的代码。所以我想知道，当钩子存在的时候，类组件应该在2020年的React中使用吗？类涵盖了哪些功能组件没有涵盖的用例？
浏览 0提问于2020-06-20得票数 0
6回答
我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用react时，我会得到下面的eslint警告。
React "React.useEffect“不能在回调中调用。必须在React函数组件或自定义React函数中调用。(反应钩/钩规则)
我为什么要收到这个警告？在HoC中使用钩子被认为是不好的做法吗？
最起码的例子：
const Hello = props => <p>Greetings {props.name}</p>;
const Wrapper = Component => props =>
浏览 7提问于2019-05-24得票数 20
回答已采纳
我正在用react-router-dom构建一个应用程序，它通过发出AJAX请求进行初始化，然后使用路由将参数传递给基于类的子组件。我不知道如何同时呈现<Routes>，2)将参数传递给子组件。
我有一个具有功能的父级<RouterApp />组件和一个有条件呈现的组件<MyClassBasedComponent>。
在我最初的尝试中，我设置了如下代码：
function RouterApp() {
const preloadData = usePreloadData(); /*custom hook to make an AJAX call*/
浏览 9提问于2022-04-09得票数 1
回答已采纳
2回答
我能够看到很多线程解释如何使用类组件中的自定义钩子，使用高阶组件，在这种情况下，我们在类组件中使用Hooks输出值。
在使用HOC时，我们可以调用类组件中的钩子吗？因为有时候钩子会接受一些参数。该函数的参数基于类组件的状态。
访问类组件中的钩子值
import React from 'react';
import { withSampleHookHoc } from './withSampleHookHoc';
class SampleClassComponent extends React.Component {
constructor(pr
浏览 5提问于2022-06-10得票数 7
回答已采纳
我可以使用类组件中的功能组件吗？我将调用从类组件中的函数组件中提取的函数。但它带来的错误如下所示。
未处理的拒绝(错误)：无效钩子调用。钩子只能在函数组件的主体内调用。这种情况可能发生的原因如下之一，
因此，我试图在functional中调用它，但在中，即使在functional中，我也得到了与在类组件中调用它时相同的错误。
功能部件
import React, { useEffect } from 'react';
import { UseWalletProvider, useWallet } from 'use-wallet';
import
浏览 30提问于2021-12-16得票数 2
回答已采纳
我正要用React-Redux开始一个项目。对于API引用，有Hooks和connect()。因此，Hooks是连接API的替代。使用钩子或连接到我的React-Redux项目有什么不同？
浏览 0提问于2019-09-20得票数 16
我试图理解在useSelector中使用_bootstrapAsync的区别在于它以这种方式失败了
import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'
import { ActivityIndicator, StatusBar, View, Text } from "react-native";
export default function authLoading({ navigation }) {
浏览 0提问于2019-12-09得票数 0
如何在类组件中使用useNavigate( )React路由器-Dom钩子?
export default class MovieForm extends Form {
state = {
data : {},
error : {},
}
onSubmit(){
// Navigate to Another Component
}
render(){
// rendering the Form UI
}
}
我想在提交表单时导航到另一个组件。
官方React路由器-Dom文档说，我只能在一个功能组件中使用'useNavigate( )
浏览 6提问于2022-07-29得票数 3
回答已采纳
我的目标是在成功响应后将登录重定向到仪表板。然而，我得到了
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
我已经从导入了useHistory，但是不能在LoginPage的主体中初始化它。我想要实现的就是重定向到仪表板页面。
Login.js
import React, { Component } from 'react';
import { useHistory } from "react-router-dom";
export class Login extends Component {
stati
浏览 0提问于2021-08-04得票数 2
我试图使用react导航在两个页面之间移动，Selecttype.js和doctorlogin.js，其中Selecttype.js是initialRouteName，有一个按钮，当有人单击它时，它将重定向到doctorlogin.js。initialRoute正在加载，但我无法使用onclick()事件访问onclick()。
App.js：(路由器)
import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from
浏览 1提问于2020-12-19得票数 0
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
我有单独的文件，在那里我做我的get和post axios调用。所以在这个文件中我有这样的代码
import { useSelector, useDispatch } from "react-redux";
import __ from 'lodash'
import axios from "axios";
import { getPersistedToken } from "src";
import { PROCESS_STATUS } from "src/model";
export
浏览 2提问于2021-09-13得票数 0
回答已采纳
我尝试从URL (使用props.match.params.id)获取id，并将其传递到一个变量中，以便重用它。但是道具还没有定义。我也不知道原因。
有人能看出我做错了什么吗？
import React, { useState, useEffect } from "react";
import axios from "axios";
export default function Recipes() {
const [recipes, setRecipes] = useState([]);
useEffect(() => {
const
浏览 0提问于2020-05-10得票数 2
回答已采纳
我在使用反应性路由器-dom V5，
在组件中，在呈现时，我必须显示一个按钮，该按钮将将我重定向到另一个组件布局：
我已经说过：
import React, { Component } from 'react';
import DashboardLayout from "../../views-layouts/DashboardLayout";
import { BrowserRouter , Switch ,Route , Link } from 'react-router-dom';
import { useHistory } from &#
浏览 2提问于2021-06-08得票数 0
回答已采纳
2回答
将一个React作为另一个组件的支柱传递给它是可以接受的/常见的吗？
还是意味着它们只属于在其中声明的组件？
下面只是一个例子，用来说明我把它传递给
从父组件到子父组件的支持。
import React, { useState } from 'react';
export const Parent = () => {
const [count, setCount] = useState(0);
return <div>
Current count is {count}
<Child setCount={setCount} /
浏览 5提问于2021-03-25得票数 17
回答已采纳
1回答
我正在使用CRA + TS并集成了一个用于依赖注入(Inversify)的自定义钩子。这是我的代码：
// DI Provider
export const InversifyContext = React.createContext<{ container: Container | null }>({ container: null });
export const DiProvider: React.FC<Props> = (props) => {
return <InversifyContext.Provider value={{ contain
浏览 7提问于2021-07-11得票数 1
回答已采纳
我遵循了react教程，下面的模式经常出现在示例代码中：
import { useDispatch} from 'react-redux'
...
const dispatch = useDispatch()
像这样重新声明调度函数的目的是什么？
我查看了react redux代码和(我认为？)钩子工厂返回一个函数。那么，重新声明调度钩子的目的是将其用作函数表达式而不是函数声明以提高性能吗？
为什么useSelector钩子没有这样做呢？
提前感谢
浏览 5提问于2020-08-25得票数 1
回答已采纳
2回答
我想让用户在创建内容之后移动主组件，我不需要使用什么方法。我想用一些类似历史的东西，但没有用。我在用
"react-router-dom"："react"："^17.0.2"，“react”："^17.0.2"，"^6.2.1"，
import React, { Component } from 'react';
class CreateContent extends Component {
constructor(props) {
super(props);
this.sta
浏览 3提问于2022-02-27得票数 1
回答已采纳
我遇到了一个使用useDispatch找不到的函数。据推测，我应该使用react，不幸的是，我的版本是6.0.0，所需的是7.0.0及以上。我想研究一下useDispatch或相关的钩子，以便在一个函数组件中分派一个动作函数。如果我不能升级自己的redux&仍然使用函数组件，我该如何做到这一点？
我的替代方法是使用类组件，但同样，我希望在函数组件中看到这种工作。告诉我还需要什么细节。
这是我的密码。
import React, { useDispatch } from 'react';
import {
Tooltip,
IconButton,
浏览 3提问于2021-01-28得票数 4
回答已采纳
1回答
我以前使用了React路由器DOM v4，如下所示：
componentDidUpdate(prevProps) {
if ((prevProps.match.params[0] !== this.props.match.params[0])) {
...some code
}
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname){
this.loadContent();
}
}
我应
浏览 2提问于2022-07-01得票数 0
回答已采纳
我找了它，我想我违反了钩子的规则，但我不知道是哪一个。你也能帮我解决这个问题吗？Home函数工作正常当我遵循react router ()时，我只是用这个home函数替换它，它成功地工作了
现在，我想要做的是从服务器请求数据并在react js中接收它，这样我就可以成功地显示它。
编辑:作为后端服务器，express的一切都很好
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App exte
浏览 14提问于2021-06-06得票数 0
回答已采纳
2回答
我很难理解如何与redux一起使用redux-路由器。
index.js
[...]
// Map Redux state to component props
function mapStateToProps(state) {
return {
cards: state.cards
};
}
// Connected Component:
let ReduxApp = connect(mapStateToProps)(App);
const routes = <Route component={ReduxApp}>
<Route path=
浏览 0提问于2015-10-20得票数 10
1回答
我为警告框编写了以下钩子：
import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';
export const useAlert = () => {
const [open, setOpen] = React.useState(false);
const [message, setMessage] = React.useState('&
浏览 2提问于2021-04-14得票数 10
我刚开始做出反应，在从API获得响应后，我一直试图重定向到另一个组件。
我试过使用历史、位置和重定向，但是重定向从未发生过。
另外，我在使用上述所有内容时都会得到undefined。
我不确定这是否是因为我的应用程序是在路由器之外定义的，如果这是我仍然无法解决这个问题的原因。
这是我的代码：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
impo
浏览 1提问于2021-03-11得票数 0
我正在为多个项目开发共享库。我需要一种灵活的方法来使用钩子，而不是依赖于实现。因此，我使用作为依赖注入模式。
简化示例：
const DIContext = React.createContext();
// multiple implementations of common hook useConfig
const useReduxConfig = () => useSelector(getConfig);
const useStaticConfig = () => ({foo: 'bar'})
const useFetchConfig = () =>
浏览 7提问于2022-07-28得票数 0
当页面第一次加载时，脚本将被调用，页面将正确显示。当我使用react-router切换页面路由时，javascript不会重新运行，因此我最终得到了一个空的div。下面是我的代码：
import React, { useEffect } from "react";
const ServiceCard = props => {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://assets.ub
浏览 1提问于2020-02-27得票数 0
如果您有一个React组件，它调用一个获取数据的自定义钩子，那么在测试React组件时，模拟这个内部自定义钩子结果的最佳方法是什么？我看到两种主要方法：
1) Jest.mock自定义钩子。这似乎是最推荐的方法，但它似乎需要测试有更多的内部实现细节的知识，以及它可能需要比组件的道具接口所建议的更多的知识(假设使用支持类型或TypeScript)。
2)使用依赖注入方法。将钩子声明为支柱，但默认为真正的挂钩，这样您就不必在呈现组件的任何地方设置它，而是允许使用模拟覆盖测试。下面是一个带有模拟自定义钩子的测试的人为代码框示例：
2需要更多的输入，但似乎更容易用于测试。但是，测试必须了解组件的内部
浏览 3提问于2019-06-07得票数 20
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
