需要避免的五個(gè)react的ref錯(cuò)誤用法
前言
react是一個(gè)優(yōu)秀的框架，提供了我們很多的便利，但是在使用的過程中，我們也會(huì)遇到很多的問題，其中一個(gè)就是ref的使用，以下是我列出的5個(gè)使用ref的錯(cuò)誤用法，并提供了正確的用法。
錯(cuò)誤1: 當(dāng)使用ref更好時(shí)，卻使用state
一個(gè)常見的錯(cuò)誤就是明明使用ref更合適管理狀態(tài)的時(shí)候，但是卻使用state來存儲(chǔ)狀態(tài)。例如存儲(chǔ)定時(shí)器的間隔時(shí)間。
錯(cuò)誤用法: 我們將定時(shí)器間隔時(shí)間存儲(chǔ)在狀態(tài)中從而觸發(fā)了不必要的重新渲染。
import { useState, useEffect } from 'react';
export const CustomTimer = () => {
const [intervalId, setIntervalId] = useState();
const [time, setTime] = useState(new Date());
useEffect(() => {
const id = setInterval(() => {
setTime(new Date());
}, 1000);
setIntervalId(id);
return () => clearInterval(id);
}, []);
const stopTimer = () => {
intervalId && clearInterval(intervalId);
}
return (
<div>
<p>{time.toLocaleString()}</p>
<button onClick={stopTimer}>Stop Timer</button>
</div>
);
}
正確用法：將定時(shí)器間隔存儲(chǔ)在ref中，從而避免了不必要的重新渲染。
ref有個(gè)好處就是不會(huì)觸發(fā)組件的重新渲染，從而避免了不必要的性能問題。
import { useRef, useEffect } from'react';
export const CustomTimer = () => {
const intervalIdRef = useRef();
const [time, setTime] = useState(new Date());
useEffect(() => {
const id = setInterval(() => {
setTime(new Date());
}, 1000);
intervalIdRef.current = id;
return () => clearInterval(id);
}, []);
const stopTimer = () => {
intervalIdRef.current && clearInterval(intervalIdRef.current);
}
return (
<div>
<p>{time.toLocaleString()}</p>
<button onClick={stopTimer}>Stop Timer</button>
</div>
);
}
錯(cuò)誤2: 在設(shè)置ref的值之前使用ref.current而不是ref
我們在使用ref傳遞值給某個(gè)函數(shù)或者子組件的時(shí)候，使用的是ref.current而不是ref本身，直接使用ref本身的情況下，ref本身就是一個(gè)變化的對(duì)象，我們可以在組件渲染時(shí)使用ref.current來獲取當(dāng)前的值，但是在設(shè)置ref的值之前，ref.current的值是undefined，這就會(huì)導(dǎo)致我們的代碼出現(xiàn)錯(cuò)誤。
錯(cuò)誤用法: 下面的代碼無法運(yùn)行，因?yàn)閞ef.current最初為空, 因此，當(dāng)代碼運(yùn)行時(shí)，element為空。
import { useRef } from'react';
const useHovered = (element) => {
const [hovered, setHovered] = useState(false);
useEffect(() => {
if(element === null) return;
element.addEventListener('mouseenter', () => setHovered(true));
element.addEventListener('mouseleave', () => setHovered(false));
return () => {
element.removeEventListener('mouseenter', () => setHovered(true));
element.removeEventListener('mouseleave', () => setHovered(false));
};
}, [element]);
return hovered;
}
export const CustomHoverDivElement = () => {
const ref = useRef();
const isHoverd = useHovered(ref.current);
return (
<div ref={ref}>
Hoverd:{`${isHoverd}`}
</div>
);
}
正確用法: 我們需要在設(shè)置ref的值之前使用ref.current來獲取當(dāng)前的值。
import { useRef } from'react';
const useHovered = (ref) => {
const [hovered, setHovered] = useState(false);
useEffect(() => {
if(ref.current === null) return;
ref.current.addEventListener('mouseenter', () => setHovered(true));
ref.current.addEventListener('mouseleave', () => setHovered(false));
return () => {
ref.current.removeEventListener('mouseenter', () => setHovered(true));
ref.current.removeEventListener('mouseleave', () => setHovered(false));
};
}, [ref]);
return hovered;
}
export const CustomHoverDivElement = () => {
const ref = useRef();
const isHoverd = useHovered(ref);
return (
<div ref={ref}>
Hoverd:{`${isHoverd}`}
</div>
);
}
錯(cuò)誤3: 忘記使用fowardRef
在初學(xué)react時(shí)，我們可能都犯過這個(gè)錯(cuò)誤，直接給組件傳遞ref參數(shù)。事實(shí)上，React 不允許你將 ref 傳遞給函數(shù)組件，除非它被forwardRef包裝起來。解決辦法是什么？只需將接收 ref 的組件包裝在 forwardRef 中，或?yàn)?ref prop 使用另一個(gè)名稱即可。
錯(cuò)誤用法: 下面的代碼無法運(yùn)行，因?yàn)槲覀儧]有使用forwardRef來包裝組件。
import { useRef } from'react';
const CustomInput = ({ ref,...rest }) => {
const [value, setValue] = useState('');
useEffect(() => {
if(ref.current === null) return;
ref.current.focus();
}, [ref]);
return (
<input ref={ref} {...rest} value={value} onChange={e => setValue(e.target.value)} />
);
}
export const CustomInputElement = () => {
const ref = useRef();
return (
<CustomInput ref={ref} />
);
}
正確用法: 我們需要使用forwardRef來包裝組件。
import { useRef, forwardRef } from'react';
const CustomInput = forwardRef((props, ref) => {
const [value, setValue] = useState('');
useEffect(() => {
if(ref.current === null) return;
ref.current.focus();
}, [ref]);
return (
<input ref={ref} {...props} value={value} onChange={e => setValue(e.target.value)} />
);
})
export const CustomInputElement = () => {
const ref = useRef();
return (
<CustomInput ref={ref} />
);
}
錯(cuò)誤4: 調(diào)用函數(shù)來初始化ref的值
當(dāng)你調(diào)用函數(shù)來設(shè)置 ref 的初始值時(shí)，該函數(shù)將在每次渲染時(shí)被調(diào)用，如果該函數(shù)開銷很大，這將不必要地影響你的應(yīng)用性能。解決方案是什么？緩存該函數(shù)或在渲染期間初始化 ref（在檢查值尚未設(shè)置之后）。
錯(cuò)誤用法: 下面的代碼很浪費(fèi)性能，因?yàn)槲覀冊诿看武秩緯r(shí)都調(diào)用了函數(shù)來設(shè)置 ref 的初始值。
import { useState, useRef, useEffect } from "react";
const useOnBeforeUnload = (callback) => {
useEffect(() => {
window.addEventListener("beforeunload", callback);
return () => window.removeEventListener("beforeunload", callback);
}, [callback]);
}
export const App = () => {
const ref = useRef(window.localStorage.getItem("cache-date"));
const [inputValue, setInputValue] = useState("");
useOnBeforeUnload(() => {
const date = new Date().toUTCString();
console.log("Date", date);
window.localStorage.setItem("cache-date", date);
});
return (
<>
<div>
緩存的時(shí)間: <strong>{ref.current}</strong>
</div>
用戶名:{" "}
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</>
);
}
正確用法: 我們需要緩存該函數(shù)或在渲染期間初始化 ref（在檢查值尚未設(shè)置之后）。
import { useState, useRef, useEffect } from "react";
const useOnBeforeUnload = (callback) => {
useEffect(() => {
window.addEventListener("beforeunload", callback);
return () => window.removeEventListener("beforeunload", callback);
}, [callback]);
}
export const App = () => {
const ref = useRef(null);
if (ref.current === null) {
ref.current = window.localStorage.getItem("cache-date");
}
const [inputValue, setInputValue] = useState("");
useOnBeforeUnload(() => {
const date = new Date().toUTCString();
console.log("Date", date);
window.localStorage.setItem("cache-date", date);
});
return (
<>
<div>
緩存的時(shí)間: <strong>{ref.current}</strong>
</div>
用戶名:{" "}
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</>
);
}
錯(cuò)誤5: 使用每次渲染都會(huì)改變的ref回調(diào)函數(shù)
ref 回調(diào)函數(shù)可以很好的管理你的代碼，但是，請(qǐng)注意，每當(dāng)更改時(shí)，React 都會(huì)調(diào)用 ref 回調(diào)。這意味著當(dāng)組件重新渲染時(shí)，前一個(gè)函數(shù)將使用 null 作為參數(shù)調(diào)用，而下一個(gè)函數(shù)將使用 DOM 節(jié)點(diǎn)調(diào)用。這可能會(huì)導(dǎo)致 UI 中出現(xiàn)一些不必要的閃爍。解決方案？確保緩存（使用useCallback） ref 回調(diào)函數(shù)。
錯(cuò)誤用法: 下面的代碼無法正常工作，因?yàn)槊慨?dāng)inputValue或currentTime發(fā)生變化時(shí)，ref 回調(diào)函數(shù)就會(huì)再次運(yùn)行，并且輸入將再次成為焦點(diǎn)。
import { useEffect, useState } from "react";
const useCurrentTime = () => {
const [time, setTime] = useState(new Date());
useEffect(() => {
const intervalId = setInterval(() => {
setTime(new Date());
}, 1_000);
return () => clearInterval(intervalId);
});
return time.toString();
}
export const App = () => {
const ref = (node) => {
node?.focus();
};
const [nameValue, setNameValue] = useState("");
const currentTime = useCurrentTime();
return (
<>
<h2>當(dāng)前時(shí)間: {currentTime}</h2>
<label htmlFor="name">用戶名: </label>
<input
id="name"
ref={ref}
value={nameValue}
onChange={(e) => setNameValue(e.target.value)}
/>
</>
);
}
正確用法: 我們需要確保緩存（使用useCallback） ref 回調(diào)函數(shù)。
import { useEffect, useState, useCallback } from "react";
const useCurrentTime = () => {
const [time, setTime] = useState(new Date());
useEffect(() => {
const intervalId = setInterval(() => {
setTime(new Date());
}, 1_000);
return () => clearInterval(intervalId);
});
return time.toString();
}
export const App = () => {
const ref = useCallback((node) => {
node?.focus();
}, []);
const [nameValue, setNameValue] = useState("");
const currentTime = useCurrentTime();
return (
<>
<h2>當(dāng)前時(shí)間: {currentTime}</h2>
<label htmlFor="name">用戶名: </label>
<input
id="name"
ref={ref}
value={nameValue}
onChange={(e) => setNameValue(e.target.value)}
/>
</>
);
}
以上就是需要避免的五個(gè)react的ref錯(cuò)誤用法的詳細(xì)內(nèi)容，更多關(guān)于react的ref錯(cuò)誤用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React項(xiàng)目中className運(yùn)用及問題解決
這篇文章主要為大家介紹了React項(xiàng)目中className運(yùn)用及問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
組件的生命周期就是React的工作過程，就好比人有生老病死，自然界有日月更替，每個(gè)組件在網(wǎng)頁中也會(huì)有被創(chuàng)建、更新和刪除，如同有生命的機(jī)體一樣2022-12-12
這篇文章主要介紹了React中mobx和redux的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
React 18.2.0 引入了一系列并發(fā)機(jī)制的新特性,旨在幫助各位開發(fā)者更好地控制和優(yōu)化應(yīng)用程序的性能和用戶體驗(yàn),下面我們就來看看如何利用這些新特性構(gòu)建更高效、更響應(yīng)式的應(yīng)用程序吧2024-03-03
React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件
這篇文章主要介紹了React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React實(shí)現(xiàn)簡單登錄的項(xiàng)目實(shí)踐
登錄、注冊、找回密碼是前端項(xiàng)目經(jīng)常遇到的需求,本文主要介紹了React實(shí)現(xiàn)簡單登錄的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
很多朋友在安裝插件ES7 React/Redux/GraphQL/React-Native snippets還是不能完全支持jsx語法，糾結(jié)是什么原因呢，該如何處理呢，下面小編給大家分享本文幫助大家解決React-vscode使用jsx語法問題，感興趣的朋友一起看看吧2021-06-06
React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，支持iOS和安卓兩大平臺(tái)。本文將介紹React Native與IOS端之間的交互。2021-06-06