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。
使用说明：
useState返回一个状态变量和一个设置该变量的函数。- 如果传递给
useState的初始值是undefined，则返回的状态变量初始值为undefined。 - 你可以在组件的任何地方调用
useState，但通常建议在组件的顶层调用它。
代码示例：
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 IndexPage2. useRef
useRef 是一个可以存储任意数据类型的不可变（只读）引用（比如一个 DOM 元素或一个 React 组件）。ref 是一个响应式的引用，这意味着即使它的调用点没有发生改变，它的指向也会随着组件渲染而更新。
使用说明：
useRef返回一个可变的 ref 对象，其.current属性被初始化为传递的参数（或undefined）。.current的值在组件的整个生命周期内保持不变。- 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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！