import React, { useState } from 'react'
export default function UseState() {
    let [count,setCount]=useState(10)
    // 他是異步的操作，在頁(yè)面數(shù)據(jù)會(huì)進(jìn)行更新，但是下面打印的數(shù)據(jù)是沒(méi)有更新，原因是因?yàn)樗钱惒降?
    const plus=()=>{
        setCount(count+5)
    }
  return (
    <div>
        {/* 函數(shù)組件中沒(méi)有this指向，我們可以直接調(diào)用 */}
        <div>{count}</div>
        <button onClick={()=>setCount(count++)}>加加</button>
        <button onClick={plus}>plus</button>
    </div>
  )
}

useEffect(()=>{ 邏輯})  頁(yè)面數(shù)據(jù)只要更新就會(huì)觸發(fā)useEffect()
useEffect(()=>{},[])  useEffect() 只執(zhí)行一次，只有頁(yè)面第一次加載的時(shí)候觸發(fā)，componentDidMount
useEffect(()=>{}, [num,count]) 監(jiān)聽(tīng)數(shù)據(jù)改變執(zhí)行，num和count發(fā)生變化的時(shí)候觸發(fā)。compoentDidUpdate
useEffect(()=>{
    return ()=>{
        console.log("相當(dāng)于compoentDidUnmount")
    }
},[])
//回調(diào)函數(shù)返回函數(shù)，返回的函數(shù)相當(dāng)于銷(xiāo)毀生命周期函數(shù)。

import React, { useMemo, useState } from 'react'
export default function UseState() {
    let [count,setCount]=useState(10)
    // useMemo必須有返回值，而且他是在dom更新發(fā)生變化，比useEffect執(zhí)行的快，useEffect是dom更新完才執(zhí)行的，監(jiān)聽(tīng)count值變化
    const double=useMemo(()=>{
      console.log('useMemo觸發(fā)');
      return count+6
    },[count])
  return (
    <div>
        {/* 函數(shù)組件中沒(méi)有this指向，我們可以直接調(diào)用 */}
        <div>{count} {double}</div>
        <button onClick={()=>setCount(count*2)}>count二倍</button>
    </div>
  )
}

//useMemoe緩存組件
function Home() {
    let [count,setcount] = useState(10)
    let [num,setnum] = useState(20)
    //通過(guò)useMemoe對(duì)組件進(jìn)行緩存，避免父組件中根子組件無(wú)關(guān)數(shù)據(jù)更新導(dǎo)致子組件的重新渲染。
    let theme = useMemo(()=>{
        return (
            <Theme count={count}></Theme>
        )
    },[count])
    return (
        <div>
            <h3 >count--{count}</h3>
            <button onClick={()=>setcount(count+1)}>count++</button>
            <h3 >num--{num}</h3>
            <button onClick={()=>setnum(num+1)}>num++</button>
 
            <hr />
            {theme}
        </div>
    )
}
function Theme(props){
    useEffect(()=>{
        console.log("子組件渲染")
    });
    return (
        <h3>子組件接受數(shù)據(jù){props.count}</h3>
    )
}

function Home() {
    let [count,setcount] = useState(10)
    let [num,setnum] = useState(20)
    return (
        <div>
            <h3 >count--{count}</h3>
            <button onClick={()=>setcount(count+1)}>count++</button>
            <h3 >num--{num}</h3>
            <button onClick={()=>setnum(num+1)}>num++</button>
            <hr />
            <Theme count={count}></Theme>
        </div>
    )
}
 //通過(guò)memo對(duì)組件進(jìn)行緩存，避免父組件中根子組件無(wú)關(guān)數(shù)據(jù)更新導(dǎo)致子組件的重新渲染。
const Theme = memo((props)=>{
    useEffect(()=>{
        console.log("子組件渲染")
    });
    return (
        <h3>子組件接受數(shù)據(jù){props.count}</h3>
    )
})

function Home() {
    let [count,setcount] = useState(10)
    let [num,setnum] = useState(20)
    const handlerCount = ()=>{
        console.log(count);
    }
    const callback = useCallback(()=>{
        handlerCount();
    },[count]);
    return (
        <div>
            <h3 >count--{count}</h3>
            <button onClick={()=>setcount(count+1)}>count++</button>
            <h3 >num--{num}</h3>
            <button onClick={()=>setnum(num+1)}>num++</button>
 
            <hr />
            <Theme count={count} handle={callback}></Theme>
        </div>
    )
}
 //通過(guò)memo對(duì)組件進(jìn)行緩存，避免父組件中根子組件無(wú)關(guān)數(shù)據(jù)更新導(dǎo)致子組件的重新渲染。
const Theme = memo((props)=>{
    useEffect(()=>{
        console.log("子組件渲染")
    });
    return (
        <div>
             <h3>子組件接受數(shù)據(jù){props.count}</h3>
             <button onClick={()=>props.handle()}>點(diǎn)擊</button>
        </div>
    )
})

import React, { useContext, useState } from 'react';
//useContext用于獲取context狀態(tài)樹(shù)的值
// 首先創(chuàng)建一個(gè)空的context對(duì)象
const ThemContext =React.createContext();
function UseState() {
    let [color,setColor]=useState('#ff0000')
  return (
    <div>
      {/* 通過(guò)Provider傳過(guò)來(lái)一個(gè)value值，是一個(gè)對(duì)象 */}
       <ThemContext.Provider value={{color:color}}>
          <button onClick={()=>setColor('pink')}>粉色</button>
          <button onClick={()=>setColor('blue')}>藍(lán)色</button>
          <button onClick={()=>setColor('green')}>綠色</button>
          <Son></Son>
       </ThemContext.Provider>
    </div>
  )
}
// 子組件
function Son(props) {
  // 通過(guò)useContext獲取父組件傳過(guò)來(lái)的值
  const context=useContext(ThemContext)
  return (  
    <div>
      {/* 然后對(duì)他進(jìn)行樣式綁定 */}
      <h3 style={context}>hello,react</h3>
    </div>
  )
}
export default UseState

 //創(chuàng)建一個(gè)ref對(duì)象的內(nèi)容
    let inp = useRef(null);
    const setVal =()=>{
        console.log(inp.current.value);
    }
   <input placeholder='輸入內(nèi)容' ref={inp} onChange={setVal}/>

function Home() {
    //定義一個(gè)初始化變量
    let inpRef = useRef(null);
    const getTheme = ()=>{
        console.log(inpRef);
    }
    return (
        <div>
             <input placeholder='輸入內(nèi)容'/>
             <button onClick={getTheme}>獲取子組件對(duì)象</button>
             <hr />
             <Theme ref={inpRef}/>
        </div>
    )
}
const Theme = forwardRef(function(props,ref){
    return (
        <h3 ref={ref}>文字內(nèi)容顯示</h3>
    )
})

import { useEffect } from "react";
//自定義顯示標(biāo)題的Hooks的方法內(nèi)容
const useTitle = (title) => {
    useEffect(() => {
        document.title = title;
        return ()=>{
            document.title="React 頁(yè)面"
        }
    }, []);
    return;
}
export { useTitle };

import { useTitle } from "../context/hooksApi"
export default function My(){
    useTitle("個(gè)人中心")
    return (
        <div>
            <h3>個(gè)人中心</h3>
        </div>
    )
}