createRef 下

如果有错误，欢迎留言指教~ Q_Q 还没写完辣

What’s useRef?

在 React 里希望用 immutable 的方式，避免会有 side effect ，防止有改变了，而 React 不知道这件事情！

而 ref 为什麽是 mutableRefObject 呢？
因为他就是专门拿来处理 immutable 处理不了的事情
→ 当资料被改变时，不希望画面被重新渲染

*** mutable → 可以用 = 来改值(?)

const valueRef = useRef(initialValue);

valueRef 拥有 mutable 的值在 .current 属性(此时此刻的值)，暂存在 ref 里

回传的 valueRef.current 在 component 的生命周期将保持不变

`useRef` 则是用来储存 `ref`，保存特定状态立 flag

在之前的章节提到，我们会用 useState 来保存内部的状态

但是当 useState 的值会变动时，就会造成画面重新渲染!!!

可是有时候我们不想要画面一直被变动啊~~~


// 还没想到

const Home = () => {
    
    const [data, setData] = useState([]);
    const submittingRef = useRef(false);
    
    // 送资料
    useEffect(()=>{
      // 如果不是送资料，fetchSetData，就不能执行
      if(!submittingRef.current) return false;
        
      fetchSetData(data)
      .then(data => submittingRef.current = false);
        
    },[data]);
    
    // 预设资料
    useEffect(()=>{
        fetchData(setData)
    },[]);
    
    
    return (
        <div className="app">
            <Edit add={add={setData} submittingRef={submittingRef} />
            <List listData{data} deleteData={setData} submittingRef={submittingRef}/>
        </div>
    )
}

这就是为什麽我们需要 useRef

useRef 改变 .current 属性不会触发 render，每次 render 都会给你同一个的 ref object。

因为我们需要一个参考的状态，来判断这时候需不需要改变，但又不造成画面无谓 render

`useRef` 可以拿来当 this 来用

// useRef

...


// this
   startAutoPlay = () => {
    this.stopAutoPlay();

    this.timerID = setInterval(() => {
      this.handleClickToNext();
    }, this.props.delay);
  };

  stopAutoPlay = () => {
    clearInterval(this.timerID);
  };