[React] Manipulate the DOM with React refs
React is really good at creating and updating DOM elements, but sometimes you need to work with them yourself. A common use case for this is when you’re using a third party library that wasn’t built for or with React specifically. To do this, we need to have some value that’s associated with our component (like state) to store a reference to the DOM element, but doesn’t trigger re-renders when it’s updated (unlike state). React has something specifically for this and it’s called a ref
.
You create a ref
object with the useRef
hook and that object’s current
property is the current value of the ref
. It can be anything, but if you pass that ref
object to a component as a prop called ref
, then React will set the current
property to the DOM element it creates so you can reference it and manipulate it in your useEffect
hook.
In this lesson we’ll get to see how that works with a cool library called vanilla-tilt.
function Tilt({ children }) { const tiltRef = React.useRef(); // refs provide a way to access DOM nodes or React elements created in the render method.
// we need to access DOM thought ref, so we need to render the DOM first, useEffect hook
// is the prefect place to do it.
React.useEffect(() => { // useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). const tiltNode = tiltRef.current; // The returned object will persist for the full lifetime of the component. const vanillaTiltOptions = { max: 25, speed: 400, glare: true, 'max-glare': 0.5 }; // Initiating VanillaTilt and passing tiltNode and vanillaTiltOptions VanillaTilt.init(tiltNode, vanillaTiltOptions); return () => { // ensuring that any node refs in memory get garbage collected // prevent memory leaks tiltNode.vanillaTilt.destroy(); }; // adding a dependencies array, to avoid multiple renders }, []); return ( // Referencing the useEffect hook return <div ref={tiltRef} className="tilt-root"> <div className="tilt-child">{children}</div> </div> ); }
相关文章
- 在单html页面中使用react并配置jsx
- react-navigation重复点击多次跳转的解决方案
- 02-React脚手架+Todos项目(组件拆分, State应用, 组件通信+数据校验, nanoid)
- 带你彻底读懂React任务调度以及背后的算法
- React-Navigation Integration with Redux
- react hook开发遇到的一些问题
- react源码解析16.concurrent模式_2023-03-15
- 移动开发者必备的 React Native 开发工具
- ORA-28086: The evaluation of the policy expression failed. string ORACLE 报错 故障修复 远程处理
- ORA-30158: The OCIFileWrite causes the file to exceed the maximum allowed size ORACLE 报错 故障修复 远程处理
- ORA-31053: The value of the depth argument in the operator cannot be negative ORACLE 报错 故障修复 远程处理
- ORA-38407: The ADT associated with the attribute set already exists. ORACLE 报错 故障修复 远程处理
- ORA-48409: The ADR homes exceeds the maximum number [string] ORACLE 报错 故障修复 远程处理
- ORA-48488: The predicate string exceeds the maximum length [string] ORACLE 报错 故障修复 远程处理
- ORA-48499: The value of the keyword “string” exceeds the maximum length string ORACLE 报错 故障修复 远程处理
- ORA-48929: The trace record size exceeded the max size that can be read [string] ORACLE 报错 故障修复 远程处理
- ORA-53410: The attribute string does not conform to the VM rule. ORACLE 报错 故障修复 远程处理
- ORA-01378: The logical block size (string) of file string is not compatible with the disk sector size (media sector size is string and host sector size is string) ORACLE 报错 故障修复 远程处理