setState如何在react中使用备忘录
在React中，setState是用于更新组件状态的方法。备忘录（Memoization）是一种优化技术，用于缓存函数的结果，以避免重复计算。在React中，可以使用备忘录来优化setState的使用。
在React中使用备忘录优化setState的步骤如下：
- 导入useMemo钩子函数：在函数组件中使用备忘录，需要导入React的useMemo钩子函数。
import React, { useState, useMemo } from 'react';- 定义备忘录函数：使用useMemo定义一个备忘录函数，该函数接收一个回调函数和依赖项数组作为参数。
const memoizedCallback = useMemo(() => {
// 回调函数逻辑
}, [依赖项数组]);- 在回调函数中使用setState：在回调函数中使用setState来更新组件状态。
const memoizedCallback = useMemo(() => {
setState(newState);
}, [依赖项数组]);- 使用备忘录函数：将备忘录函数作为事件处理程序或其他需要更新状态的地方使用。
<button onClick={memoizedCallback}>更新状态</button>需要注意的是，依赖项数组是一个包含所有影响回调函数执行的变量的数组。只有当依赖项数组中的变量发生变化时，备忘录函数才会重新计算。这样可以避免不必要的状态更新和重复计算。
对于React中的备忘录使用，腾讯云没有特定的产品或链接地址与之相关。备忘录是一种通用的优化技术，可以在任何React项目中使用。
相关·内容
1回答
我想使用返回类型为React.memo的list,listItems创建一个泛型函数。这样做，现在抛出一个"TypeError：Object(.)不是函数“错误，我不知道为什么。我需要反馈和建议来解决这个问题。我正在使用最新版本的"react"："^16.12.0"，"react-dom"："^16.12.0"，
泛型函数
import React, { memo, useState, useEffect, useRef } from 'react';
import Card from '@m
浏览 2提问于2019-12-31得票数 1
我有一个问题，一个图像闪烁，因为它是无缘无故地呈现，尽管使用React.memo，尽管它的道具或状态不被改变。
我成功地使用了，正确地利用了React.memo，BUUUT，因为一个我不明白的原因，如果我在父组件中使用一个高阶组件，那么备忘录就不再工作了，我又遇到了闪烁的问题。
。
以下是代码：
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
let interval = null
const Icon = ({ name }) =&
浏览 2提问于2020-05-06得票数 0
回答已采纳
我正在创建购物备忘录。 我想获得与mapStateToProps函数相关的最新this.props。但我得到的是与mapStateToProps函数关联的旧this.props。 我尝试定义如下的componentWillReceiveProps函数： componentWillReceiveProps(nextProps) {
console.log(this.state.nextProps.createdVegetableList) //latest this.props
this.setState({
vegetableList
浏览 20提问于2020-10-20得票数 0
1回答
受控/非受控输入
、、
为什么React会抱怨受控/非受控输入？value从一开始就设置为this.state.text，this.state.text在constructor中设置为''。 import React from 'react';
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
};
this.textInput
浏览 19提问于2019-02-15得票数 2
我理解，在中，React教程和文档警告说，状态不应该直接变异，一切都应该通过setState。
我想知道为什么我不能直接改变状态，然后(在同一个函数中)调用this.setState({})来触发render。
下面的代码似乎运行得很好：
const React = require('react');
const App = React.createClass({
getInitialState: function() {
return {
some: {
rather: {
deeply: {
浏览 10提问于2016-06-10得票数 132
回答已采纳
据我所知，React.memo是一个回忆录组件的API :如果它的道具不改变，则使用该组件的最新呈现，而不将其与以前的版本进行比较。跳过新的渲染和比较旧的一个加速应用程序。凉爽的。
现在，我不明白的是:如果道具不改变，那么没有回忆录的组件也不会重新呈现，正如我从中看到的(使用这个链接查看演示，这个页面上的代码片段有点混乱)：普通component+usecallback和回忆录one+useCallback之间的呈现数量没有区别。基本上，useCallbacks是我所需要的，因为普通组件不会用相同的道具重新呈现。那我错过了什么？备忘录什么时候来帮助优化？
const { useCallba
浏览 12提问于2022-06-27得票数 2
回答已采纳
1回答
因此，我有一个正在工作的"Todo“列表实现，它使用Rails作为后端API，并对前端进行响应(以及axios来发出请求)。我熟悉Rails，但React对我来说仍然是新的。
目前我有4个组件，但我关注的两个组件是List和ListItem。
List.js
import React, { Component } from 'react';
import axios from 'axios';
import ListItem from './ListItem';
class List extends Component {
浏览 4提问于2019-11-12得票数 0
回答已采纳
3回答
如何在JSS中指定:焦点属性？
、、、、
我将react-native-web与expo和react-native-paper (material ui)一起使用
我的问题是在编译的web版本中的焦点轮廓属性上的文本区域，所以我需要去掉这个蓝色边框。通常我会这样做
textarea:focus {
outline:none!important
}
对于react-native，我们不能只使用jss而使用css，但是如何使用这个属性呢？
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => thi
浏览 0提问于2019-09-01得票数 1
2回答
我呈现了一个React列表，每个列表项中都有一个Edit按钮。我想要在数据和输入表单之间来回切换。与本文中的应用程序类似：https://medium.com/the-andela-way/handling-user-input-in-react-crud-1396e51a70bf。您可以在https://codesandbox.io/s/fragrant-tree-0t13x上查看演示。 这是我的React组件显示列表的地方： import React, { Component } from "react";
import PriceBox from "../Sin
浏览 38提问于2020-04-01得票数 2
在使用时，与功能组件相比，您有一个优势，即在父级更新时组件并不总是呈现出来。实际上，它只在组件道具发生更改时呈现，在本例中，只有当您更改输入时才会呈现。
如何将一个对象传递给PureComponent而不破坏使用这种组件的所有优点？
这是否意味着，一旦您有了预期对象类型的道具，最好只是使组件具有功能？
我增加了一个例子来说明我的意思..。(可能你需要在一个新窗口打开它，因为有很多不同的孩子)
class TestPureComponent extends React.PureComponent {
render() {
return <div style={{border
浏览 0提问于2019-08-29得票数 3
回答已采纳
我是react的新手，我只想知道如何使用react js将nav-pills设置为活动状态我正在使用bootstrap和react js。
为此，我已经尝试过setState
我没有得到结果
浏览 1提问于2019-05-11得票数 0
我试图使用没有JSX的React.js组件，并收到这样的警告：
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
我访问过链接，但建议createFactory解决方案对我没有帮助:/
app.js
var React = require('react/addons');
var TagsInput = React.createFactory(require('./tag
浏览 2提问于2015-01-07得票数 15
回答已采纳
1回答
我有一个在反应应用程序中使用D3的伦敦自治市地图，并希望用户能够选择其中之一。我将它设置为在悬停在行政区上方时将颜色更改为浅红色，这很好用。当用户单击某个区时，它会将其“选中”。然而，这需要半秒钟来更新地图上的颜色并停止。我似乎不明白为什么会这样，有什么建议吗？
代码如下：
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { geoMercator, geoPath } from 'd3-geo';
im
浏览 1提问于2021-07-20得票数 1
1回答
我有一个现有的javascript组件：
const RenderState = ({ state, else: elseChild = undefined, ...states }) => {
if (state && states[state]) return states[state]
if (elseChild) return elseChild
return null
}
export default RenderState
我正在尝试将其转换为类型脚本，到目前为止：
import React from 'react'
inter
浏览 1提问于2020-11-25得票数 2
回答已采纳
我需要你的帮助。当我按下按钮时，我想检查一下我的textInput是否有一个空的字段。因为现在我的应用程序可以用空字段将用户路由到目标页面。所以我需要在空的时候检查这个字段。但我不知道该怎么做。如果你帮我，我会很高兴的。
这是我的组件
import React, { Component } from 'react'
import { View, TextInput } from 'react-native'
import { MyButton, ErrorMessage } from '../uikit'
import { FormStyle,
浏览 1提问于2021-06-30得票数 0
回答已采纳
我刚刚开始学习React，正在尝试遍历JSON数据的数组。然而，我得到了一些语法错误。我正在尝试使用array.map函数，但它不能正常工作，我也不确定如何实现它，使其显示JSON数组中的每个元素，而不是只显示一个元素。非常感谢您的帮助--谢谢！
import React, { Component } from 'react';
import axios from "axios";
import './App.css';
import UserForm from "./components/UserForm.js";
clas
浏览 2提问于2018-06-12得票数 0
我使用组件，并应用了与这里完全相同的过滤器：
() => {
const [filterText, setFilterText] = React.useState('');
const [resetPaginationToggle, setResetPaginationToggle] = React.useState(false);
const filteredItems = fakeUsers.filter(
item => item.name && item.name.toLowerCase().inclu
浏览 5提问于2022-04-04得票数 0
我已经在下一个js中设置了基本路由器，我希望多个页面共享一个组件，例如一个头。共享组件将在每次加载新页面时重新加载。(如何)我可以重用组件，而不必在页面加载之间不必要地重新添加组件？与CRA +react路由器嵌套路由相比，这确实是效率低下的，从而消除了对任何形式的共享组件的需求。
Sandox
共享组件代码如下：
import React, { memo } from "react";
export default function hello() {}
export const Header = memo(() => {
return (
<&
浏览 7提问于2021-12-30得票数 1
回答已采纳
3回答
在React中，我编写了以下组件：
<select //...
onChange={event => {alert(event.target); //setState}}
>
<option id=1>one</option>
<option id=2>two</option>
</select>
警报给我select元素。如何在没有jQuery的情况下访问所选选项？我正在尝试setState上的id，并做相应的搜索和其他事情。
浏览 8提问于2017-12-25得票数 1
回答已采纳
我正在用React构建一个相当简单的博客应用程序。我从这个React组件中得到一个非常奇怪的错误。下面是错误：
×
TypeError: Cannot read property 'setState' of undefined
toggleEditing
src/blogform.js:11
8 | }
9 | }
10 | toggleEditing(){
> 11 | this.setState({
12 | editing: !this.state.editing
13 | })
14 | }
下面
浏览 2提问于2017-10-05得票数 0
9回答
最近我一直在玩React 16.6.0，我喜欢React的想法，但是我一直找不到任何最适合实现它的场景。
React ()似乎并不意味着仅仅将它抛到所有功能组件上就会产生任何影响。
因为它做了一个肤浅的比较，以确定是否需要重新呈现，是否会出现对性能产生负面影响的情况？。
这样的情况似乎是实现的一个明显的选择：
// NameComponent.js
import React from "react";
const NameComponent = ({ name }) => <div>{name}</div>;
export default Reac
浏览 1提问于2018-10-31得票数 155
回答已采纳
我想在react native中验证我的登录表单。但我在react本机中使用了另一个Firebase日志函数在onChangetext中。这是我的onPress函数，在登录按钮按下。
async onLoginPress() {
this.setState({ errorMessage: null, loading: true });
const { email, password } = this.state;
console.log(email);
console.log(password);
firebase
.auth()
浏览 0提问于2018-09-19得票数 0
我需要在setState完成后解析promise，但在react钩子中，setState (useState)没有回调函数。
React挂钩此代码的版本：
handleBeforeGetContent = () => {
return new Promise((resolve, reject) => {
this.setState({ key: 'updatedValue' }, () => resolve());
});
}
浏览 1提问于2019-10-23得票数 4
1回答
我有一个react项目，它在文件中定义了一个Signup元素。代码是
import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { useNavigate } from 'react-router-dom';
import postData from './APIREQ';
class Signup ex
浏览 7提问于2022-04-19得票数 0
因此，假设我有2个React组件，如下所示：
var Parent = React.createClass({
getInitialState: function(){
return ({
child: <Children state="someState" />
});
},
parentFunction: function() {
this.setState({
child: <Children state="otherState" /&
浏览 1提问于2016-03-27得票数 1
回答已采纳
在useEffect钩子中，效果(增加r值和日志值)按预期工作。
import React from "react";
let r = 0;
export default function App() {
const [state, setState] = React.useState(false);
function handler() {
setState(!state);
}
React.useEffect(() => {
r += 1;
console.log("rendering:-", r, &#
浏览 2提问于2021-06-08得票数 3
回答已采纳
2回答
我刚开始使用React.js，我只是不确定是否有一种特殊的方法来获取textbox的值，在这样的组件中返回：
var LoginUsername = React.createClass({
render: function () {
return (
<input type="text" autofocus="autofocus" onChange={this.handleChange} />
)
},
handleChange: function (evt) {
this.setState({ val
浏览 0提问于2016-07-17得票数 30
回答已采纳
3回答
在堆叠溢出的问题上，我发现了类似的问题，但没有一个问题使我找到了解决办法。
我对功能组件使用了react 16.12.0。我有一个应用程序：
const App: React.FC<Props> = (props) => {
const [value1, setValue1] = useState<number>(1);
const [value2, setValue2] = useState<boolean>(true);
function incrementValue1(){
setValue1(value
浏览 3提问于2020-01-02得票数 1
回答已采纳
我想改变react-datepicker的样式：
1.将输入框更改为自定义样式
2.更改日历的样式和语言
我看到一篇文章(，)谈到替换整个组件。我是否可以直接编辑样式，而无需编写新组件？如果是，我如何实现这一点？此外，我不知道如何更改日历。我如何才能知道我应该更改哪个组件？
import React, {Component} from 'react';
import {render} from 'react-dom';
import moment from 'moment';
import DatePicker from 'react
浏览 6提问于2019-01-01得票数 4
我想重定向用户后，在react JavaScript中提交表单，例如当用户提交表单时，他/她重定向到google.com或一些其他网址，他/她在输入字段中输入的信息。我创建了一个简单的归档和提交按钮。
下面是我的示例代码
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
state = {
firstName: '',
showName: f
浏览 3提问于2018-10-19得票数 4
我们经常听说React中的两个阶段，DOM更新和重新呈现。我们知道，React使用协调和差异算法来更新DOM。同样，如果状态发生变化，react将重新呈现组件和子组件(如果未使用备忘录)。那么，这些DOM更新和重新呈现之间的基本区别是什么呢？
浏览 3提问于2021-06-12得票数 0
我想在DOM中添加React组件。接下来，我需要删除(隐藏)那个。然后，我想再一次添加(显示)所有的数据。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({ value: e.target.value })
}
r
浏览 1提问于2022-02-28得票数 0
我得到了这个错误：TypeError:无法读取未定义的的属性'setState‘
当我试图使用@react/renderer包在pdf中显示输入值时。
该错误准确地位于：{this.setState.title}行中。
有人能告诉我这个错误是什么原因吗?谢谢。这是我的密码：
import React, { Component } from 'react';
import { PDFDownloadLink, Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
cons
浏览 2提问于2020-11-19得票数 1
回答已采纳
在我用盖茨比创建的网站上，我想在第一次呈现DOM window.innerWidth之前检查它的大小。我想用一个有条件的检查innerWidth来决定网站应该如何呈现:作为桌面或移动版本。一个简单的修复方法是在创建react组件之前检查窗口的宽度，并在代码中进一步使用true/false值。它在开发版本中有效，但是..。情况是，在生产版本中，当我进行gatsby构建时，控制台中出现了一个错误：
failed Building static HTML for pages - 2.872s
ERROR #95312
"window" is not available dur
浏览 4提问于2020-07-30得票数 0
回答已采纳
我正在使用Gatsby和一个股票市场API来制作股票投资组合应用程序。目前，我对它进行了设置，以便当您通过股票代码搜索股票时，它会返回股票代码、市值和之前的收盘价。我也这样做了，这样当您单击滚动符号时，它会将您带到另一个Gatsby页面。在下一页上，我希望它带给您一个表，其中包含有关股票的更多数据。 我需要的功能是搜索在新选项卡中单击的滚动条符号，这样我就可以设置一个更详细的表。 index.js import React from "react"
import { Link } from "gatsby"
import axios from "axi
浏览 10提问于2020-06-17得票数 0
回答已采纳
2回答
我需要用一个从setState中获取的对象来实现redux store。问题是，当我在组件中调用setState时，我将得到undefined。知道如何用获取的数据来设置状态的默认值吗？
这是我的组成部分：
import React, { useEffect, Fragment, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
const contactDetails = useSelector((state) => state.contac
浏览 5提问于2022-02-06得票数 1
回答已采纳
我需要访问嵌套在处理程序函数中的函数中的React组件。
在嵌套函数中时，this不提供对组件的引用
所以我显式地声明了它，而不是做通常的this.setState(...)
有没有比我下面的代码更干净的方法呢？
React.createClass({
uploadImage : function() {
...
var componentReference = this
xhrRequest.onreadystatechange = function()
{if(request.readyState==4) {
compon
浏览 0提问于2015-07-19得票数 1
我正在努力学习反应，我正在努力重新定向到页面，其中显示了有关单击项目的详细信息。我增加了反应路由器，但我不知道从这里往哪里走。
我的brewery.js
import React from "react";
class Brewery extends React.Component {
render() {
const name = `${this.props.brewery.name} - ${this.props.brewery.city}`;
return <div>{name}</div>
}
}
export default Brew
浏览 0提问于2018-12-12得票数 0
回答已采纳
Iam面临此错误不变的冲突:未找到视图配置的名称路径。确保组件名称以大写字母开头。附件中显示的错误。
TimerController.js
import React, {Component} from 'react'
import { StyleSheet, Text, View } from 'react-native';
import WorkController from './WorkController'
export default class TimerControllers extends Component {
rend
浏览 1提问于2020-05-01得票数 0
回答已采纳
如何在此上下文中正确调用this.setState()？
我的ForgotPassword屏幕上有以下功能
handleForgotPassword(){
if(!this.validateInputs()) return;
const {email} = this.state;
const auth = firebase.auth();
//const setState = this.setState;
auth.sendPasswordResetEmail(email).then(function() {
this.setState({passwordEm
浏览 4提问于2019-11-17得票数 0
我已经习惯了export default React.memo(SomeComponent);，所以React可以回溯我的组件。
但是在一个文件中，我使用的是命名导出。如何使用React.memo()？
export { React.memo(MainPostTopic), React.memo(MainPostSubtopic) };
上面的线不起作用。
示例文件
function MainPostTopic(props) {
console.log('Rendering MainPostTopic...');
return (
<LS.Topic_H2
浏览 4提问于2020-01-03得票数 14
回答已采纳
我有两个useEffect挂钩，它们都将在startTime/endTime状态的变化中运行。
useEffect(() => {
if (selectedProduct) {
fetch(...)
.then(res => res.json())
.then(res => setMyState(res.data));
}
}, [selectedProduct, startTime, endTime]);
useEffect(() => {
if(selectedStep){
c
浏览 2提问于2021-05-19得票数 0
回答已采纳
我需要创建一个类似于this.setState的钩子，但是我不知道如何在this.setState中实现类似于回调的功能。你有什么想法吗？ import React, { useState } from 'react';
const useSetState = (initialState) => {
const [state, setState] = useState(initialState)
const setPartialState = (stateToSet, callback) => {
console.log('state
浏览 6提问于2020-06-24得票数 0
我发现一个问题后，更新我的反应版本从16.9.0到16.13.1。对于无状态组件，函数isValidElement(element)不再返回true。这似乎是$$typeof的一个问题。函数期望的值是Symbol(react.element)，但是无状态组件似乎都是Symbol(react.memo)。其他人碰到这个，你找到解决办法了吗？
浏览 2提问于2020-06-25得票数 0
在React中，我们使用setState更新组件的状态。setState是一个异步进程，所以如果我们在同一个函数中有多个setState。
问题：如何在内部处理更新的批处理？
场景1:
在componentDidMount中的for循环中更新状态，但在相同的执行周期中更新状态。
class TodoApp extends React.Component {
constructor(props) {
super(props)
var state = { count: 0 };
Object.defineProperty(this, 'state'
浏览 0提问于2019-09-10得票数 1
回答已采纳
为此，我采用了一种咖啡冲泡类型及其成本，并将其发送到另一个组件。用户在一个div中按下一个按钮，而另一个div应该从"Hello，How May Help You Today?“更新其文本。到“一”+“咖啡+ "？那将是$”+价格。诸若此类。
不过，我正在努力弄清楚如何启动这一系列事件。我所拥有的是：
import React, { Component } from 'react';
class Barista extends Component {
state = {
text: "Hello, How May I Help You Tod
浏览 0提问于2018-10-12得票数 0
你好，我的问题很简单。如何将单个值保存到localStorage；在存储它之前，它应该是什么数据类型。在阅读了2篇关于带有react的本地存储的文章和4篇关于StackOverflow的答案之后，我仍然无法理解自己，因为关于如何保持整个状态的示例。没有找到一个文件的反应和本地存储，也如果有人给我一个链接，它将是伟大的。我只是为这个例子编写了这段代码。提前谢谢你。
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 0提问于2019-05-10得票数 1
回答已采纳
2回答
在我的场景中，我有三个不同的屏幕，如Page1、Page2、Page3。在这里，如果用户上次访问第2页，那么下次如果用户打开应用程序，而不是显示page1需要显示page2。如何使用react-native应用程序实现这一点？
我试过使用async存储，但不知道如何管理多个页面
AsyncStorage.getItem("alreadyLaunched").then(value => {
if(value == null){
AsyncStorage.setItem('alreadyLaunched'
浏览 2提问于2020-04-13得票数 0
回答已采纳
1回答
我使用DatePickerIOS在DatePickerIOS的更改日期后对本机作出反应，车轮被旋转回旧日期，但在警报中显示新日期。
我想设置新日期和删除车轮旋转回旧日期问题。
import React, {Component} from 'react';
import {StyleSheet, View, DatePickerIOS, Text} from 'react-native';
import { StackNavigator } from 'react-navigation';
var moment = require('mo
浏览 0提问于2018-06-18得票数 0
回答已采纳
1回答
我正在使用ag- grid -react组件，我希望能够更改网格中的列标题，以响应React组件中的事件。我可以看到column API有一个getDisplayNameForColumn()函数，但是我找不到一个等效的设置函数来允许我更改列标题。
我将网格列定义数组存储在React组件的状态中，我认为只需在React框架自动刷新组件的状态下更新定义数组，就可以显示新的列标题；然而，这并没有发生，原始标题保持不变。
在网格初始化和显示后，是否可以更改列标题？我已经复制了下面React组件的代码。
import React, { Component } from 'react'
浏览 12提问于2017-01-16得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
