Vue

ref

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

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

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

reactive

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

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); // 输出 
Hello, World!
     myDivRef.current.style.backgroundColor = 'yellow'; // 修改样式   }, []);    return 
Hello, World!
; } 

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

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

尽管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 (       
          this.keyWordElement = c}           type="text"           placeholder="输入关键词点击搜索"         />         搜索       
     );   } }  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 (       
        {*分配ref：在render方法中，将创建的ref对象赋值给JSX元素的ref属性*}                  搜索       
     );   } } export default SearchComponent; 

useState和useReducer代替reactive

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

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

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 (     
       
{state.count}
        dispatch({ type: 'increment' })}>Increment     
   ); } 

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

关注我，不迷路！！！