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修改状态会触发组件重新渲染
关注我，不迷路！！！
