React hooks 篇 useRef 与 useContext

最新推荐文章于 2023-02-14 23:17:07 发布

xmr79

最新推荐文章于 2023-02-14 23:17:07 发布

阅读量217

点赞数 1

文章标签： react.js 前端 javascript typescript 前端框架

本文链接：https://blog.csdn.net/xmr79/article/details/128905188

版权

本文详细介绍了React Hooks中的useRef和useContext。useRef用于获取DOM元素，注册组件方法数据，以及在不同渲染周期间保持状态。而useContext则是一个状态共享器，通过创建并使用Context，可以在组件树中方便地共享状态，避免层层传递。文中通过实例讲解了这两个Hooks的用法和工作原理。

摘要由CSDN通过智能技术生成

useRef

useContext

useRef 获取dom元素 & 注册抛出组件方法数据 & 静态的跨渲染时机的状态

const initialState = 0;
const iref = useRef(initialState);

返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialState )。

只会在初始化的钩子生成一次

当current的值发生改变时并不会触发render

可以跨渲染时机拿到值

获取操作dom元素

import React, { useRef } from "react";

const RefDomFiber = () => {

  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => {
        inputRef.current?.focus();
      }}>input聚焦</button>
    </div>
  );
};

export default RefDomFiber;

注册一个ref，给input绑定上去，然后进行操作

可以跨渲染时机拿到值

当定义了一个useState的状态，给定一个延迟器然后console打印，在这期间进行数据state修改，在console打印时拿到的值依旧是延迟器之前的值。

const [num, setNum] = useState(0)
function clickhandle() {
  console.log('触发了打印事件')
  setTimeout(() => {
    console.log(`num的值： ${num}`);
  }, 3000);
}
return (
  <>
    <button onClick={() => {
      setNum(num + 1);
      console.log('num当前的值: ', num &