学习Hooks的第二天（Day:9）

[XJQ124]

学习React的Hooks

进度6/16

1、useEffect剩余的两种方法

//useEffect的使用方式
import React, {useEffect,useState} from "react"
import ReactDOM from "react-dom";
function App(){
  function onScroll(){
    console.log('页面发生滚动了');
  }
  useEffect(()=>{
    window.addEventListener('scroll',onScroll);
    return ()=>{

      window.removeEventListener('scrool',onScroll);
    }

  },[])
  const [count,setCount] = useState(0);
  useEffect(()=>{
    const timerId = setInterval(()=>{
      setCount(()=>{
        document.title = count+1;
        return count+1
      })
    },1000)
    return ()=>{

      clearInterval(timerId)
    }

  },[])
  return (
    <div>
     <span>{count}</span>
      <button onClick={() => ReactDOM.unmountComponentAtNode(document.getElementById('root'))}>卸载组件</button>
    </div>
  )
}
export default App

第二种：只有指定数据发生变化的时候才会触发Effect

//useEffect 只有制定数据发生变化的时候才会触发effect
//这个demo主要是说明只有制定的count值发生改变才会执行useEffect
import React,{useEffect ,useState} from "react";

function App(){
  const [count,setCount] = useState(0)
  const [person,setPerson] = useState({name:'金桥'})
  useEffect(()=>{
    console.log('检查');
    document.title = count;  
  },[count])

  return <div>
    <span>{count}</span>
    <button onClick={()=>setCount(count+1)}>+1</button>
    <button onClick={()=>setPerson({name: '公司'})}>setPerson</button>
  </div>
}
export default App

第三种：结合异步函数

//useEffect结合异步函数
import React,{useEffect} from "react";

function App(){
  useEffect(()=>{
    //注意：useEffect本身并不能直接结合异步函数，需要与async结合 以及使用await关键字
    (async function (){
      let response = await getDate();
      console.log(response)
    })()

  },[])
  return (
    <div>
      App works
    </div>
  )

}
function getDate(){
  return new Promise(resolve=>{
    resolve({msg:'Hello'});
  })
}
export default App

2、useMemo

//useMemo 作用：每次重新渲染的时候能够缓存计算的结果。
//可监测某个值的变化，根据变化计算新值
import React,{useState,useMemo} from "react";
function App(){
  const [count,setCount] = useState(0)
  const [bool,setBool] = useState(true);
  const result  = useMemo(()=>{
    console.log(1)
    return count * 2
  },[count])
  return <div>
    <span>{count}{result} </span>
    <span>{bool ? '真':'假'}</span>
    <button onClick={()=> setCount(count+1)}>+1</button> 
    <button onClick={()=> setBool(!bool)}>changeBool</button>
  </div>
}
export default App;
//上面的例子可以看出来，当bool值发生变化时，原来的useMemo并没有发生变化，他只认count值

3、有了useMemo，然后发现还有一个memo

他们都可以实现性能优化，不过用法各自还是有点不同的

//memo方法的使用，可实现性能优化
//React.memo 主要用于记忆整个组件的渲染结果，避免不必要的渲染。
//useMemo 主要用于记忆计算的结果，提高性能，适用于计算成本较高的场景。
import React,{useState,memo} from "react";
function App(){
  const [count, setCount] = useState(0);
  return (
    <div>
      <span>{count}</span>
      <button onClick={()=>setCount(count+1)}>+1</button>
      <Foo />
    </div> 
  )
}
const Foo = memo(function Foo() {
  console.log('foo组件重新渲染了');
  return <div>我是foo组件</div>;
});
export default App 

4、useCallback

// //useCallback 作用：性能优化，缓存函数，使组件重新渲染时得到相同的函数实例
// //是一个允许你在多次渲染中缓存函数的 React Hook。
import React, { useState, memo, useCallback} from "react";

function App() {
  const [count, setCount] = useState(0);
  const resetCount = useCallback(()=>setCount(0),[setCount])

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Foo resetCount = {resetCount}/>
    </div>
  )
}
const Foo = memo(function Foo(props) {
  console.log('foo组件重新渲染了');
  return <div>
    我是foo组件
    <button onClick={props.resetCount}>resetCount</button>
    </div>;
});
export default App 

5、useRef

作用：帮助引用一个不需要渲染的值
demo01 点击计数器
import { useRef } from "react";
export default function Counter(){
  let ref  = useRef(0);//创建了一个ref变量

  function handleClick(){
    console.log(ref)
    ref.current = ref.current+1;
    alert('You clicked' + ref.current + 'times!')
  }
  return (
    <button onClick={handleClick}>
      点击
    </button>
  )
}

useRef还有内容，今天先写了一个demo，明天继续学习，争取再花两天时间把这部分内容结束掉

同时，利用下班后的时间学习html、css和JS的基础知识，，，