react笔记之学习之useRef()和DOM对象

简介: react笔记之学习之useRef()和DOM对象

前言

我是歌谣 我有个兄弟 巅峰的时候排名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;

相关文章
|
7天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
28天前
|
前端开发 JavaScript 算法
深入理解前端框架:解析 React 的虚拟 DOM
虚拟 DOM 是 React 前端框架的核心概念之一。本文将深入探讨虚拟 DOM 的原理和应用,帮助读者更好地理解 React 框架的工作机制,并学习如何高效地使用虚拟 DOM 进行前端开发。
22 1
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
2月前
|
JavaScript 前端开发
vue、react中虚拟的dom
vue、react中虚拟的dom
|
4天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
1月前
|
JavaScript 前端开发 算法
说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系?
说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系?
13 0
|
1月前
|
XML JavaScript 前端开发
说说React jsx转换成真实DOM的过程?
说说React jsx转换成真实DOM的过程
12 0
|
1月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
61 2
|
2月前
|
JavaScript 前端开发
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
【HTML+REACT+ANTD 表格操作】处理(改变)数据,改变DOM
|
2月前
|
存储 前端开发 JavaScript
[React] useRef用法和特性
[React] useRef用法和特性

相关产品

  • 云迁移中心