capture value
export default () => {
const [x, setX] = useState(0);
const fn1 = () => {
setX(x + 1);
};
const fn2 = () => {
setTimeout(() => {
console.log(x, "x");
}, 3000);
};
return (
<div>
<div>测试</div>
<button onClick={fn1}>+1</button>
<button onClick={fn2}>3秒后显示x</button>
x:{x}
</div>
);
};
- 如上面代码，先点击【3秒后显示x】，之后在3秒内多次点击【+1】到8，即页面上x显示到8，那么3秒后打印出的x是多少呢？
- 答：显示0；那么为什么呢？因为每次render的内容都会生成一个快照保留下来，所以3秒后打印出的x是当下那个时候x的值，并不是目前x的值；（所以3秒后打印出的值永远是在点击【3秒后执行】按钮当下的x的值）
- 那如何可以取到当前的x的值呢？答：用useRef，把x的值放在ref里，保证render的时候都是同一个x，所以最后你可以取到x最新的值；
- 代码改变如下：
export default () => {
const [x, setX] = useState(0);
const xref = useRef(0); //add
const fn1 = () => {
setX(x + 1);
xref.current = x + 1; //add
};
const fn2 = () => {
setTimeout(() => {
console.log(xref.current, "x"); //change
}, 3000);
};
return (
<div>
<div>测试</div>
<button onClick={fn1}>+1</button>
<button onClick={fn2}>3秒后显示x</button>
x:{x}
</div>
);
};
useRef
- 那useRef什么时候去用呢？当你需要一个值（注意只是一个单纯声明出来的值，不需要useState放在state里），在组件不断render的时候保持不变；
- 我的理解就是：因为组件每次render的时候都会把去变化的数据新建一个state，而不是直接修改state，也就是不可变数据，你用useRef去保存一个值，那就是把这个值放到了一个即使render也不会变的引用对象里，那这个值每次就是同一个值啊。（比如说
let count = 0，每次做其他操作都count += 1，如果count不放在ref里，那么count每次render都变成0了）； - 初始化：
const count = useRef(0) - 读取：
count .current
Vue3中的ref
- 初始化：
const count = ref(0) - 读取：
count .value（在模板中使用直接写{{ count }}就好，不需要加value）
React与Vue3的ref不同点
- 不同点：React的
count .current改变后不会自动render，你需要去调用一个setX的函数来使组件render，以改变视图； - Vue3中
count .value变化时，会自动render来改变视图；
那么useRef可以做到变化时自动render吗？
- 答：不能！！！因为那样不符合React的理念了
React的理念
-
UI = f(data)，每次data变化的时候都需要用一个函数（例如setState或者render）去把data渲染成一个新的虚拟DOM，新的虚拟DOM和页面上的虚拟DOM进行一个DOM diff，得到一个patch，就是你要更新哪些内容，就把它更新到真实DOM上；
-
React就好比手动挡的车，而Vue3好比自动挡的车，两者没有好坏之分，全凭你的喜好来选择；
-
React给了用户更大的自由，你可以根据自身的需求来选择我是否需要useRef变化的时候要自动render；而Vue3则提供了更大的便利；
针对上面代码用class组件
import React from "react";
class App extends React.Component {
constructor(props) {
super();
this.state = {
x: 0
};
}
fn1 = () => {
this.setState({
x: this.state.x + 1
});
};
fn2 = () => {
setTimeout(() => {
console.log(this.state.x, "xxxx");
}, 3000);
};
render() {
return (
<div className="App">
<div>测试</div>
<button onClick={this.fn1}>+1</button>
<button onClick={this.fn2}>3秒后显示x</button>
x:{this.state.x}
</div>
);
}
}
export default App;
- class组件的表现与函数组件的不同，当你先点击【3秒后显示x】，再去多次点击【+1】，3秒后你的x是多少则打印出是多少，它永远获取的是当下最新的值，因为this总是可变的，以便在render和声明周期中获取到最新版本
网友评论