浅谈react中的state和ref

相信大家对react框架都有了解啦，接下来我们切入正题讲一下我在项目中所遇到的关于state和ref的总结。

1state

state是状态管理，每次我们需要变更状态时，需要用setState方法来变更。在此之前，我在react中定义任意一个变量，然后通过改变这个变量来记录。

我是通过这个变量来控制className来改变一个部分的背景样式，之前遇到很多类似这样的问题，发现通过其他的变量都不行，变量的值变了，但是效果并不能实现，只能在state中定义才可以实现，后来查了资料并看了官方文档，才发现我对state这个并没有理解，由于背景颜色会变化，这是需要重新触发render函数渲染页面，用setState改变state的状态正好可以重新渲染触发render函数。

2ref

查了很多资料，对ref这个解释最多的就是 *** 作dom，还是不是很理解，但是后来通过自己去观察，去学习，对ref有了一点点理解。

ref使用在普通的标签上，就是拿到了这个标签元素。

如果ref作用在组件上，对组件进行实例化，可以 *** 纵组件，调用组件内部封装的一些函数。但是注意的是，函数组件不可以使用ref，因为函数组件没有实例。

这些纯粹是我自己做工作过程中对这些的理解啦，也不一定完全正确，希望大家批评指正啦！

以前的字符串式refs（thisrefsxxx）已被遗弃，这里整理的都是最新版本的用法

前言：

先说下React refs的主要用途吧，主要用于直接调用某个节点或者组件实例。

我把它的各种用法大致分为了两大类

一类：是没有跨越中间子组件的节点或实例，也就是单个组件内部调用其直接return中包含的React元素，或者是return中包含其他自定义组件。

二类：是跨越了中间子组件的节点或实例，如：父组件调用自定义组件中的某个React元素。

特别说明：ref是不能作用到函数组件上的，但是可以在函数组件中使用ref，因为函数组件没有实例。ref本身返回也是某个节点，或者某个组件的实例。

这样说着似乎有些抽象空洞，下边上张对比图好了

下边具体笔录下这2类具体的用法

1：常规用法

ReactcreateRef() 和 ref的配合使用

用例：

2：ref回调（个人最爱的一种方式）

这种低版本的React也是支持的，它不同于createRef()，它接受一个函数，以dom元素或者React组件实例作为参数，以使它们能在其他地方被存储和访问。

一种：ref转发

主要通过forwardRef 和 createRef的配合使用

官方并不推荐使用它，下边是官方的建议内容！

当你开始在组件库中使用 forwardRef 时，你应当将其视为一个破坏性更改，并发布库的一个新的主版本。  这是因为你的库可能会有明显不同的行为（例如 refs 被分配给了谁，以及导出了什么类型），并且这样可能会导致依赖旧行为的应用和其他库崩溃。

出于同样的原因，当 ReactforwardRef 存在时有条件地使用它也是不推荐的：它改变了你的库的行为，并在升级 React 自身时破坏用户的应用。

用例：

在高阶组件中转发 refs 

用例：

二种：将ref的值作为组件的属性往下传递到目标节点或者实例。

1：传递createRef

用例：

2：传递ref回调

用例：

React中的useRef钩子函数提供了一个获取DOM元素的方式。通过useRef创建一个引用，我们可以将其附加到React元素上，并在需要读取或修改该元素时访问它。而ReactuseRef()会返回一个可变的 ref 对象，它的 current 属性被初始化为传入的参数（initialValue）。

如果在 useEffect 或者某个事件回调中想要获取最新挂载后的节点的话，就应该使用 ReactuseRef 并将其赋值给节点的 ref 属性，这样在事件处理程序中就可以通过 refcurrent 来访问节点。当然，如果不是必须获取最新挂载后的节点，那么直接使用 useRef 返回的 ref 对象就可以了。而 reactFromCurrent 没有找到任何相关的信息，需要更加详细的上下文来确定问题所在。

以上就是关于浅谈react中的state和ref全部的内容，包括:浅谈react中的state和ref、React Refs的多种用法归纳整理、reactfromcurrent里面没有东西等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！