前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
总结
/* * 获取原生的DOM对象 * 1.可以使用传统的document来对DOM进行操作 * 2.直接从React处获取DOM对象 * 步骤： * 1.创建一个存储DOM对象的容器 * - 使用 useRef() 钩子函数 * 钩子函数的注意事项： * ① React中的钩子函数只能用于函数组件或自定义钩子 * ② 钩子函数只能直接在函数组件中调用 * 2.将容器设置为想要获取DOM对象元素的ref属性 * <h1 ref={xxx}>....</h1> * - React会自动将当前元素的DOM对象，设置为容器current属性 * * useRef() * - 返回的就是一个普通的JS对象 * - {current:undefined} * - 所以我们直接创建一个js对象，也可以代替useRef() * - 区别： * 我们创建的对象，组件每次重新渲染都会创建一个新对象 * useRef()创建的对象，可以确保每次渲染获取到的都是同一个对象 * * - 当你需要一个对象不会因为组件的重新渲染而改变时，就可以使用useRef() * * */
代码案例
import './App.css'; import {useRef, useState} from "react"; let temp; const App = () => { /* * 获取原生的DOM对象 * 1.可以使用传统的document来对DOM进行操作 * 2.直接从React处获取DOM对象 * 步骤： * 1.创建一个存储DOM对象的容器 * - 使用 useRef() 钩子函数 * 钩子函数的注意事项： * ① React中的钩子函数只能用于函数组件或自定义钩子 * ② 钩子函数只能直接在函数组件中调用 * 2.将容器设置为想要获取DOM对象元素的ref属性 * <h1 ref={xxx}>....</h1> * - React会自动将当前元素的DOM对象，设置为容器current属性 * * useRef() * - 返回的就是一个普通的JS对象 * - {current:undefined} * - 所以我们直接创建一个js对象，也可以代替useRef() * - 区别： * 我们创建的对象，组件每次重新渲染都会创建一个新对象 * useRef()创建的对象，可以确保每次渲染获取到的都是同一个对象 * * - 当你需要一个对象不会因为组件的重新渲染而改变时，就可以使用useRef() * * */ const h1Ref = useRef(); // 创建一个容器 const [count, setCount] = useState(1); // const h1Ref = {current:null}; // console.log(temp === h1Ref); // temp = h1Ref; const clickHandler = () => { // 通过id获取h1 const header = document.getElementById('header'); // alert(header); // header.innerHTML = '哈哈'; console.log(h1Ref); // alert(h1Ref.current === header); h1Ref.current.innerText = '嘻嘻！'; }; const countAddHandler = ()=>{ setCount(prevState => prevState + 1); }; return <div className={'app'}> <h1 id="header" ref={h1Ref}>我是标题{count}</h1> <button onClick={clickHandler}>1</button> <button onClick={countAddHandler}>2</button> </div>; }; // 导出App export default App;
