聊城正规网站建设公司电话,哪个应用市场软件最全,四川省建设厅职称网站,淘客网站开发流程react useRef使用与常见问题 文章目录 react useRef使用与常见问题1. Dom操作: useRef()2. 函数组件的转发: React.forwardRef()3. 对普通值进行记忆, 类似于一个class的实例属性4. 结合useEffect,只在更新时触发FAQ 1. Dom操作: useRef() // 1. Dom操作: useRef()let app doc…react useRef使用与常见问题 文章目录 react useRef使用与常见问题1. Dom操作: useRef()2. 函数组件的转发: React.forwardRef()3. 对普通值进行记忆, 类似于一个class的实例属性4. 结合useEffect,只在更新时触发FAQ 1. Dom操作: useRef() // 1. Dom操作: useRef()let app document.querySelector(#app);let root ReactDOM.createRoot(app);let { useState, useEffect, useRef } React;let Welcome (props) {const myRef useRef()const handleClick () {myRef.current.focus()}return (divbutton onClick{handleClick}点击/buttoninput ref{myRef} typetext //div);}let element (Welcome /);root.render(element);2. 函数组件的转发: React.forwardRef() // 2. 函数组件的转发: React.forwardRef()let app document.querySelector(#app);let root ReactDOM.createRoot(app);let { useState, useEffect, useRef, forwardRef } React;let Head forwardRef((props, ref) {return (divhello Head{/*将 ref 转发到子组件的input上 */}input ref{ref} typetext //div)})let Welcome (props) {const myRef useRef()const handleClick () {// 点击时候会触发子组件的focus事件myRef.current.focus()}return (divbutton onClick{handleClick}点击/button{/*ref 和组件关联*/}Head ref{myRef}/Head/div);}let element (Welcome /);root.render(element);3. 对普通值进行记忆, 类似于一个class的实例属性 // 3. 对普通值进行记忆, 类似于一个class的实例属性let app document.querySelector(#app);let root ReactDOM.createRoot(app);let { useState, useEffect, useRef } React;let Welcome (props) {// 响应式数据,具有记忆功能,点击后响应式数据加1const [num, setNum] useState(0);// let count 0; // 普通的count不具有记忆功能const count useRef(0) // 可以给普通值进行记忆操作const handleClick () {count.current;console.log(count.current);setNum(num 1)// console.log(num); // 还是之前的值}return (divbutton onClick{handleClick}点击/button/div);}let element (Welcome /);root.render(element);4. 结合useEffect,只在更新时触发 // 4. 结合useEffect,只在更新时触发let app document.querySelector(#app);let root ReactDOM.createRoot(app);let { useState, useEffect, useRef } React;let Welcome (props) {// 响应式数据,具有记忆功能,点击后响应式数据加1const [num, setNum] useState(0);const isUpdate useRef(false) useEffect((){// 只在点击时候触发if (isUpdate.current) {console.log(num);}})const handleClick () {setNum(num 1)isUpdate.current true// console.log(num); // 还是之前的值}return (divbutton onClick{handleClick}点击/button/div);}let element (Welcome /);root.render(element);FAQ
https://zh-hans.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function
