128.《usestate和useRef 区别和应用场景》

在 ·react16.8· 以后，我们的函数组件的用户日益增长，这归咎于我们的hooks,是的react变成简单化，但同时也会遇到一些问题，

这篇博客主要是 useState 与 useRef的区别，以及实际使用场景，博客代码仅会涉及功能组件，需要的朋友麻烦点点赞

1.usestate

基本使用

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

再类组件我们通过 state = {} 或者子啊构造函数 [constructor](javascript:😉 中 的 this.state = {} 姐存储变量，在类组件中使用 react 内置的usestate 来存储状态

usetstae 示例

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count   1)}>
        Click me
      </button>
    </div>
  );
}

输出结果

如图我们的 count 可以存在 usestate中，hooks 中的 usestate相当于类组件中的 state 存储状态, 但是 usestate 有个问题，setCount 后不能立马得到更行后的最新值，下面让我们展示下问题吧

usestate 问题展示

 
import React, { useRef, useState } from 'react' 
import './less.css'
export default  ()=>{
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0); 

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => {setCount(count   1); console.log(count);}}>
        Click me
      </button>
    </div>
  );
}

输出结果

由输出结果可以看出，每次输出都是上次的旧值，得不到最新的值，在类组件是通过 setstate 第二个参数回调函数得到更新后的最新值，子啊函数组件中一般使用 useEffect 的第二个参数来监听我们需要变化的值，来获取变化后的最新值，但这并不适用于所有情况，例如：你在 jsx 中的某个 { } 打括号中写逻辑呢，显然 useEffect 是不能写在 jsx 中的，所以为了得到更新后的最新值 推荐使用 useRef （下面示例）

2. useRef 基本使用

作用1: 标识 dom 元素，可获取被标识元素的属性

作用2：存储变量，被包裹的变量不经过 render 函数，类似于全局变量，所以一旦 render 函数内部对状态进习修改，useRef 可得到最新的值

使用场景1（存储 dom 元素）

引入 useRef ，通过 ref 标识元素，被 ref 标识的元素会当作 useRef 的返回值，并且通过 useref.current 获取值，示例如下

 
import React, { useRef } from 'react' 
export default () => {
    let inputEl= useRef()
     const handleFocus = ()=>{
        console.log(inputEl);
     }
    return (
        <p>
            <input ref={inputEl} type="text" /> 
            <button onClick={()=>handleFocus()}>alert</button>
        </p>
    ) 
};

输出结果

通过 useRef 获取到了 被 ref 标记的 DOM 元素，Dom 元素获取到了，就可以获取到 DOM 元素身上的其他属性，比如 input 的 value

inputEl.current.value  // 可以的打斗文本框的 value 值

使用场景2（可获取useState更新后的最新值）

代码示例

 
import React, { useRef,useState } from 'react'  
export default () => { 
    let inputEl = useRef(0)
     const handleFocus = ()=>{
        inputEl.current  
        console.log('更新后的值', inputEl.current); 
     }
    return (
        <p>  
            {a}
            <button onClick={()=>handleFocus()}>单击我</button>
        </p>
    ) 
};

3.useState 与 useRef 区别

1. useState的值在每个rernder中都是独立存在的。而useRef.current则更像是相对于render函数的一个全局变量，每次他会保持render的最新状态。（useState异步更新其值，useRef同步更新。）

2. useState触发重新渲染，useRef不触发

3. useRef（）钩不仅用于DOM引用。“ ref”对象是通用容器，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。

4. 变量是决定视图图层渲染的变量，请使用useState，其他用途useRef

5. useRef特性：可变的ref对象，持久化

4.最近上班心得

上班真的好开心，需求bug来不停。

产品测试来回找，后端交互想上刑。

会议不停满楼跑，文档笔记要分清。

摸鱼睡觉一时爽，提测发布胆惊心。

大佬思绪跟得上，想法创意实践灵。

日常积累很重要，自我提高才算行。

暮然回首学生时，半载已过还未明。

处处少年何模样？如今胡须满颔停！

这篇好文章是转载于：学新通技术网