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 <h1 onClick={props.goClick}>{props.count}</h1>;
// });
class Foo extends PureComponent {
  render() {
    return <h1 onClick={this.props.goClick}>{this.props.count}</h1>;
  }
}
// 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 (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        點擊{double}
      </button>
      <Foo count={double} ref={countRef} goClick={goClick}></Foo>
    </div>
  );
}

export default App;