React Hooks使用 Ref Hooks

useRef

获取子组件或者DOM节点的句柄

渲染周期之间共享数据的存储

import React, { useState, PureComponent, useEffect, useMemo, memo, useCallback, useRef } from "react";
// useMemo的写法与useState相同,但是调用时机不同,useState执行的是副作用，在组件渲染完成后执行，useMemo参与渲染，是在渲染的时候执行
// const Foo = memo(function Foo(props) {
//   // 配合memo使用
//   console.log("Foo render");
//   return 
{props.count}
;
// });
class Foo extends PureComponent {
  render() {
    return 
{this.props.count}
;
  }
}
// hooks组件
function App() {
  const [count, setCount] = useState(0); // useState 默认值 0 返回一个数组，第一个是变量，第二个修改变量的方法
  const [num, setNum] = useState(0);
  const double = useMemo(() => {
    return count * 2;
  }, [count === 3]); //[]为计算的条件，条件越精确，计算就越少
  
  // useRef的使用,必须使用类组件，只有类组件才能够被实列化
  const countRef = useRef();
  const it = useRef(); // 通过ref定义定时器名称，在定时器中的需要访问对上一次的数据和state，可以通过同步到ref解决
  // 省略依赖变量的
  const goClick = useCallback(() => {
    // 第一种 ref获取子组件
    console.log("====================================");
    console.log("ref获取子组件"); // 点击获取ref的值，DOM元素 
    console.log(countRef.current);
    console.log("====================================");
    setNum(num => num + 1); // 默认参数是 num
    
  }, [countRef]);
  useEffect(() => {
    setInterval(()=>{ // 开启ref定义的定时  器，在定时器中的需要访问对上一次的数据和state，可以通过同步到ref解决
      it.current = setCount(count => count + 1);
    },1000)
  }, [])

  useEffect(()=>{
    if(count>10) {
      clearInterval(it.current) // 清除ref定义的定时器，在定时器中的需要访问对上一次的数据和state，可以通过同步到ref解决
    }
  })
  return (
    

       {
          setCount(count + 1);
        }}
      >
        点击{double}
      
      
    
  );
}

export default App;