React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Hooks useState useRef

React Hooks的useState、useRef使用小结

作者：无妄的罪

React Hooks 是 React 16.8 版本引入的新特性，useState和useRef是两个常用的Hooks，本文主要介绍了React Hooks的useState、useRef使用，感兴趣的可以了解一下

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 和其他 React 特性。其中，useState 和 useRef 是两个常用的 Hooks。

1. useState

useState 是一个允许你在函数组件中添加 state 的 Hook。

使用说明：

代码示例：

import React, { useState } from "react"
import { Button } from 'antd';
 
const IndexPage: React.FC = () => {
  console.log("视图更新");
  /**
   * useState 唯一的参数就是初始 state 没有参数时为 undefined
   * useState()会返回一个数组
   * 索引0 useState传入的参数
   * 索引1 改变索引0的值并刷新视图 setObj是一个方法 参数为需要改变的值
   * 我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象
   **/
  const [obj, setObj] = useState({ count: 0 })
  const setCount = (obj: any) => {
    obj.count++
    // 当useState创建一个引用类型的变量时 setObj的内存地址与obj内存地址相同时useState不会更新视图
    // setObj(obj) // 不会更新视图 
    setObj({ ...obj }) // 会更新视图
    console.log(obj);
  }
  return (
    <div>
      {obj.count}
      <br />
      <Button onClick={() => setCount(obj)}>count+1</Button>
    </div>
  );
}
 
export default IndexPage

2. useRef

useRef 是一个可以存储任意数据类型的不可变（只读）引用（比如一个 DOM 元素或一个 React 组件）。ref 是一个响应式的引用，这意味着即使它的调用点没有发生改变，它的指向也会随着组件渲染而更新。

使用说明：

代码示例：

import React, { useRef } from "react"
import { Button } from 'antd';
 
const IndexPage: React.FC = () => {
  // useRef() 有一个参数为初始值
  const ref = useRef(1)
  console.log(ref);
 
  return (
    <div ref={ref}>
    </div>
  );
}
 
export default IndexPage

到此这篇关于React Hooks的useState、useRef使用小结的文章就介绍到这了,更多相关React Hooks useState、useRef 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文