react各种hooks

useCallback 缓存的是方法，用来封装方法，只有依赖的变量变化时，才会刷新方法；

useEffect 可以监听值的变化，可以用来写一些请求的调用；

useRef 可以用来存储数据，它可以做到所有引用它的地方值都一样；

useMemo 缓存的是数据，相当于自动计算属性；

useReducer 跟useState类似。可以替换useState

useEffect 用法

useEffect(()=>{
	console.log(‘首次渲染的时候  只执行一次’)
},[]);

useEffect(()=>{
	console.log(‘selId 只要一改变 就执行’)
},[selId]);

useEffect(()=>{
	console.log(‘只要有值改变就执行’)
});

useCallback用法

//例子
function Ceshi() {
    const [count, setCount] = useState(0);
    const [num, setNum] = useState(0);
    console.log("ceshi-init")

    //这样写 每次组件更新时，方法都会更新 不管哪个state改变 都会更新该方法
    // function addCount() {
    //     setCount(count + 1);
    //     setTimeout(() => {
    //         setNum(num + 1);
    //     }, 200);
    //    console.log('showValue---count', count);
    // }

    //这样写 不生效，因为没有加入依赖项 所以count每次取的都是最初的值0
    // const addCount = useCallback(() => {
    //     setCount(count + 1);
    // }, [])
    
    //这样写 就可以生效 正确改变值了 因为加入了依赖项
    const addCount = useCallback(() => {
        setCount(count + 1);
        setTimeout(() => {
            setNum(num + 1);
        }, 200);

        //这个count 没有立刻得到改变后的count值
        console.log('showValue---count', count);
    }, [count, num])

    //这样写 也可以 c获取得都是最新的值
    // const addCount = useCallback(() => {
    //     setCount((c) => c + 1);
    // }, [])

  
    //这个返回的每次都正确
    const sum = useMemo(() => {
        debugger;
        return count + 10;
    }, [count]);

    //每次值改变都调用
    useEffect(() => {
        //console.log('useEffect---count', count);
        // console.log('useEffect---num', num);
    })
 
    const [page, setPage] = useState(1);
    const [detail, setDetail] = useState('');

    //这样写 就可以
    const getDetail = () => {
        console.log("getDetail执行")
        request(page).then(res => setDetail(res));
    };

    // const getDetail = useCallback(() => {
    //    console.log("getDetail执行")
    //     request(page).then(res => setDetail(res));
    // }, [page]);

    useEffect(() => {
        getDetail();
    }, [page]);


    return (<div style={{ color: 'red' }}>
        <div>{count}</div>
        <div>count+10={sum}</div>
        <button onClick={addCount}>增加count</button>


        <div style={{ padding: 50 }}>
            <p>Detail: {detail.content}</p>
            <p>Current page: {page}</p>
            <button onClick={() => setPage(page + 1)}>page increment</button>
        </div>
    </div>)
}

useCallback的用法用来缓存方法，在依赖数据不改变的情况下，函数在内存中的指针不改变，与React.Memo或者useMemo联用，才能使得性能更佳。

useRef的用法

  const [count, setCount] = useState(1);
  const ref = useRef(22);//初始值
  var interval: any;
  
  const startCount = () => {
    ref.current = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
  };
  const endCount = () => {
    clearInterval(ref.current);
  };

react 中的定时器写法

  const [count, setCount] = useState<number>(0);
  //采用useRef,作为组件实例的变量，const timeer = useRef(null)只会执行一次
  const timeer = useRef(null);

  const mouseDownEvent = (event: React.MouseEvent) => {
    timeer.current = setInterval(() => {
      console.log('count', count);
      setCount((count) => count + 1);
    }, 1000);
  };
  const mouseUpEvent = (event: React.MouseEvent) => {
    console.log('timeer', timeer);
    clearInterval(timeer.current);
  };

react hooks用法笔记

react各种hooks