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修改状态会触发组件重新渲染

关注我，不迷路！！！