Hooks使用

一、 useReducer

 const [count, countDispatch] = useReducer(countReducer, 0)
  const countReducer = (state, action) => {
    switch (action.type) {
      case 'add':
        return state + 1
        break;
      case 'minus':
        return state - 1
        break;
    
      default:
        return state
        break;
    }
  }
    
  const button = ()=>{
    countDispatch({type: 'add'})
  }

  return (
    <div>
      <div className="App">{count}</div>
    <button onClick={()=>button()}>+1</button>
    </div>
    
  );

二、 useEffect

import './App.css';
import {useState, useEffect} from 'react'

// 副作用： 纯函数： 1、 引用外部变量； 2、 调用外部函数
//        相同的输入 => 相同的输出
// 1、 修改dom  2、 修改全局变量   3、 ajax   4、 计时器   5、 存储相关
//  和外部变量的交互
// 每一次副作用函数， 是不同的函数
// 存在清理函数
// 1、 render + useEffect
// > render + 清理函数 + useEffect
// > render + 清理函数 + useEffect
//  组件在销毁的时候 　-> 执行

// 只在初次渲染（didMount）执行； didUpdate执行

// 第二个参数：
// 1、 指定当前effect函数所需要的依赖项
// 2、 依赖是[]， 在初次渲染和卸载的时候执行
// 3、 有依赖项， 并且依赖项不一致的时候 会执行·
function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    let timer = setInterval(()=>{
      setCount(count +1)
      console.log('count', count)
      
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  })
  return (
    <div>
      <div>{count}</div>
      <button onClick={()=>{setCount(count +1)}}>Add</button>
    </div>
  )
}

export default App;

三、 useRef

import {useState, useRef, createRef, forwardRef } from 'react'
const Foo = forwardRef((params,inputRef) => {
  // const inputRef = useRef()
  const useRefBtn = () =>{
    inputRef.current.focus()
  }
  return (
    <div>
      <input type="text" ref={inputRef}/>
      <button onClick={useRefBtn}>聚焦</button>
    </div>
  )
})


const  App = () => {
  const inputRef =  createRef()
  const fatherBtn = () => {
    inputRef.current.focus()
  }
  return (
    <div>
      <Foo ref={inputRef}/>
      <button onClick={fatherBtn}>父组件按钮</button>
    </div>
  )
}

export default App;

四、 useMemo和useCallback

import './App.css';
import {useState, useMemo, useCallback, memo } from 'react'
// useMemo 和 useCallback 是性能优化时使用的，子组件是否渲染

const Foo = memo((props)=> {
    console.log('tag')
  return (
    <div>
      {/* <div>{props.count}</div> */}
      <ul>{props.render()}</ul>
    </div>
  )
})

const  App = () => {
  const [range, setRange] = useState({min: 0,max: 10000})
  const [count, setCount] = useState(0)
  const render = useCallback(() => {
    let list = [];
    for(var i = 0; i < range.max; i++) {
      list.push(<li key={i}>{i}</li>)
    }
    return list
  },[range])
  // const render = useMemo(() => {
  //   let list = [];
  //   for(var i = 0; i < range.max; i++) {
  //     list.push(<li key={i}>{i}</li>)
  //   }
  //   return list
  // },[range])
  return (
    <div>
      <div>
        <div>{count}</div>
        <button onClick={()=>setRange({
          ...range,
          min: range.min + 1
        })}> Add </button>
        <Foo render={render}/>
      </div>
    </div>
  )
}

export default App;