React在功能组件内的组件的每次更新时调用构造函数
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，将用户界面拆分成独立的可复用组件。在React中，组件可以分为两种类型：类组件和函数组件。
对于类组件，每当组件的状态或属性发生变化时，React会自动调用组件的构造函数。构造函数是类组件的一部分，它在组件实例化时被调用，并且只会被调用一次。构造函数通常用于初始化组件的状态和绑定事件处理程序。
然而，在React的函数组件中，并没有构造函数的概念。函数组件是一种更简洁的组件形式，它接收一个props对象作为参数，并返回一个React元素。函数组件没有内部状态，因此不需要构造函数来初始化状态。
对于函数组件内的组件更新，React并不会调用构造函数，因为函数组件没有构造函数。相反，React会根据组件的props和状态的变化，重新调用函数组件本身，并生成新的React元素。然后，React会将新的元素与之前的元素进行比较，并更新DOM以反映组件的变化。
总结起来，React在功能组件内的组件的每次更新时并不会调用构造函数，因为函数组件没有构造函数的概念。React会根据组件的props和状态的变化，重新调用函数组件本身，并生成新的React元素来更新DOM。
腾讯云相关产品和产品介绍链接地址：
相关·内容
上下文
我已经构建了一款应用程序，可以在react中将outlook帐户中的邮件呈现到网页中。我正在尝试将一个“已查看”的布尔值设置为redux store提供的类属性，并在组件中对其进行更改(该更改必须影响redux才能管理整个应用程序的更改)
问题
正如你可能在下面的代码中看到的，我用redux reducer中的给定信息启动了构造函数中的实例变量，我已经用一堆控制台日志测试了动作创建器是否成功地更新了存储上的信息，它确实做到了。我的问题是我的实例变量(this.viewed)没有使用redux的reducer信息进行更新(实际上是更新)
import React from "re
浏览 10提问于2020-05-19得票数 0
回答已采纳
我这里有一个简单的代码
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [number, setNumber] = useState(0);
function chaneNumber() {
setNumber(state => state + 1);
}
console.log("here");
return (
<div classNa
浏览 1提问于2020-05-03得票数 13
回答已采纳
我是新学习react原生的，有一件事我仍然不明白，也不知道‘函数App() { return() }’和‘类App扩展组件{ render()；return(...)}’之间的区别。我知道在第一个中我使用了“useState”，在第二个中我使用了“state”，但可以肯定的是，还有更多的差异，我似乎找不到一个好的答案。我的意思不仅仅是“App.js”，而是每个js文件。我看了很多教程，每次他随意使用其中的一个，我都找不到一个规则来知道什么时候使用每个教程，那么它们之间有什么区别，什么时候使用它们？
浏览 6提问于2020-07-25得票数 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
我有一个简单的反应应用程序，其中包括一个websocket。现在我想知道为什么每次打开react应用程序时，websocket连接总是被打开两次。
经过一些调查，我发现它实际上是我的根组件'App‘，它是以某种方式两次构建的。我在我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker fro
浏览 3提问于2020-05-01得票数 0
回答已采纳
当用户发表评论时，我正在尝试触发重新渲染。所以我使用了setState。似乎不会重新渲染。我想在每次处理提交时重新渲染。
我只是对它进行了编辑，所以它不是一个承诺；这是我的错误。但是它似乎不能重新渲染。
这是this.state.comments所在的容器。它只是预先写好的。这样我就不用在构造函数中做了。
import React from 'react';
class CreateForm extends React.Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2020-01-18得票数 0
1回答
我有一个主react组件(整个页面)，其中包含其他几个UI项。其中一个UI项是OpenLayers映射。另一个组件是一个文本字段，其中包含当前鼠标指针位置的纬度和经度。 我希望每当鼠标指针在地图上移动时，文本字段都会更新。在我的代码的当前状态下，这是可行的。 问题是，每次鼠标移动时，我都会更新纬度/经度的react状态值(在文本字段中按预期呈现)，地图会重新呈现。这看起来很可怕，因为地图每次开始加载地图瓦片时都会闪烁。 所以我有鼠标的纬度/经度位置，但是我不能让地图不闪烁/卡顿/闪光。 有没有一种方法可以从地图组件获取鼠标事件，并将其发送到同一屏幕上的另一个组件，而不会导致render方法每
浏览 30提问于2021-07-13得票数 3
回答已采纳
class Clock extends React.Component {
render() {
return (
<div>
<MyComponent/>
</div>
);
}
}
假设此组件重新呈现。它会在每次渲染时创建一个新的MyComponent实例吗？
浏览 5提问于2018-08-05得票数 2
回答已采纳
// parent class
export default class HomeScreen extends React.Component {
constructor(props){
super(props);
this.state = {
password: '',
username:'',
session: 'mani',
};
}
authentication(){
const self = this;
axios.post('/api/u
浏览 2提问于2018-03-28得票数 4
回答已采纳
开门见山，在基于react类的组件中，prop对象从何而来？
我正在遵循官方的React tic-tac-toe游戏教程。
首先，当我查看react Component类(我们在创建React组件时对其进行扩展)的代码时，我观察到该函数有3个参数Component(props, context, updater)，但我不明白为什么在调用props ()的情况下只像super(props)这样传递props。不是也应该为context和updater传递值吗？为什么代码在不调用super的情况下运行时没有错误？
import React, { Component } from "reac
浏览 0提问于2019-06-23得票数 2
4回答
我试图通过这样做来调用useEffect()中的函数：
const myComponent = () => {
useEffect(() => {
const aFunc = () => {
console.log("function called")
}
}, [])
return (
<button onClick={() => aFunc()} />
)
}
如您所见，每次单击<button>时，我都想调用aFunc()函数。
我如何在aFunc之外调用useEffect
浏览 1提问于2021-03-08得票数 0
回答已采纳
我不太明白什么时候“挂载”的反应，什么时候触发useEffect和清理功能。
在下面的例子中。看来useToggle挂钩是“保税”(正确的术语？)对于App，每次变量isOn被更新时，绑定的App组件都会被重新呈现。但是，清理函数也会被调用。我试着比较它以响应类组件的生命周期。
如果我的理解是错误的，请纠正我。
参考:来自的编辑图表
生命周期的useEffect(updateFunc => cleanupFunc, [dependency array])
const { useReducer, useEffect } = React;
// Purposefully move
浏览 4提问于2020-10-16得票数 2
回答已采纳
2回答
很棒，但是我遇到了有条件呈现组件的问题。
我有一个刷新图标，它只显示props.refreshImages是true时
Topbar.js
import React from 'react'
export default function Topbar (props) {
return (
<div>
{props.refreshImages &&
<i data-tip="Refresh the images" className="fas fa-sync-alt" &g
浏览 2提问于2020-05-27得票数 9
回答已采纳
3回答
在javascript类constructor()中获取数据是一种好的做法吗？
例如，在react类constructor()中，我找到的每个教程都在componendDidMount()中获取数据，但没有人质问为什么我们不能在constructor()中这样做。
这个问题与javascript类有关，不仅仅是react。
浏览 3提问于2019-03-15得票数 13
我找了它，我想我违反了钩子的规则，但我不知道是哪一个。你也能帮我解决这个问题吗？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
回答已采纳
我们过去常常在代码中使用const，并将其视为只读值。但React钩子的情况并非如此。举个例子：
const [count, setCount] = useState(0);
count是一个只读变量，但是在代码中，我们可以使用setCount函数，每次我单击按钮并运行setCount时，count都会发生变化。有人能解释一下吗？
浏览 0提问于2020-10-01得票数 2
2回答
我已经创建了一个类组件，如代码中所示。
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import Home from "./components/home";
ReactDOM.render(
<React.StrictMode>
<Home /&
浏览 1提问于2020-05-10得票数 2
回答已采纳
1回答
所以我有一个名为Context.js的文件，如下所示：
const AppContext = createContext({
// ... scheme colour palette
color1: '#ADBDDB',
color2: '#7F8EB2',
color3: '#546287',
color4: '#384366',
// ... grey colour palette
grey1: '#FFFFFF',
grey7: '#2A3033',
浏览 4提问于2021-06-09得票数 0
我有密码
import React,{Component} from "react"
import {connect} from "react-redux"
class Aside extends Component{
renderAside(){
const asideItems = this.props.cart
console.log(asideItems) // Not Working never
return asideItems.map((item, key) =>{
return(
&l
浏览 3提问于2020-12-14得票数 0
回答已采纳
1回答
因此，我开始了这个新项目的创建-反应-应用程序(它运行的Reactiv.16.13.1)。我将基本App组件重写为一个类，发现当组件是一个函数时，如下所示：
function App() {
console.log('App (function)');
return 'App (function)';
}
浏览器控制台打印出
App (function)
太好了，谢谢！但是，如果相同的App组件编写为
class App extends React.Component {
render() {
console.log('App (cl
浏览 0提问于2020-04-02得票数 8
回答已采纳
1回答
我试着把角和React.js结合起来。我有一个工作示例项目，我看到了几种将角和React.js结合在一起的方法。我看到的方法之一是在链接函数中创建一个指令并创建function组件。例如，在项目的第一部分中，生成我正在使用的React版本(红色)
.directive('reactElementRepeater', function() {
return {
link: function(scope, element) {
var update_react = function(oldVal, newVal){ //Called every
浏览 3提问于2014-06-25得票数 4
回答已采纳
3回答
我有以下父/子组件。我需要滚动到顶部，一旦子组件一开始呈现。
import React, {Component} from 'react';
import Child from "./Child";
class Parent extends Component {
render() {
return (
<div>
<div ref={topDiv => {
this.topDiv = topDiv;
}}/>
<Child
浏览 0提问于2019-04-03得票数 1
回答已采纳
1回答
我正在尝试防止在使用自定义钩子数小时时重新呈现-.，需要一些帮助；
(不过，我不知道是否应该将这个自定义钩子称为自定义钩子或函数。)
我有一个MessageList组件，它显示用WithAvatarHeader包装的SimpleMessage。下面是我的分析结果：
每次我向列表中添加一条消息时，都会再次呈现所有消息。
当我只在SimpleMessage中使用MessageList时，这种情况不会发生。
有办法备忘(WithAvatarHeader)吗？
MessageList：
import React from "react";
import SimpleMessage
浏览 1提问于2020-01-14得票数 0
回答已采纳
不太流利的反应钩，使用了大量的类组件之前，希望你会原谅。
当前的代码导致无限重呈现，我想我理解为什么-整个函数体在重呈现时被调用。
const NavTabs = () => {
const classes = useStyles();
const [categories, setCategories] = React.useState();
const axiosPromise = getRequest(consts.categoriesURL);
axiosPromise.then(data => {
setCategories(data.value
浏览 7提问于2020-04-29得票数 3
回答已采纳
4回答
我在试着弄清楚为什么我不能把我的剩余状态定义为我的本地状态。基本上，我尝试给displayed this.props.tournaments的值，这样我就可以操纵状态了。但是每次我定义它和console.log(this.state.displayed) (如renderList函数中所示)时，它都会产生一个空数组，但是如果我console.log(this.props.tournaments)，我从api中得到了我需要的数据，有什么想法吗？
下面是我正在做的工作：
主要组件
import { connect } from 'react-redux';
import axios
浏览 4提问于2020-06-20得票数 0
我开发谷歌signIn的反应。学习如何实现signIn和学习任何reactjs的概念。
我得到\\//错误：
import {useState, useCallback} from 'react'
export const useGLogIn = props => {
const [isLoggedIn, setLogIn] = useState(false)
const login = useCallback(async ({
onSuccess, onFailure, onFinish
}) => {
console.log(on
浏览 5提问于2020-05-13得票数 0
回答已采纳
import React,{ useEffect, useState} from 'react';
import { useLocation } from 'react-router-dom';
import ReactPlayer from 'react-player';
import { useResultContext } from '../contexts/ResultContextProvider';
export const Results = () => {
const {getResults, res
浏览 8提问于2022-02-26得票数 -1
回答已采纳
我试图用状态中已经存在的数据呈现一个组件(从redux- state.login.user中提供)，其中的数据是持久化的(我可以在被调用的mapStateToProps函数的console.log中看到它，并返回dataObject : state.login.user，但是dataObject没有被更新，因为componentWillReceiveProps没有被调用。
你能告诉我我哪里做错了吗？
import React from 'react'
import { connect } from 'react-redux'
import { ScrollVie
浏览 0提问于2017-06-21得票数 0
我的理解肯定是有些根本的错误。我有一个react原生应用程序，它应该显示多个模式弹出窗口，我已经实现了一个渲染函数堆栈。 render() {
if (this.state.popupStack.length > 0) {
return this.state.popupStack[0]()
} else {
return null
}
} 例如，为了在堆栈上显示某些内容，我这样做： this.state.popupStack.push( () => <SomeComponent thing={propA} /
浏览 37提问于2020-07-28得票数 1
2回答
我正在浏览React ，并看到了这个示例，在这个示例中，它们展示了什么是不纯的组件。
我无法理解的是，在第5行中，我们将guest变量递增1，但是为什么每次调用<Cup />函数时它都会增加2，因为它是在右边呈现的？
浏览 29提问于2022-07-26得票数 0
回答已采纳
我读了React的文档和
当组件接收新的道具时调用。对于初始呈现，不调用此方法。
但是在后面的链接中，已经解释过即使道具是相同的，这个方法也会被调用，因为道具可以是引用，而这些引用中的数据可能是不同的。
所以，我的问题是，我们每次收到新道具时，是否都会这样做。
浏览 2提问于2016-03-15得票数 2
回答已采纳
1回答
我使用的反应和反应路由器的SPA，有一个导航。每次切换导航项时，路由器都会调用react组件‘构造函数’。以下是相关代码：
class Home extends React.Component {
constructor(props) {
super(props);
console.log('component constructed!');
this.state = {
counter: 0
}
setInterval(() => this.setState(
浏览 2提问于2016-11-24得票数 4
回答已采纳
我是新来的反应。我只是查看文档。
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
function tryConvert(temperature, convert) {
const input = parseFl
浏览 2提问于2020-12-05得票数 2
我觉得这是一个愚蠢的问题，反映了我对javascript的有限理解。
在中，function Component的定义没有提到作为反应的核心概念的state。
这是因为react.component没有state属性，而且如果用户在本地定义了state属性，那么只有react.component的子扩展具有state属性吗？
或者state是在其他地方定义的(在源代码中)？我完全想不起来了？
我已经浏览了许多关于state的博客、教程和解释，但是找不到这个问题的答案。
浏览 1提问于2018-02-03得票数 2
2回答
我的第一次反应应用程序有问题。实际上，我有一个组件层次结构(我正在创建一个多媒体电影库)，在单击一个选项卡(由Movie表示)时，必须显示单个电影(SingleMovieDetails)的特定描述。问题是，DOM只在第一次单击时更新，然后即使SingleMovieDetails道具发生变化，DOM仍然锁定在第一个呈现的电影上。
这是我迄今写的代码..。
//Movie component
import React from "react";
import styles from "./Movie.module.scss";
import PropTypes fr
浏览 0提问于2019-04-02得票数 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创建一个简单的ToDo应用程序，下面是我的app.js文件：
import React from 'react';
import { render } from 'react-dom'
import ToDoList from './toDoList'
import CreateToDos from './createToDos'
import _ from 'lodash'
let toDos = [
{
task: 'task 1',
浏览 7提问于2017-01-18得票数 1
回答已采纳
5回答
我正在为app状态使用React，我想知道如何使用支持来初始化功能组件状态？useState钩子医生说了些明确的话，
const [count, setCount] = useState(0);
我希望通过传递给组件的支持值初始化该0值。年纪大的，
import React from 'react';
export default class Sym extends React.Component{
constructor(props){
super(props);
this.state = {
sym : [
浏览 5提问于2019-12-11得票数 17
回答已采纳
2回答
import React, { useState } from "react";
import useInterval from "use-interval";
const useOwnHook = () => {
const arr = [...Array(100)].map((_, index) => index);
return {
arr
};
};
const Component = ({ count }) => {
const { arr } = useOwnHook();
console.log
浏览 0提问于2020-09-30得票数 0
老实说，除了“这里发生了什么事”之外，我还在努力想出一个表达这个问题的方法。使用以下用于将增量项添加到列表中的响应代码：
import React, { useState } from "react";
import "./styles.css";
let counter = 0;
export default function App() {
const [list, setList] = useState([]);
console.info("Render:", counter, list.join());
return
浏览 8提问于2021-10-20得票数 0
回答已采纳
我的组件有两个Rect.useEffect挂钩
const Example = ({ user }) => {
React.useEffect(() => {
autorun(() => {
console.log("inside autorun", user.count);
});
});
// Only runs once
React.useEffect(() => {
console.log("Why not me?");
});
return <Observer
浏览 0提问于2019-04-01得票数 5
回答已采纳
1回答
我正在尝试为我的Meteor应用程序实现分页，使用React和mongo。为此，我向我的订阅函数传递了一个极限支持，如下所示：
export default class BookListTable extends TrackerReact(React.Component) {
constructor(props) {
super(props);
var limit = this.props.LimitProp
limit = parseInt(limit) || 5;
this.state = {
subscription: {
booksData: Meteor.subscribe(&
浏览 0提问于2016-09-13得票数 0
回答已采纳
我知道它只是将HTML呈现为文本，所以说到类组件，只有contructor()和render()方法在renderToString()期间被调用。但是我注意到了一些关于函数组件的奇怪行为。考虑以下组件示例：
function MyComponent() {
console.log(1);
return(
<React.Fragment>
Some text
</React.Fragment>
)
}
我只是在函数组件中使用console.log()，我猜这相当于类组件中的constructor()方法。
在快速路由处理程序中调
浏览 6提问于2021-02-26得票数 4
1回答
我知道这个话题已经被问了一千次了，但我还没有找到一个直接的答案，在这样的情况下' this‘的价值是什么(来自React React)：
import React from 'react'
import ReactDOM from 'react-dom'
class Content extends React.Component {
constructor(props) {
super(props);
console.log(this," --> this (constructor)");
浏览 0提问于2018-01-30得票数 0
我在我的expo中使用React导航，我想编写一个解析器，每次当我们移动到任何其他页面时，都会调用一个函数来检查数据，如果值为空，则从localStorage/Server加载它。我怎样才能做到这一点呢？有没有导航事件可以帮我设置全局函数？我试着在这里阅读文档，但没有找到一个好的解决方案https://reactnavigation.org/ 我希望在我的expo/react应用程序中有这样的东西。https://angular.io/api/router/NavigationEnd 谢谢
浏览 6提问于2020-04-01得票数 0
与标题一样，我在调用()时，对于idToken和accessToken值将获得null。
代码(与中的示例相同)：
export async function googleLogin() {
try {
// add any configuration settings here:
await GoogleSignin.configure();
const data = await GoogleSignin.signIn();
google-services.json文件已经就位，以前运行良好。在从Reactive0.59.9迁移到0.
浏览 1提问于2019-12-29得票数 1
我有以下类组件：
class ConceptPopup extends React.Component {
constructor(props) {
super(props);
this.state = {
attributeForm: []
};
this.addAttributeForm();
}
addAttributeForm() {
//this method adds label and input field to the state array
浏览 1提问于2018-03-22得票数 0
回答已采纳
import React, { Fragment } from 'react'
import styled from 'styled-components'
export const routes = [
{ path: '/', name: 'Home', children: <HomePage />, exact: true, strict: true },
...
]
const Wrapper = styled.div``
const Breadcrumbs = () =>
{
浏览 0提问于2020-11-02得票数 0
回答已采纳
只是想知道你们多久会用这样的建筑。
class Cmp extends React.Component {
constructor(props){
super(props);
this.handler = this.handler.bind(this)
}
handler(x) {
return () => console.log(`${x}, i am not immediately called`)
}
render() {
return(
<div>
<div onClick={this.handler('h
浏览 0提问于2018-05-31得票数 0
在React中运行我的应用程序时，我收到一个错误。这个错误有很多问题，但我不知道如何解决它。当我按下该链接时，它会直接转到登录组件。'‘
这是我在网站上得到的错误：
‘超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React会限制嵌套更新的数量，以防止无限循环。’
这是我的LoginPage：
class LoginPage extends React.Component {
constructor(props) {
super(props);
浏览 25提问于2018-09-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
