In the development of
and the callback Ref is two powerful tools. useEffect
It is a multi -function hook to deal with various side effects, and the recovery REF provides more direct and more efficient methods in specific scenarios. useEffect
attribute of the element. This adjustment function receives the DOM element as a parameter, allowing you to: ref
useEffect
useEffect
import React, { useRef } from 'react'; function InputWithFocus() { const inputRef = useRef(null); const handleRef = (element) => { if (element) { element.focus(); } }; return <input ref={handleRef} />; }
import React, { useState, useRef, useCallback } from 'react'; function Chat() { const [messages, setMessages] = useState([]); const messagesEndRef = useRef(null); const scrollToBottom = useCallback(() => { if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: 'smooth' }); } }, [messages]); const handleSendMessage = () => { setMessages([...messages, "New Message"]); scrollToBottom(); }; return ( <div> {messages.map((msg, index) => ( <div key={index}>{msg}</div> ))} <div ref={messagesEndRef} /> <button onClick={handleSendMessage}>Send</button> </div> ); }
useEffect
Select the correct method import React, { useState, useEffect, useRef } from 'react'; function Chat() { const [messages, setMessages] = useState([]); const messagesEndRef = useRef(null); useEffect(() => { scrollToBottom(); }, [messages]); const scrollToBottom = () => { if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: 'smooth' }); } }; const handleSendMessage = () => { setMessages([...messages, "New Message"]); }; return ( <div> {messages.map((msg, index) => ( <div key={index}>{msg}</div> ))} <div ref={messagesEndRef} /> <button onClick={handleSendMessage}>Send</button> </div> ); }
The above is the detailed content of Callback Refs vs. useEffect: When to use which. For more information, please follow other related articles on the PHP Chinese website!