有没有办法推迟React组件的更新？
是的，React 提供了多种方法来推迟组件的更新。
- shouldComponentUpdate: 可以在组件接收到新的 props 或者 state 时，判断是否需要进行更新。通过在 shouldComponentUpdate 方法中返回 false，可以阻止组件进行更新。这个方法可以根据你的需求自定义逻辑来判断是否需要更新组件。
- PureComponent: PureComponent 是 React 提供的一个优化组件更新的方式。它会自动判断组件的 props 和 state 是否变化，如果没有变化则不会进行更新。这样可以避免不必要的渲染，提高性能。但需要注意的是，PureComponent 使用的是浅比较，如果组件内部有复杂数据结构的 props 或者 state，可能会导致无法正确判断是否需要更新。
- React.memo: React.memo 是一个高阶组件，用于优化函数式组件的性能。它类似于 PureComponent，可以通过比较 props 来决定是否重新渲染组件。使用 React.memo 包裹函数式组件，可以在组件接收到新的 props 时，进行比较，并决定是否重新渲染组件。
- 使用 shouldComponentUpdate 或者 PureComponent 可以通过比较 props 或者 state 来判断是否需要更新组件。而使用 React.memo 则是比较函数式组件的 props。
推荐的腾讯云相关产品：无
参考链接：
- shouldComponentUpdate: https://reactjs.org/docs/react-component.html#shouldcomponentupdate
- PureComponent: https://reactjs.org/docs/react-api.html#reactpurecomponent
- React.memo: https://reactjs.org/docs/react-api.html#reactmemo
相关·内容
因此，我有一个组件，用于处理表单：
import React, { useState } from "react";
export const useForm = (callback: any, initialState = {}) => {
const [values, setValues] = useState(initialState);
const onChange = (event: React.ChangeEvent<any>) => {
setValues({ ...values, [event.target.name]
浏览 4提问于2022-09-27得票数 0
回答已采纳
2回答
有没有办法通过名称访问React组件？例如，使用React devtools，我可以搜索所有组件，并使用$r访问控制台中最近选择的组件。有没有办法在没有React devtools的情况下访问这些组件？也就是说，有没有可以用来获取这些组件的查询？
更多信息:我对为使用react的特定网页编写chrome扩展很感兴趣。我知道要与之交互的组件的名称，但我不确定如何实际访问它。
浏览 1提问于2015-09-05得票数 1
酶新手来了。我正在尝试测试React组件的状态是否在调用该组件上的方法之后被更新。
这是我正在测试的组件的片段：
class App extends React.Component {
constructor(props) {
super(props);
}
state = {
recipes: {},
user: null
};
handleUnauth = () => {
this.setState({
user: null
});
};
render() {
//render childre
浏览 4提问于2017-08-27得票数 7
回答已采纳
这只是一个简单的切换机制：
元素的单击是通过响应状态更改来切换边框颜色变化。它只改变一次颜色！但不会切换回原来的颜色。
(我试验了许多不同的功能，读取/重新读取状态上的文档，setState的异步/批处理更改功能，并一次又一次地梳理。)
有人能帮我找到解决办法吗？
提前感谢！
import React, { Component } from 'react';
class Button extends Component {
constructor(props) {
super(props);
this.state = {
active: fal
浏览 2提问于2017-11-11得票数 0
回答已采纳
当在React中使用this.setState()时，当状态实际发生变化时，我感到困惑。这是我的联署材料：
var Hello = React.createClass({
getInitialState: function () {
return {
iterator: 0
}
},
handleClick: function () {
console.log(this.state.iterator);
this.setState({
iterator: this.state.iterator + 1
})
c
浏览 1提问于2016-09-07得票数 1
回答已采纳
以非常简单的react.js应用程序为例
<main></main>
<section>
<input value="abc" />
</section>
。。
data = note: ""
setNote = -> data.note = $('input').val()
display = React.createFactory React.createClass render: ->
React.DOM.div null, "The
浏览 1提问于2015-02-02得票数 1
回答已采纳
1回答
我正在从我的后端快速服务器上做一个简单的获取。
首先点击“提交”按钮，然后点击"undefined".Second时间“提交”按钮，按一下我的数据。。
这是可行的，但用户需要点击两次登录(不理想)
如何从用户的第一次单击中获得结果？
import React from "react";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import "./Login.css";
class Login extend
浏览 1提问于2019-12-12得票数 0
回答已采纳
嗨，这是我尝试从表单中提交数据的代码。
import * as React from 'react'
export class User extends React.Component{
constructor(props) {
super(props);
this.state = {
name: '',
message: '',
messages: ''
}
this.handle
浏览 0提问于2018-10-10得票数 0
回答已采纳
我有一个动态生成输入的列表。
input --> onClick new Input beneath
[dynamically added]input
input
如何才能给出这个动态添加的输入焦点？
输入具有textInput引用。这部分起作用：
componentWillUpdate(){
this.textInput.focus();
}
然而，只是工作或第一次新的输入。那就好像逻辑中断了。
输入是来自数组的.map()。是否有一种方法可以说，如果当前呈现的元素有el.isActive来聚焦它。或者说，用索引5来集中输入？
码
输入生成文件/组件
import React from
浏览 3提问于2017-11-23得票数 0
我有一个项目，它使用类组件来计数按下按钮的次数。我让它正常工作，但是当我使用console.log计数值时，它返回一个比显示的数字低的数字，即使它们使用的是相同的引用。我以为他们是同一个号码。
class ButtonCounter extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
}
c
浏览 4提问于2022-05-25得票数 0
我编写了下拉组件，该组件通过回调函数将选定的值传递回父函数。从这里开始，我想简单地将所选值呈现在下拉列表下面。相反，我呈现了以前的状态。我不知道为什么会这样，有人能不能解释一下我的应用程序的行为，或者告诉我如何修复它？我甚至不知道到哪里去找答案。
index.js
import React, { Component } from 'react';
import './App.css';
import { Dropdown } from './components/dropdown'
class App extends Component {
浏览 1提问于2018-03-29得票数 1
回答已采纳
我有一个扩展表单的组件，如下所示： import React from "react";
import Form from "./common/form";
import AppFeature from "./common/appFeature";
class AddFeature extends Form {
render() {
<AppFeature role={"newRole"} />}
} 当我试图通过this.props.role获取appfeature组件中的角色值时。我去叫undefined。 有没
浏览 12提问于2019-10-04得票数 0
我正在尝试通过以下测试用例：
it('text should be set to bold when checkbox is checked', () => {
const wrapper = mount(<FontChooser min='2' size='6' max='10' bold='false'
text='hello' />);
wrapper.find("#boldCheckbox").simulate('change');
exp
浏览 0提问于2017-11-19得票数 0
1回答
我从中编辑了一些示例，以模拟HomeScreen中1秒后的状态变化。
当父屏幕状态发生变化时，我不明白为什么DetailScreen不是重命名器。有没有办法获得这样的行为？
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Co
浏览 1提问于2019-06-03得票数 2
我希望能够在不更新其他元件的情况下更新嵌套元件的特性。
这个用例非常容易理解：
我有一个Table (组件)，它包含Player (一个Player就是一个组件)，它包含Cards (一个Card就是一个组件)。
所以我有一些类似的东西：
var Table = React.createClass({
render: function() {
return (
<div>
</ Player>
</ Player>
</ Player>
</ Playe
浏览 1提问于2015-10-20得票数 0
2回答
我对ref和条件呈现有问题。当我点击一个按钮标签时，我想聚焦一个输入标签。基本上，我有这个简化的代码。
class App extends React.Component {
textInput
constructor(props) {
super(props)
this.state = {isEditing: false}
this.textInput = React.createRef()
}
onClick = () => {
this.setState({isEditing: !this.state.isEditing
浏览 1提问于2018-06-23得票数 11
回答已采纳
1回答
我试图从我的数据库中呈现数据
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import api from '../../Services/api';
function ProviderList(){
const [provider, setProvider] = useState([]);
async function loadingProvider(){
const respons
浏览 0提问于2021-05-02得票数 0
回答已采纳
2回答
我有一个带有4个不同I的数组的简单aip。在react中，我为每个ids创建了一个带有按钮的<ul>。当我单击该按钮时，我希望使用来自api的新的特定按钮id值来更改state.id和console.log --新的state.id (最终，我希望根据按下的按钮更改一些呈现)。
我需要在其中一个按钮上按两次以console.log我想要的id，我需要在第一次单击时改变状态(对一些新的呈现进行一些更改)。
浏览 7提问于2022-03-30得票数 0
回答已采纳
1回答
我创建了一个React模式，它有两个特性：isOpened和onClose。这在React中工作得很好，但是我的整个站点还没有完全的React，所以我希望能够在React环境之外控制我的模式。
我已经将isOpened设置为窗口变量，并将onClose设置为更新此变量的窗口函数，这在第一次加载时工作得很好，但当然，当这些变量更新时，我的模态组件不会重新呈现。
当我更新变量时，有没有办法从DOM调用forceUpdate？或者我用完全错误的方式来做这件事？
仅供参考:我很高兴有一个老套的解决方案，因为这是暂时的，直到我可以完成移动我的网站的反应。
谢谢!
浏览 3提问于2016-03-31得票数 0
我正在使用CRA (create-react-app)和react-router。 但是，我也使用事件驱动系统来管理状态和消息传递。 现在我需要在react函数组件之外的某个地方更改URL。因此，我不能使用useHistory。 有没有办法更改URL/路由并让react路由器知道？
浏览 15提问于2021-08-18得票数 2
回答已采纳
2回答
我有一个npm导入的组件(CKEditor)，它只关心挂载时其父组件的状态。也就是说，无论父组件的状态发生什么变化，如果已经挂载，CKEditor都不会反映这些变化。
这对我来说是一个问题，因为当父组件更改其语言属性时，我需要CKEditor根据父组件的状态进行更改。
有没有办法让一个子组件从父组件上卸载并重新挂载？例如，有没有办法根据父组件的"componentWillReceiveProps“卸载并再次挂载子组件？
import React from 'react';
import CKEditor from "react-ckeditor-
浏览 0提问于2018-03-09得票数 9
回答已采纳
2回答
import React from "react";
import { Redirect, Route } from "react-router-dom";
import { useState, useEffect } from "react";
import To_Do_Lists from "./todo";
const ProtectedRoute = ({ component: Component, ...restOfProps }) => {
const [isValidated, setIsValidate
浏览 1提问于2021-08-31得票数 0
有没有办法获得日志，当执行任何事件/动作时，所有的React组件都会被渲染或重新渲染。我只想检查是否有任何不需要的React组件被重新渲染。我知道我们可以通过在render function、componentWillReceiveProps或componentWillUpdate中添加控制台来实现这一点。但是我的webapp里有很多组件。在每个组件中添加控制台语句将是一团乱麻。有没有更好的方法？
浏览 1提问于2017-04-12得票数 16
回答已采纳
我有PaymentMethodPage，它看起来像这样：
import React, { FC, useState } from 'react';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import {
getClientSecret,
} from '../../api/PaymentCalls/PaymentCalls';
import PaymentMethod
浏览 17提问于2022-01-26得票数 0
我正在尝试获取React组件中按钮上单击事件的e.target.innerHTML，并将其指示给另一个常量setState，但是：
在第一个单击中，e.target.innerHTML本身将正确显示，但已签名的状态值未定义。
在第二个单击中，正确地显示了已签名的状态值。
如果我单击列表中的另一个按钮-显示的值是前一个按钮被舔过的
如果我再单击新按钮一次，就会正确地显示已签名的状态值。
这里的所有组件代码：
function categoryClickHandler(e) {
e.preventDefault();
const collection =
浏览 0提问于2021-04-10得票数 0
回答已采纳
我已经在我的react应用程序中使用react json schema form构建了一个表单。而且我的代码已经有了一个定制的可重用按钮组件。尝试在表单中使用相同的按钮组件，但无法获取编辑后的表单数据。有没有办法获得最新的表单数据？
浏览 27提问于2020-01-12得票数 0
我试图找出在使用useState钩子更新状态时何时发生重呈现。在下面的代码中，单击按钮将触发包含一个handleClick函数的setTimeout函数。setTimeout内部的回调在1秒后执行，通过调用setCount更新状态变量计数。控制台日志然后打印一条消息。
在单击按钮后，我希望控制台日志显示的顺序是：
'Count in update'，0'Count post update in setTimeout'，0'Count in render'，1
但是，在运行此代码之后，我看到的顺序是：
'Count in update
浏览 6提问于2022-01-28得票数 4
回答已采纳
您好，我正在尝试使用此示例实现反应表过滤功能。。但我有个问题。我创建了一个不同的组件，并在其内部调用了我的react-table组件。我的意思是我的主要组件是包装表组件。有没有办法在react-table组件中获取state.filters数组？你能在这个问题上帮我吗？
我的主要组件：
……
import React from 'react'
import DataTable from '../dataTable/Datagrid'; --> imported react-table example different file as component
浏览 3提问于2021-09-13得票数 0
我现在把这个作为我的Meteor应用的“索引”：
import React from 'react';
export const App = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired,
},
render() {
return <div className="app-div">
**<Foo/>**
**<Bar/>**
{ this.pro
浏览 1提问于2016-11-13得票数 0
我有一个本地JSON文件，我已经将其转换为Javascript。 我可以通过将JS文件导入到我的App.js中来获取数据。 这是我的App.js文件： import React, { Component } from "react";
import CardData from "./data/db";
import "./App.css";
class App extends Component {
constructor() {
super();
this.state = {
CardData
};
浏览 16提问于2019-02-21得票数 1
回答已采纳
有没有办法查看使用React构建的网站的react源代码？
如果您检查react页面的源代码，您将只看到根div。有没有办法看到实际的组件？
浏览 2提问于2017-05-27得票数 10
2回答
JS状态意外更新
、、、
我对JS非常陌生。
这是我正在处理的一个页面：
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Plot from 'react-plotly.js';
import { fetchPosts, createPost } from '../actions/postActions'
import GroupedBarChar
浏览 1提问于2019-05-16得票数 0
我有一个要求，在多条路由之外，我需要(重要的)呈现服务器上的静态路由之一，以提高加载速度，该路由的内容独立于其他路由，现在剩下的路由是相互连接的，我正在使用React上下文进行身份验证，我不想在服务器端进行auth检查，我只想：
如果->必需路由->向我显示该页面服务器呈现的内容
否则->继续它以前是(我不介意这些页面的UI得到服务器-渲染)
现在我的问题是，在我的案例中使用上下文的正确方法是什么。下面是一些代码：
./src/index.js (客户端代码)
import React from "react";
import ReactDOM from &#
浏览 1提问于2022-03-20得票数 0
我有以下react-native程序：
class offerDetail extends Component {
constructor(props) {
super(props);
this.state = {
phone: null,
logo: null,
instagram: null
};
const { name } = this.props.doc.data();
this.ref = firebase.firestore().collection('companies'
浏览 0提问于2017-12-27得票数 0
我是第一次使用react，我的问题是，有没有办法从另一个组件重新呈现一个组件？ 我正在使用Redux，一些全局状态正在影响组件B。但在我的示例中，在某个Redux状态从组件C更改后，组件B不会重新呈现。 组件C和B不是彼此的父/子组件，有没有简单的方法可以做到这一点？ 谢谢
浏览 24提问于2021-01-15得票数 0
1回答
这是我的代码块在react中使用useCallback钩子时看起来很行，但我想在svelte中使用相同的函数，但希望在useCallback钩子中添加这个函数。有没有别的办法来代替苗条。
const newCancelToken = useCallback(() => {
axiosSource.current = axios.CancelToken.source();
return axiosSource.current.token;
}, []);
浏览 5提问于2022-08-29得票数 4
我正在使用React Testing Library和Jest来测试我的组件。其中一个组件呈现一个包含数据的表，因此我决定按照表库作者的建议使用React.memo。我是这样使用它的： import React, { memo } from 'react'
const MemoizedComponent = memo(({ data }) => {
// Component logic
return (
<>
// Component UI
</>
)
}, (prevProps, nextProps)
浏览 12提问于2020-12-24得票数 0
回答已采纳
我有一个3个数据“卡片”的列表，它们正在使用react query成功地从我的api中拉出。这一切都是通过我编写的这个自定义钩子来设置的，它使用了一个变体和queryclient.setQueryData钩子。
在我的React组件中，我使用了另一个自定义钩子，它使用queryClient.getQueryData从我的查询缓存中加载数据。
当我想要删除其中一个数据卡时，我运行一个突变来更新API (从子组件调用)中的数据，如果成功，我使用queryClient.setQueryData钩子来更新查询缓存。
使用react-query开发工具，我可以看到它正在缓存中成功更新，但我的组件不会更新
浏览 0提问于2021-05-04得票数 0
最近，我开始用refactor重构我的主干网应用程序，我正在尝试使用refactor和sigma.js编写交互式图形可视化组件。
我大致理解了React的声明性范例，以及它是如何通过render()方法使用jsx语法实现的。
，但让我绊倒的是我无法定义 React 组件的情况。
这是因为javascript生成的DOM元素，只有在声明性DOM元素被render()呈现之后才能在render()上生成。
这让我既担心性能，也担心有缺陷的动画(我的图形是在实例化时间上绘制的，在这种情况下，每一个render()调用都会重播)。
我的当前代码如下：
...
render: function() {
浏览 0提问于2015-09-21得票数 3
回答已采纳
2回答
根据 answer，react redux react会比较mapStateToProps的输出，以确定组件是否需要重新呈现。
我有一个组件，尽管相关状态发生了变化，但它不会重新呈现。我将断点附加到react redux源代码中的函数，但发现该函数实际上返回false(即，如果我的组件不相等，则被比较的对象).So理想情况下，我的组件应该重新呈现。因此，我无法弄清楚为什么我的组件不能重新呈现。我猜这是因为connect函数中的性能优化。
有没有办法打印connect函数中关于重新呈现组件的检查的输出
浏览 2提问于2017-05-30得票数 1
嘿，我是vue.js的新手。我有一个Home.vue，它在成功登录并进入路由后创建一个数据数组。 我试过了 <template>
<div class="home">
***
<History :data="this.cData" />
***
</div>
</template>
***
beforeRouteEnter(to, from, next) {
next(async (vm) => {
vm.cData = await vm
浏览 19提问于2020-10-14得票数 0
何时 值发生更改，则组件将重新呈现。我希望这个组件 从不 重新渲染，即使其道具发生更改。通过一个类组件，我可以像这样实现sCU： shouldComponentUpdate() {
return false;
} 但是有没有办法处理React钩子/React memo呢？ 下面是我的组件的样子： import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import ConnectedSpringLogo from '../../containers
浏览 74提问于2019-03-01得票数 42
回答已采纳
简介：，我有点困惑于反应。我看过一些文章说，React组件只是接收道具并呈现给虚拟DOM的函数。然而，我看到的是，他们是成熟的有状态的怪物，我没有办法像对待函数一样对待他们。
的问题：为什么每次使用React组件都包装在React.createElement中？为什么我不能用new MyComponent()代替呢？我在DevTools中这样做看起来非常相似。考虑到组件是使用React.createElement创建的，那么为什么需要React.createClass呢？在我看来是多余的。
编辑:这看起来是相关的：
编辑2:这是相关的，但不是的复制，这个问题是关于创建类的。我问的不是创建新的组
浏览 1提问于2015-06-09得票数 5
1回答
在学习一些“react”的过程中，我希望将一个简单的react组件转换为使用redux。在我的组件中，根据一些属性值，我初始化了一个数组，并将其设置为组件状态。
let my_arr = new Array(this.props.rows);
this.state = {
arr: my_arr
}
我不想在组件中创建和设置我的状态，而是使用一个reducer。我正在尝试创建一个reducer (reducer_arr.js)，它将初始化并返回这个数组。我的问题是，如何知道需要返回的数组的大小？有没有办法在我的减速器中读取该组件的道具值？
export default function b
浏览 18提问于2017-01-12得票数 1
回答已采纳
1回答
我正在使用React.rb (一个绑定到react.js的蛋白石红宝石)和Opal-rspec进行测试。
似乎我需要在两次测试之间重置react的内部结构，因为在一些测试中，我得到了可怕的"Cannot read property‘firstChild’of undefined“错误。
如果我将“失败”测试移动到第一个测试，那么错误就会消失(但可能会在以后的测试中出现)。
React.rb没有被加载两次，我已经确定了几种方法，包括在react源文件的第一行中放入一个console.log。
所以，看起来我需要一种方法来完全清除测试之间的反应状态。有没有办法做到这一点？
浏览 7提问于2015-05-10得票数 0
有没有办法为React Native应用程序创建文档(比如reactnative.dev / react-styleguidist)？
浏览 10提问于2021-02-26得票数 1
2回答
考虑以下组件：
1)
import React from 'react';
const toolbar = (props) => (
<header>
<nav>
<ul>
<li style={{display: props.displayHome}}>Home</li>
<li>About Us</li>
<li>Contact</li>
浏览 7提问于2019-10-02得票数 1
我已经实现了一个ThreeJs场景作为一个遵循<code>C0</code>风格的React组件；然而，我在如何使用它的父组件的状态正确更新场景时遇到了问题。在我的实现中，用户可以配置某些属性(对象的高度、颜色等)。通过滑块、菜单等，它们是各自独立的React组件。其中的每一个都将它们的状态提升到三个场景的父组件。通常，我可以将这些作为道具传递回去，如果需要，组件将重新呈现，但在这种情况下，ThreeJs需要决定何时更新和呈现，因为DOM没有变化。
有没有办法让三个场景组件“观察”它的道具，然后在它们发生变化时处理场景的更新。在传统的应用程序中，我会使用观察者模式，但我
浏览 14提问于2020-06-09得票数 0
如果我试图对componentDidMount中React组件中的元素执行document.querySelector，似乎不能保证它(componentDidMount)在DOM上被调用之后被调用。结果是它找不到元素
如果我想访问DOM，有没有我应该使用的事件？在它连接到DOM之后？
作为一个变通办法，我使用了setTimeout，有没有更好的方法？
浏览 2提问于2017-10-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
