UseRef 使用

• useRef是一个方法，且useRef返回一个可变的ref对象（对象！！！）

• initialValue被赋值给其返回值的.current对象 可以保存任何类型的值:dom、对象等任何可变化值

• ref对象与自建一个{current：‘’}对象的区别是：useRef会在每次渲染时返回同一个ref对象，即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。

• ref对象的值发生改变之后，不会触发组件重新渲染。有一个窍门，把它的改变动作放到useState()之前。

• 本质上，useRef就是一个其.current属性保存着一个可变值“盒子”。

import React, { useReducer, useEffect, useMemo, useRef } from 'react';

const initial = { n: 0, b: 8 };
const reducer = (state, action) => {
  if (action.type === 'add') {
    return { n: state.n + 1 };
  }
  if (action.type === 'del') {
    return { n: state.n - 1 };
  }
  return null;
};
const Test = () => {
  const [state, dispatch] = useReducer(reducer, initial);
  console.log(state);
  const { n } = state;
  const doubleCount = useMemo(() => 2 * n, [n]);  //类似vue computed
  const doubleRef = useRef(null);  
  useEffect(() => {
  	//倒计时 
    doubleRef.current = setInterval(() => {
      dispatch({ type: 'add' });
    }, 1000);
    // console.log(doubleRef.current); 
    // if (doubleCount === 16) {
    //   doubleRef.current.style.color = 'red';
    // } else {
    //   doubleRef.current.style.color = 'blue';
    // }
  }, []);
  useEffect(() => {
    if (n > 10) {
      clearInterval(doubleRef.current);
    }
  });

  const handleNumberAdd = () => {
    dispatch({ type: 'add' });
  };
  const handleNumberDel = () => {
    dispatch({ type: 'del' });
  };

  return (
    <div>
      <p onClick={() => handleNumberAdd()}>
        {n} +1
        {/* 设置内容{num} <br /> {content.name} */}
      </p>
      <p onClick={() => handleNumberDel()}>
        {n} -1
        {/* 设置内容{num} <br /> {content.name} */}
      </p>
      <p ref={doubleRef}>doubleCount:{doubleCount}</p>
    </div>
  );
};

export default Test;