import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  // 在這里可以進(jìn)行打印測試
  console.log(count)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

interface LayerCheckbox {
  name: string;
  checked?: boolean;
  value?: string[];
  disabled?: boolean;
  children?: LayerCheckbox[];
  indeterminate?: boolean;
  key: string; // gis layer key
  relevance?: string;
}
const [checkboxArr, setCheckboxArr] = useState<LayerCheckbox[]>([
      name: '高清影像圖',
      checked: true,
      key: LayerEnum.TILES_MAP,
    },
    {
      name: '農(nóng)場地塊信息',
      checked: true,
      key: LayerEnum.FIELD_AREA,
    },
    {
      name: '灌溉設(shè)備圖層',
      checked: true,
      key: LayerEnum.DRAIN_IRRIGATE,
    },
    {
      name: '農(nóng)情設(shè)備圖層',
      checked: true,
      key: LayerEnum.CONDITION_DEVICE,
    },
  ]);

const [name, setName] = useState(()=>{   
  // 編寫計(jì)算邏輯    
  //return '計(jì)算之后的初始值'
})

import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // dom操作
    document.title = `當(dāng)前已點(diǎn)擊了${count}次`
  })
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}

export default App

useEffect(()=>{
   console.log('副作用執(zhí)行了')
})

useEffect(()=>{
    console.log('副作用執(zhí)行了')
},[])
})

function App() {  
  const [count, setCount] = useState(0)  
  const [name, setName] = useState('zs') 
  
  useEffect(() => {    
      console.log('副作用執(zhí)行了')  
  }, [count])  
  
  return (    
      <>      
       <button onClick={() => { setCount(count + 1) }}>{count}</button>      
       <button onClick={() => { setName('cp') }}>{name}</button>    
      </>  
  )
}

import { useEffect, useState } from "react"
const App = () => {
  const [count, setCount] = useState(0)
//頁面初始化就執(zhí)行一次，執(zhí)行后count+1，依賴count變化，又來執(zhí)行一次，此刻組件更新了，因此會(huì)清除副作用
  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 用來清理副作用的事情
      clearInterval(timerId)
    }
  }, [count])
  return (
    <div>
      {count}
    </div>
  )
}
export default App

useEffect(()=>{   
    async function fetchData(){      
       const res = await axios.get('http://geek.itheima.net/v1_0/channels')                            console.log(res)   
    } 
},[])

//自定義hook
import { useState } from "react"

export function useWindowScroll () {
const [y, setY] = useState(0)
window.addEventListener('scroll', () => {
  const h = document.documentElement.scrollTop
  setY(h)
})
return [y]

//調(diào)用區(qū)
import {useWindowScroll } from './hoooks/useWindowScroll '
const [y] =  useWindowScroll () 
return(
   <div> {y} </div>
)

//hook函數(shù)
import { useEffect, useState } from 'react'
//message可以通過自定義傳入默認(rèn)初始值
export function useLocalStorage (key, defaultValue) {
const [message, setMessage] = useState(defaultValue)
// 每次只要message變化 就會(huì)自動(dòng)同步到本地ls
useEffect(() => {
  window.localStorage.setItem(key, message)
}, [message, key])
return [message, setMessage]
}

//調(diào)用區(qū)
import {useLocalStorage  } from './hoooks/useLocalStorage '
const [messge,setMessage] = useLocalStorage ('hook-key','阿飛')
//初始值是 阿飛，5秒鐘后變成 cp
setTimeout(()=>{
  setMessage('cp')
},5000)

import { useEffect, useRef } from 'react'
function App() {  
    const h1Ref = useRef(null)  
    useEffect(() => {    
        console.log(h1Ref)  
    },[])  
    return (    
        <div>      
            <h1 ref={ h1Ref }>this is h1</h1>    
        </div>  
    )
}
export default App

//類組件
class Foo extends React.Component {  
    sayHi = () => {    
        console.log('say hi')  
    }  
    render(){    
        return <div>Foo</div>  
    }
} 
export default Foo

//獲取組件實(shí)例
import { useEffect, useRef } from 'react'
import Foo from './Foo'
function App() {  
    const h1Foo = useRef(null)  
    useEffect(() => {    
        console.log(h1Foo)  
    }, [])  
    return (    
        <div> <Foo ref={ h1Foo } /></div>  
    )
}
export default App

import { createContext, useContext } from 'react'
// 創(chuàng)建Context對(duì)象
const Context = createContext()

function A() {  
    return <div>A中里面包裹C組件<C/></div>
}

function C() {  
    // 底層組件通過useContext函數(shù)獲取數(shù)據(jù)  
    const name = useContext(Context)  
    return <div>C中{name}</div>
}

function App() {  
    return (    
        // 頂層組件通過Provider 提供數(shù)據(jù)    
        <Context.Provider value={'this is name'}>     
            <div><Foo/></div>    
        </Context.Provider>  
    )
}
export default App