React的capture value及useRef使用

capture value

export default () => {
  const [x, setX] = useState(0);
  const fn1 = () => {
    setX(x + 1);
  };
  const fn2 = () => {
    setTimeout(() => {
      console.log(x, "x");
    }, 3000);
  };
  return (
    
测试
x:{x}
); };
  • 如上面代码,先点击【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 (
    
测试
x:{x}
); };

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 (
      
测试
x:{this.state.x}
); } } export default App;
  • class组件的表现与函数组件的不同,当你先点击【3秒后显示x】,再去多次点击【+1】,3秒后你的x是多少则打印出是多少,它永远获取的是当下最新的值,因为this总是可变的,以便在render和声明周期中获取到最新版本

你可能感兴趣的:(React的capture value及useRef使用)