ref和reactive

Vue

ref

在Vue 3中，ref有两个不同的用法：一个是用于模板中引用DOM元素或组件实例的ref属性，另一个是用于创建响应式数据的ref函数

1.DOM引用：在模板中使用ref属性，随后可以在mounted生命周期钩子中访问DOM节点。（vue2和vue3都有）是一种直接在模板中使用的指令。

<template>   <div ref="myDiv">Hello, World!</div> </template>  <script> export default {   mounted() {     const myDiv = this.$refs.myDiv;     console.log(myDiv); // 输出 <div>Hello, World!</div>      // 改变内容     myDiv.innerText = "Hello, Vue!";          // 改变样式     myDiv.style.color = "blue";   } } </script> 

响应式引用：通过ref函数创建一个响应式引用，当其值变化时，视图会自动更新（vue3引入），是用于创建响应式数据的工具。

<template>   <div>{{ count.value }}</div>   <button @click="increment">Increment</button> </template>  <script> import { ref } from 'vue';  export default {   setup() {     const count = ref(0);          function increment() {       count.value++;     }          return { count, increment };   } } </script> 

reactive

reactive用于创建一个响应式对象。当对象的属性变化时，视图会自动更新。

<template>   <div>{{ state.count }}</div>   <button @click="increment">Increment</button> </template>  <script> import { reactive } from 'vue';  export default {   setup() {     const state = reactive({       count: 0     });          function increment() {       state.count++;     }          return { state, increment };   } } </script> 

vue中ref和reactive区别

ref用于创建一个单一的响应式值。它可以是基本类型（如数字、字符串）或对象，基本类型需要通过.value访问和修改

const user = ref({ name: 'John', age: 30 }); console.log(user.value.name);

reactive用于创建一个深度响应式对象,直接访问和修改属性

const state = reactive({   count: 0,   user: {     name: 'John',     age: 30   } }); console.log(state.count,state.user.name);

React

ref

   ref主要用于引用DOM元素或组件实例，通常使用useRef钩子来创建。它的主要用途是直接操作DOM元素，获取DOM节点或保持某些可变的值（这值的变化不会触发组件重新渲染）。

函数组件

1.创建和使用ref来引用DOM元素

import React, { useRef, useEffect } from 'react';  function MyComponent() {   const myDivRef = useRef(null);    useEffect(() => {     console.log(myDivRef.current); // 输出 <div>Hello, World!</div>     myDivRef.current.style.backgroundColor = 'yellow'; // 修改样式   }, []);    return <div ref={myDivRef}>Hello, World!</div>; } 

 2.保持不需要触发重新渲染的可变值

import React, { useRef } from 'react';  function Timer() {   const count = useRef(0);    const increment = () => {     count.current++;     console.log(count.current);   };    return <button onClick={increment}>Increment</button>; } 

尽管useRef不会引发组件重新渲染，但它在处理以下情况时非常有用：

• 引用和操作DOM元素。
• 保持跨渲染周期的可变值，而不需要重新渲染组件。例如，保持计时器的ID，记录组件实例的一些信息，或在事件处理函数中使用。
• 保存前一个渲染的值。
• 避免闭包陷阱，在事件处理函数或异步函数中引用最新的值。

类组件

1、回调函数形式的ref

import React, { Component } from 'react';  class SearchComponent extends Component {   handleSearch = () => {     const keyword = this.keyWordElement.value;     console.log('搜索关键词:', keyword);     // 你可以在这里使用keyword进行搜索操作   };    render() {     return (       <div>         <input           ref={c => this.keyWordElement = c}           type="text"           placeholder="输入关键词点击搜索"         />         <button onClick={this.handleSearch}>搜索</button>       </div>     );   } }  export default SearchComponent; 

回调函数形式的ref：

• ref属性接受一个回调函数，该函数在组件挂载或更新时执行。回调函数会传递当前的DOM元素作为参数
• c是当前的DOM元素。通过将c赋值给this.keyWordElement，你在组件实例上创建了一个引用，指向这个DOM元素。这样做的结果是，可以在类组件的其他方法中通过this.keyWordElement来访问和操作这个DOM元素。

2. React.createRef()

import React, { Component } from 'react';  class SearchComponent extends Component {   constructor(props) {     super(props);     //创建ref     this.keyWordElement = React.createRef();   }    handleSearch = () => {     //访问ref：通过this.refName.current来访问DOM元素或组件实例     const keyword = this.keyWordElement.current.value;   };    render() {     return (       <div>        {*分配ref：在render方法中，将创建的ref对象赋值给JSX元素的ref属性*}         <input           ref={this.keyWordElement}           type="text"           placeholder="输入关键词点击搜索"         />         <button onClick={this.handleSearch}>搜索</button>       </div>     );   } } export default SearchComponent; 

useState和useReducer代替reactive

useState：用于创建和管理组件的局部状态

import React, { useState } from 'react';  function Counter() {   const [count, setCount] = useState(0);    return (     <div>       <p>{count}</p>       <button onClick={() => setCount(count + 1)}>Increment</button>     </div>   ); } 

useReducer：用于管理复杂的状态逻辑，类似于Redux的reducer概念。

import React, { useReducer } from 'react';  const initialState = { count: 0 };  function reducer(state, action) {   switch (action.type) {     case 'increment':       return { count: state.count + 1 };     default:       throw new Error();   } }  function Counter() {   const [state, dispatch] = useReducer(reducer, initialState);    return (     <div>       <p>{state.count}</p>       <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>     </div>   ); } 

使用useState或useReducer修改状态会触发组件重新渲染

关注我，不迷路！！！