// 初始化
const [ count,  setCount ] = useState(0)
// 更新
setCount(count+1)

useEffect(()=>{
  // 這樣模擬的是 componentDidMount
}, [])

useEffect(()=>{
  // 這樣模擬的是componentDidMount 以及當count發(fā)生變化時執(zhí)行componentDidUpdate
}, [count])

useEffect(()=>{
  return ()=>{
  // 這樣模擬的是 componentWillUnmount
  }
}, [])

// 以前的定義方式
const CountContext = React.createContext()
 <CountContext.Provider value={{ count: 10 }}>
     <...自定義的組件>
 </CountContext.Provider>

// 子元素
<CountContext.Consumer>
    { value => { console.log(value.count) }} //10
</CountContext.Consumer>

//使用context的獲取方式
const countObj = useContext(CountContext)
console.log(countObj.count) // 10

// 這樣就將傳遞給函數(shù)式組件的ref綁定在了函數(shù)式組件內(nèi)部的input標簽上
import React, { useRef, forwardRef } from 'react'

// 使用函數(shù)表達式的方式定義了一個函數(shù)式組件
const InputCom = forwardRef((props, ref) => {  
  return <input ref={ref}/> 
})

export default function refDemo(){
    const comRef = useRef()
    return(<div>
       <InputCom ref={comRef}/>     
    </div>) 
 }

const [ count, setCount ] = useState(0)
const prevCount = useState(count)
// 當count發(fā)生變化時，組件更新，對count的前一次數(shù)據(jù)進行保存
useEffect(()=>{
  prevCount.current = count
}, [count])

// 定義一個處理數(shù)據(jù)的reducer純函數(shù)
function reducer(prevState, action){
  switch(action.type){
    case 'increment':
      return {...prevState, count: prevState.count + 1 }
    case 'decrement':
      return {...prevState, count: prevState.count - 1 }
    default:
      return prevState
  }
}

// 初始化狀態(tài)
const [ count, dispatch ] = useReducer(reducer, { count: 0 })
// 修改狀態(tài)，此時的修改需要派發(fā)一個action，讓傳入的reducer函數(shù)進行處理
dispatch({ type: 'increment' })

import React, { useState, useCallback, memo } from 'react'
const AddBtn = memo((props)=>{ // 使用函數(shù)表達式的方式定義了一個函數(shù)式組件
    return<button onClick={props.increment}>+1</button>
})

export default function CallBackPerformance(){
    const [ count, setCount ] = useState(0)
    const [ show, setShow ] = useState(true)
    const increment1 = () => {
        console.log('increment1被調(diào)用了')
        setCount(count+1)
    }

   const increment2 = useCallback(()=>{  // 使用了useCallback來優(yōu)化的函數(shù)
         console.log('increment2被調(diào)用了')
         setCount(count+1)
    },[count])

    return(<div>
            <div>當前計數(shù)：{count}</div>
            <AddBtn increment={increment1} name="1"/>
            <AddBtn increment={increment2} name="2"/>
            <button onClick={e => setShow(!show)}>切換show</button>
        </div>)
}
// 當show這個狀態(tài)發(fā)生變化時，子組件increment1會重新渲染，increment2不會重新渲染

useMemo(()=>{
   return { count }
}, [count])

// 使用useCallback時   
const increment2 = useCallback(()=>{
    setCount(count+1)
},[count])

// 使用useMemo模擬useCallback
const increment2 = useCallback(()=>{
    return ()=>{
        setCount(count+1)
    }
},[count])

// useMemo的應用場景，當要進行一些復雜的計算時，
//計算的值沒有發(fā)生變化，并不需要每一次更新都重新計算

import React, { useState, useMemo } from 'react'
const calculateNum = (count) => {
    console.log('total重新計算了')
    let total = 0
    for(let i = 0; i <= count; i++){
        total += i
    }
    return total
}

export default function ComplexUseMemo(){
    const [ count, setCount ] = useState(10)
    const [ show, setShow ] = useState(true)
    const total = useMemo(()=>{
        return calculateNum(count)
    }, [count])
    return(<div>
        <div>{total}</div>
        <button onClick={e=>setCount(count+1)}>+1</button>
        <button onClick={e=>setShow(!show)}>切換show</button>
    </div>)
}

import React, {  useRef, useImperativeHandle, forwardRef } from 'react'
const InputComp = forwardRef((props, ref)=>{
  const childInputRef = useRef()
  useImperativeHandle(ref, ()=>({
    focus: ()=>{
      childInputRef.current.focus()
    }
  }), [childInputRef.current])

  return<input ref={childInputRef}></input>
})

export default function ImperativeHookDemo() {
  const inputRef = useRef()
  return(<div>
      <InputComp ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>聚焦</button>
    </div>)
}