如何避免在react中使用useRef重新渲染？
在React中，使用useRef可以创建一个可变的引用，它可以在组件的整个生命周期中保持不变。然而，当使用useRef重新渲染组件时，可能会遇到一些问题。以下是避免在React中使用useRef重新渲染的几种方法：
- 将useRef放在组件外部：将useRef定义在组件外部，这样它就不会在组件重新渲染时被重新创建。这样可以确保在组件重新渲染时，useRef的引用保持不变。
- 使用useMemo包装useRef：可以使用useMemo将useRef包装起来，这样可以确保在组件重新渲染时，只有在依赖项发生变化时才会重新创建useRef。例如：
const ref = useMemo(() => useRef(), []);- 使用useState代替useRef：在某些情况下，可以使用useState来代替useRef。useState可以在组件重新渲染时保持其状态不变。例如，可以使用useState来存储一个值，并在需要时更新它，而不是使用useRef。
- 使用shouldComponentUpdate或React.memo：如果组件的重新渲染是由于父组件的重新渲染而引起的，可以使用shouldComponentUpdate或React.memo来避免子组件的不必要重新渲染。这些方法可以根据组件的props或state是否发生变化来决定是否重新渲染组件。
总结起来，避免在React中使用useRef重新渲染的方法包括将useRef放在组件外部、使用useMemo包装useRef、使用useState代替useRef以及使用shouldComponentUpdate或React.memo来避免不必要的重新渲染。这些方法可以提高React应用的性能和效率。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
我想随机显示两个不同的DIVs :一个或另一个。因此，我尝试保留一个随机的布尔状态变量，并根据它进行渲染。 为了简单起见，我们试着在蓝色框中显示蓝色标志，在红色框中显示红色标志。 import React, {useState} from 'react';
const Loader = () => {
const [redLoader, setRedLoader] = useState(Math.random() < 0.5);
const loader = redLoader ?
<div style={{ backgroundCol
浏览 19提问于2021-09-02得票数 0
回答已采纳
1回答
我对重渲染有问题。每次用户关注输入时，它都会重新呈现，甚至是在输入上。每次用户键入一个单词，函数组件重新呈现，但我有大的数据，这使得一切都非常缓慢。
import { useState } from "react";
import "./styles.css";
export default function App() {
const [containerID, setContainerID] = useState();
const [searchVal, setSearchVal] = useState();
return (
<
浏览 1提问于2022-01-14得票数 0
回答已采纳
我想在两个盒子之间划一条线。所以我有两个框的组件，我希望第三个组件呈现为这两个组件之间的一条线。在渲染完成之前，我不知道这两个框的位置和尺寸，因为这将取决于其他组件的渲染。为了绘制这条线，我需要两个框相对于一个共同的父元素的位置。(这条线是用绝对位置绘制的，所以不会影响长方体。) 所以问题是，我如何在React中做到这一点？如果我正确理解React，信息在树中向下传递，但可以通过回调向上流动。但是组件只是将react元素传递给框架，而实际的渲染是在后台进行的。那么我如何访问渲染的结果，例如DOM元素的最终坐标？ 此外，如果我将此信息(框的坐标)向上传递给一个公共祖先并将其存储在state中，
浏览 26提问于2021-10-30得票数 0
4回答
我正在用react和react-leaflet制作地图。React Leaflet有一个名为FeatureGroup的类，我希望在第一次呈现时使用React中的useRef钩子访问它，然后访问useEffect函数中的值。但是，在初始渲染时，引用是未定义的(markerRef.current返回null)。只有在我对代码进行任何类型的更改后，保存并重新加载React应用程序，它才会获得值
你能告诉我我做错了什么吗?我怎样才能使markerRef.current在初始渲染时不为空？
请在下面找到组件的缩写代码：
import {useRef} from 'react';
im
浏览 3提问于2021-01-29得票数 2
我的项目是React Native，但这是一个一般性的React问题。我需要获得视图相对于根元素的Y位置(这样我就可以对PanResponder中的pageY事件进行一些计算)。这个视图是在一个具有ScrollView的父组件中，我需要在滚动时更新此值，因为它将发生更改。 我可以使用onLayout和measure回调在视图中进行测量，所以我的问题是，当滚动发生时，我应该如何重新计算？我有一个有效的解决方案，但我不确定它在性能方面是否理想，或者我是否以一种不必要的冗长方式进行了处理。 我的解决方案是使用onScroll事件来设置我向下传递给视图的一段状态，然后在useEffect中将其用作重
浏览 17提问于2020-04-03得票数 1
回答已采纳
1回答
我正在构建一个应用程序React Native，我将一组音频文件发送到一个Expo AV Audio.Sound对象中，加载它们，播放它们，然后尝试用正在播放的音频文件的相关信息(特别是用户在文件中走了多远)来更新应用程序本身的显示。我正在尝试通过useState钩子更新显示，该钩子由音频播放器的回调函数调用。 我遇到的问题是，每当我试图更改音频播放器回调函数的状态时，我都会被抛入无限的重新渲染。简化代码如下： import React, { useState} from 'react';
import { Audio } from 'expo-av';
c
浏览 15提问于2019-09-30得票数 1
回答已采纳
1回答
我目前正在移植一个旧的普通JS应用程序来反应。旧的应用程序在SSE流上接收日志消息/事件，并将其附加到DOM。一切都是实时可见的(实时更新)，渲染速度相当快(如果日志已经存在，则需要大约130ms来获取和显示300个日志)。 在React中做同样的事情似乎很棘手。我使用了一个useEffect钩子来订阅SSE流，并且我在onmessage回调中调用了setState。一切正常( SSE连接成功建立一次，正确关闭，输出正确)，但它真的很慢。 我在整整10秒内没有得到任何输出，然后立即显示所有内容(没有实时更新)。我已经做了一些调试。setState()调用不会在此上下文中进行批处理(我想这没问
浏览 16提问于2020-10-23得票数 0
1回答
我使用create-react-app创建了一个新的React应用程序，并使用render counter进行了测试。 考虑以下代码： import React, { useState } from "react";
let render = 0;
export default function App() {
const [counter, setCounter] = useState(0);
render++;
return (
<div>
<button
onClick={() => setC
浏览 13提问于2020-12-29得票数 1
import { useEffect } from "react";
const GoogleTranslate = () => {
useEffect(() => {
let addScript = document.createElement("script");
addScript.setAttribute(
"src",
"//translate.google.com/translate_a/element.js?cb=googleTranslateEl
浏览 8提问于2022-09-28得票数 0
回答已采纳
参考：
我的目标是防止当用户拖动地图时重新渲染，同时也更改市场坐标。当前的解决方案是使用useState挂钩。但它会导致组件重新渲染，从而导致应用程序延迟。
我尝试使用let variable，但它不能移动marker。
tl:dr Screen.js
import React from 'react';
import {StyleSheet, View} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
const
浏览 2提问于2020-09-26得票数 0
1回答
有没有什么办法可以强制使用ref重新渲染组件？
可能是这样的：
const CustomComp=React.memo(React.forwardRef(({...props},ref)=>{
return(<View ref={ref} style={...}></View>);
}));
export default function App() {
const Mainref=useRef();
return(<View>
<Pressable onPress={()=>{Mainref.TriggerRend
浏览 2提问于2021-10-30得票数 0
我有一个反应组件，管理用户登录和退出，当用户在登录字段中键入电子邮件和密码时，整个组件(导航栏)在每次击键时重新渲染到Dom中，从而降低速度。 当用户在登录文件中键入凭据时，如何防止重新呈现导航栏？ import React, { useContext,useState } from 'react';
import { Postcontext } from '../contexts/Postcontext';
import axios from 'axios';
const Navbar = () => {
const { to
浏览 37提问于2020-04-13得票数 3
回答已采纳
4回答
所以最近我开始了一个有趣的项目来玩弄NextJS。 我遇到了一个关于我的计数状态的问题： //Core
import React, { useState, useEffect } from 'react';
//Style
import styles from './form.module.scss';
export default function Form({ placeholder }) {
const [count, setCounter] = useState(0);
return (
<form>
&l
浏览 26提问于2021-07-05得票数 0
回答已采纳
我是否应该使用useRef保存count, page, perPage和update的统一控件视图渲染。
如何以更好的方式优化此代码？
function LogTable(props) {
const {queryText, menuKey, parentKey} = props;
const count = React.useRef(1);
const page = React.useRef(0);
const perPage = React.useRef(20);
const [data, setData] = React.useState([]);
浏览 0提问于2021-03-25得票数 1
我有一个组件，它在收到套接字消息时更新状态。它看起来是这样的： SocketComponent.js import React, { useEffect, useState } from 'react';
import ExampleComponent from './ExampleComponent.js';
import socketIOClient from "socket.io-client";
const socket = socketIOClient("http://localhost:8080");
const
浏览 10提问于2021-01-17得票数 1
回答已采纳
1回答
从钩子中返回价值承诺
、、、
所以我试图成为一个聪明的人--$$，并从钩子中返回一个承诺(这样我就可以等待这个值，而不是等待钩子在其解析和钩子重新运行后给我的值)。我试着做这样的事情，一切都很顺利，直到解决为止。.then似乎从未运行过，这告诉我，我设定的决心并没有正确启动。下面是代码：
function App() {
const { valPromise } = useSomeHook();
const [state, setState] = React.useState();
React.useEffect(() => {
valPromise.then(r => {
浏览 2提问于2022-10-21得票数 3
回答已采纳
1回答
我有一个向帖子添加掌声的函数。我不想为每个clap添加一个clap，因为这在我的mysql服务器上是疯狂的，更不用说http请求和重新渲染了。相反，我希望让掌声加起来，并且仅当用户停止添加掌声几秒钟后，才将掌声添加到数据库中。所以我的函数将掌声正确地存储在状态中，但它每次都会运行函数，并且永远不会清除超时。 let sendClapsToDB
_clapForPost = (postId) => {
clearTimeout(sendClapsToDB)
setClaps(() => claps + 1)
sendClapsToDB = s
浏览 44提问于2019-09-22得票数 1
回答已采纳
假设我创建了一个自定义钩子，它将返回一些状态和一个函数，因此可以修改该状态。 我将这个钩子与一个组件一起使用，并且只关心它返回的函数，而不关心状态。所以我从钩子中解构了这个函数。 当我调用这个函数时，因为我使用的是钩子(不管我是关心还是获取它的状态)，它似乎会导致在组件上重新渲染，因为钩子将会更新。 我已经创建了此here的一个示例 以下是代码的副本： import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css"
浏览 7提问于2019-12-22得票数 0
回答已采纳
使用React的新效果钩子，我可以告诉React跳过应用某个效果，如果某些值在applying的文档中的重呈现示例中没有改变：
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
但是上面的例子适用于初始呈现时的效果，以及count已更改的后续重新呈现时的效果。如何判断反应跳过最初渲染的效果？
浏览 3提问于2018-11-06得票数 180
回答已采纳
我试图在react的表格中制作粘性标题，为了做到这一点，复制了表格标题，并使容器相对于表格div的绝对位置。但问题是表单元格的宽度并不相同。我想要获取表中每一列的宽度，并设置粘性标题列的宽度，使它们相同。渲染后如何操作？
代码结构如下：
<div className="tableDataContainer">
<div className="stickyHeader">
<Table>
<TableHead></TableHead>
<
浏览 76提问于2021-05-14得票数 2
我在react原生应用程序中的许多组件都需要知道当前每秒的时间。这样我就可以显示更新的实时信息。
我用new Date()创建了一个简单的功能来设置状态，但是每当我设置状态时，组件都会重新呈现，这是对我的浪费。这就是我所拥有的：
...
export default function App() {
const [currentDateTime, setCurrentDateTime] = useState(() => new Date().toLocaleString());
useEffect(() => {
const secondsTimer = setI
浏览 0提问于2020-08-14得票数 1
我已经简化了下面的问题，我使用useEffect来确保dom在选择项之前已经渲染，这很好用，并且在尝试获取这些元素之前不需要超时，但是如果我想在另一个组件中使用这些值，我该如何访问它们呢？ printAll()函数找不到变量。 import React, { useEffect } from 'react';
const Warning: React.FC = () => {
useEffect(() => {
const confirm = document.getElementById("confirm");
const
浏览 84提问于2019-09-08得票数 4
回答已采纳
在我的React应用程序中，我将在单个组件中多次实现useState。然后，在我的useEffect中，我将更改其中几个的状态： import React, { useState, useEffect } from 'react';
const Projects = React.memo(function (props) {
const [someState1, setSomeState1] = useState(false);
const [someState2, setSomeState2] = useState(false);
const [
浏览 50提问于2020-04-15得票数 2
回答已采纳
当一个道具改变时，我正在尝试重新渲染一个组件。我的组件使用了一个自定义钩子来保存窗体的状态。在useEffect中，每当名为refresh的属性发生变化时，我都希望重新呈现页面。我已经尝试了无数的解决方案，包括创建一个forceUpdate函数并在属性发生变化时调用它，我尝试更改状态以便组件应该重新呈现，但我的for中的信息不清楚。下面是我的代码。
组件：
const CustomerInformationForm = (props) => {
const [triggerRefresh, setTriggerRefresh] = useState();
const initia
浏览 0提问于2020-07-20得票数 1
1回答
假设有一个简单的表单，它使用一些布局调整呈现多个自定义组件。
自定义组件是：<UsernameInput />、<PasswordInput />、<DateTimePicker />、<FancyButton />、<Checkbox />
表单组件的JSX如下所示：
return (
<View style={globalStyles.flex}>
<View style={styles.inputsContainer}>
<UsernameInput
..
浏览 3提问于2022-03-29得票数 0
回答已采纳
3回答
假设我使用useEffect在初始渲染时预取数据：
function myComponent(props) {
const { fetchSomething } = props;
...
...
useEffect(() => {
fetchSomething();
}, []);
...
...
}
我的林特警告我"React Hook useCallback has missing dependencies“。它希望我将fetchSomething放在依赖数组中。
问题是，即使它的fetchSomethi
浏览 2提问于2019-06-02得票数 2
我正在制作表单组件。(它是函数组件)它是不受控制的组件，因为我不希望在Input组件中出现不必要的呈现。但它有一个意想不到的词。
我尝试在Input组件中使用setState()设置值，并通过值道具onChange。它并不是将整个值从Form传递给Input。
我不想要不必要的渲染。但是，当我在电子邮件中输入值时，同时使用密码进行呈现。
我该如何解决这个问题？
代码沙箱连接
或密码
(输入部分)
import React, { useEffect, useState } from "react";
const Input = ({ type, placeholder, onC
浏览 0提问于2021-11-05得票数 0
回答已采纳
我尝试使用react钩子而不是基于类的组件，但在性能方面遇到了一些问题。 代码： import React, { memo, useCallback, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
let counter = -1;
function useToggle(initialValue) {
const [toggleValue, setToggleValue] = useState(initialValue
浏览 34提问于2019-02-14得票数 1
回答已采纳
我正在尝试使用React钩子来运行依赖于鼠标位置的画布动画。我使用鼠标位置的自定义钩子，并编写了另一个自定义钩子来动画画布。
在动画挂钩中放置一个空的依存关系数组可防止它在鼠标移动时随时卸载和重新挂载动画循环，如中提到的和中的注释所建议的那样。
因此，下面的代码可以工作，因为我可以在drawNow()函数中访问coords，但是每次鼠标移动时安装和卸载动画循环似乎不是一种可接受的方式。
一个访问事件监听器如何在React钩子中故意设置为没有依赖关系？
下面是动画和绘图函数...
const drawNow = (context,coords) => {
context.fillS
浏览 15提问于2019-10-30得票数 0
回答已采纳
1回答
清除ref中的自定义事件
、、、
我有一个自定义元素，它在react中分派一个自定义事件。由于没有简单地绑定事件的方法，我需要手动创建一个eventListener并删除它。
我试过：
export function App() {
const textRef = useRef<DemoTextElement>(null);
let eventRef;
const logEvent = (e) => {
console.log(e)
}
useEffect(() => {
if(textRef.current) {
eventRef = textRef.c
浏览 4提问于2021-11-05得票数 0
我刚刚开始了一个新的创建-反应-应用项目，并注意到，反应是渲染组件两次！我在package.json中的react版本是"react": "^16.13.1"
import React, { useRef } from "react";
const App = () => {
const renders = useRef(0);
console.log("renders: ", renders.current++);
return (
<div>
Hello
</
浏览 0提问于2020-08-01得票数 5
回答已采纳
1回答
我收到了这个Eslint错误： 从React Hook useCallback内部对'_engine‘变量的赋值将在每次渲染后丢失。若要在一段时间内保留该值，请将其存储在useRef钩子中，并将可变值保留在“.current”属性中。否则，您可以直接在useCallback.eslint(react-hooks/exhaustive-deps)中移动此变量 从下面的代码： const RtcEngineInit = useCallback(async () => {
const {appId} = appInit;
_engine = await RtcEn
浏览 20提问于2020-12-18得票数 0
嘿，所有人都给出了一个具有componentWillReceiveProps的基本react组件。我想将其转换为使用react钩子。现在我已经看过这个问题了，here，虽然答案很简单，但我觉得我好像错过了什么。例如： export class Example extends React.Component {
constructor(props) {
super(props);
}
componentWillReceiveProps(nextProps) {
console.log('HELLO WORLD') // Note this isn&
浏览 30提问于2020-04-23得票数 0
回答已采纳
我只关心，我知道当道具改变时，组件将被重新渲染。React无法对传递给props的新旧对象执行深度比较，因此： { key: 'value' }和{ key: 'value' }总是不同的，并导致重新渲染。 像这样将对象传递给道具怎么样： <Component smth={JSON.stringify({ key: 'value' })}/> 它是一个字符串，所以反应能有效地比较新旧吗？
浏览 20提问于2020-04-16得票数 3
回答已采纳
我正在尝试使用React Hooks构建一个输入组件，它命中远程服务器，以便仅在组件卸载时保存更新值。
远程服务器调用的开销很大，因此我不希望每次输入更新时都访问服务器。
当我在useEffect中使用清理钩子时，我需要将输入值包括在效果依赖数组中，这使得远程API调用在每次更新输入值时执行。如果我没有在效果依赖数组中包含输入值，则永远不会保存更新后的输入值。
下面是一个显示问题并解释预期结果的代码沙箱：
有没有可能使用React钩子来实现这一点？我知道它违背了钩子范式的一部分，但毫无疑问，这是一个足够常见的用例，它应该是可能的。
浏览 15提问于2019-10-31得票数 6
回答已采纳
我正在尝试使用React - navigations为React Native创建一个可重用的SplitView组件，这样父级导航器就可以在它们的子级上执行导航。为了实现这一点，我使用ref以编程方式在嵌套导航器上执行导航。然而，我遇到了一个问题，当我的应用程序重新渲染时，我所有的导航引用都变成了： { current: null } 而且我不能执行任何进一步的导航。 以下是演示此问题的Snack project的链接。请注意，您必须在App.js中取消13-17行的注释才能看到该问题。注释掉的useEffect是用来强制初始重新渲染的。没有它，导航就能正常工作。 关于这个用例，"N
浏览 48提问于2020-07-29得票数 1
遵循以下方法，在React.js中单击按钮时动态显示
导入语句：
import * as bootstrap from 'bootstrap';
按钮单击提交处理程序：
let toastEl = document.getElementById('myToast');
let toast = new bootstrap.Toast(toastEl, {autohide: false});
toast.show();
渲染：
<div class="toast align-items-center" id="myToast"
浏览 34提问于2021-06-12得票数 3
回答已采纳
我正在尝试实现一个简单的Header组件，在这个组件中，header会在到达某个滚动位置后隐藏起来。 我提出了以下解决方案，并认为只有当headerState的值实际发生更改时，才会重新呈现Header组件，但实际情况并非如此。该组件将在每次滚动位置更改时重新呈现，甚至在未调用setHeaderState时也是如此。 这里我漏掉了什么？它是不是因为我在使用useWindowScroll而重新渲染，我能以某种方式避免它吗？ import { useWindowScroll } from "react-use";
const useHeaderState = () =>
浏览 51提问于2019-10-01得票数 0
回答已采纳
如果我们不能在功能组件中创建引用，那么useRef是如何创建引用的呢？以这个代码为例-
import "./styles.css";
import {useRef} from "react";
const App = () => {
const inputElement = useRef();
const focusInput = () => {
inputElement.current.focus();
};
return (
<>
<input type="text
浏览 2提问于2022-06-13得票数 -1
回答已采纳
const {useRef, useState} = React;
function List(){
const renderCount = useRef(0);
console.log('<List /> is rendered', ++renderCount.current);
const [isClicked, setIsClicked] = useState(false);
const toggle = () => setIsClicked(!isClicked)
return (
<div>
浏览 7提问于2019-06-03得票数 2
回答已采纳
我是一个使用reactjs的初学者。现在我有一个优化我的reactjs项目的情况。我有一个来自material-ui的自动完成组件，它是从我的父组件中分离出来的，所以任何来自自动完成的关键更改都不会导致重新渲染我的整个父组件。现在我的问题是将我的状态从子组件更新到父组件，因为它会重新呈现包括父组件在内的内容。关于如何避免重新渲染父组件，有什么建议吗？我的目标是一个不可能的场景吗？对于像我这样的初学者来说，关于如何优化从孩子到父母的传递/更新状态的建议/答案是很受欢迎的。 我知道setState函数会导致重新渲染。在我的父组件中，我如何避免在SearchTrainingData函数中使用set
浏览 20提问于2021-08-31得票数 0
回答已采纳
我有一个react组件，我想让它的innerHTML作为道具传递给iframe。
render() {
const page = <PrintPage />
const iframeContent = page..something...innerHTML
return (
<iframe srcDoc={iframeContent}/>);
}
有没有办法这样做。
我只想在iframe中渲染，所以我不能使用ref。我想要未挂载的组件的innerHTML
浏览 5提问于2017-08-02得票数 7
我一直在尝试useEffect钩子，但遇到了一个我不知道如何解决的问题。 我已经编写了一个简单的计数器示例，它在useEffect中使用setTimeout更新值。 if (countState.stopWatch === 0) {
dispatch({ type: 'reset' });
}
else {
const timeId = setTimeout(() => {
console.log("Timeout " + JS
浏览 42提问于2020-04-10得票数 0
我正在使用Axios从后端获取数据。我知道，在react中，18个严格的模式组件被渲染了两次。移除严格模式是错误的做法，因为它帮助您捕获错误。获取数据两次会破坏我的代码，因为我最终得到的另一个令牌与存储在后端的令牌不匹配。有没有办法确保只调用一次Axios电话？下面的代码。
import React, { Component } from "react";
import axios from "axios";
import history from "../../history";
class Authenticate extends Comp
浏览 6提问于2022-11-11得票数 0
我有一个自定义的钩子，它创建一个web worker并向worker注册一个回调： const useMyHook(callback){
React.useEffect(() => {
let worker = /// create worker
worker.onmessage = callback
}, [callback])
} 要使用钩子，用户必须知道将回调包装在React.useCallback中，否则每次渲染都会创建一个新的worker。 const callback = React.useCallback(() => doSomething
浏览 15提问于2020-04-02得票数 1
4回答
我在这个组件中对音频使用react-native-sound，并希望从传递给该组件的url文件中播放。问题是，如果在函数组件中声明了var音频，那么每次组件呈现时，都会再次创建变量，这会将声音文件作为新实例播放，并且我们会在彼此的顶部多次播放相同的声音。 import Sound from "react-native-sound"
var audio = new Sound.. //Works if declared here but cant's pass url prop
const SoundPlayer: FC<SoundProps> = ({
浏览 83提问于2021-10-28得票数 2
回答已采纳
我正在为react中的鼠标事件"mouseover“而苦苦挣扎。在每次调用时，我必须更新状态并将该值传递给另一个组件。
const [posX, setPosX] = useState(0)
...
<Parent onMouseOver={e=> setPosX(e.target.offsetX)}>
<Children offset={posX} />
</Parent>
所以我的问题是，如何避免在更新状态时重新呈现父组件？
浏览 24提问于2021-05-18得票数 0
我试着用ReactJS创建一个简单的计时器应用程序，并在互联网上找到了下面的代码。
我们传递给useEffect的函数是否会随着依赖项的更改而执行，还是在每个依赖项的更改中重新创建，然后执行？
另外，我控制台记录useEffect的返回函数，它与每个呈现一起运行。它是否仅在组件卸载时才运行？还是每次渲染？
import { useEffect, useState } from "react";
const App = () => {
const [isActive, setIsActive] = React.useState(false);
const [is
浏览 1提问于2022-01-14得票数 1
我在React JS上使用Flickity插件，所有的工作。但是，我想创建像https://brand.uber.com这样的滑块(最佳示例部分)。 在https://github.com/metafizzy/flickity/issues/77上发布的解决方法示例可以工作，但我对播放和暂停功能有问题。 问题是更新(window.requestAnimationFrame)；是在考虑暂停之前重新呈现组件。我已经尝试了本地状态和redux，但它在我可以发送之前重新渲染。我使用的是函数comp和下面的代码。 const carouselIsScrolling = useSelector(isS
浏览 9提问于2021-01-07得票数 0
回答已采纳
我是个打字新手。我想在自定义钩子中给ref分配一个函数。这样函数就不会在渲染过程中发生变化。
Codesandbox链接。
function something(params?: any) {
console.error('params: ', params);
}
const someRef = React.useRef(null); //how do i assign type here.
async function someAsyncFunc() {
try {
const a = await something();
something(a);
浏览 0提问于2019-04-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
