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><inputref={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);//创建refthis.keyWordElement = React.createRef();}handleSearch = () => {//访问ref：通过this.refName.current来访问DOM元素或组件实例const keyword = this.keyWordElement.current.value;};render() {return (<div>{*分配ref：在render方法中，将创建的ref对象赋值给JSX元素的ref属性*}<inputref={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修改状态会触发组件重新渲染
关注我，不迷路！！！