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 (
    <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和声明周期中获取到最新版本