在 React 函数式组件中使用 useState， 变量，useRef 的时机

1. 变量

变量在每次组件重新渲染的时候都会被重新进行赋值，所以如果你想要保留之前操作的状态的话就不要使用变量

1. useState

组件更新不会改变之前的状态，可以保存状态

1. useRef

也可以保存我们的状态

那么问题来了： 我们什么时候该用 useState 什么时候该用 useRef 呢？

useState: 当我们需要在状态改变的时候重新渲染视图，那么我们就使用 useState 来保存我们的状态

useRef: 如果我们只是想保存状态，而且可以同步更新&获取我们的状态，那么就使用 useRef

useRef 的特点

• 每次渲染 useRef 返回值都不变；

• ref.current 发生变化并不会造成 re-render;

• ref.current 发生变化应该作为 Side Effect（因为它会影响下次渲染），所以不应该在 render 阶段更新 current 属性。

useRef 注意事项：

• ref.current 不可以作为其他 hooks（useMemo, useCallback, useEffect）依赖项；ref.current 的值发生变更并不会造成 re-render, Reactjs 并不会跟踪 ref.current 的变化。

useState 的坑：

　　修改state后，如果直接调用此state，会发现state的值未发生改变。

　　当调用setState时，react是异步更新state的，如果setState后立即获取state的值，此时state尚未更新，因此为旧的状态。

useRef 总共有两种用法：

　　1、获取子组件的实例

　　 2、在函数组件中的一个全局变量，不会因为重复 render 重复申明， 类似于类组件的 this.xxx

　　有些情况下，我们需要保证函数组件每次 render 之后，某些变量不会被重复申明，比如说 Dom 节点，定时器的 id 等等。

　　在类组件中，我们完全可以通过给类添加一个自定义属性来保留，比如说 this.xxx， 但是函数组件没有 this，我们就需要使用 useRef 来实现。

区别：

　　1、useState触发重新渲染，useRef不触发。

　　2、useState异步更新其值，useRef同步更新。

1.useState

执行setN的时候：n会变吗？App()会重新执行吗？
1.n不会变，setN不会改变n
2.App()会重新执行，会产生一个新的n
注意：旧n和新n同时存在
这就是React的思想，永远产生新的对象，不改变旧值
App()重新调用，会重新执行：const [n,setN] = React.useState(0)
两次调用执行useState之后，打出来的n是不一样的