react学习day6

1.useEffect 组件渲染完成后执行

import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
import './App.css'
const url='http://geek.itheima.net/v1_0/channels'
function Son(){
  //清除副作用
  useEffect(()=>{
    const timer=setInterval(()=>{
      console.log('time')
    },2000)
    return ()=>{
      clearInterval(timer)
    }
  },[])
  return <div>son</div>
}
function App() {
  //没有依赖 组件渲染完+组件更新
  //[] 组件渲染完执行一次
  //特定依赖 组件渲染完执行一次+依赖变化时执行
  const [list,setList]=useState([])
  useEffect(()=>{
   async function getList(){
      const res=await fetch(url)
      const list=await res.json()
      console.log('one')
      setList(list.data.channels)
    }
    getList()
  },[])
  const [v,setV]=useState('')
  useEffect(()=>{
    console.log('effect')
  })
  useEffect(()=>{
    console.log('vvv')
  },[v])
  const clickbtn =()=>{
    setV(v+1)
  }

 const [show,setShow]=useState(true)
 const stopt=()=>{
  setShow(false)
 }
  return (
    <div>
      {list.map(v=><li key={v.id}>{v.name}</li>)}
      <button onClick={clickbtn}>click</button>
      {show && <Son/>}
      <button onClick={stopt}>stop</button>
    </div>
  );
}
export default App;

2.自定义hook

import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
import './App.css'
function useToggle(){
  const [value,setValue]=useState(true)
  const toggle=()=>{setValue(!value)}
  return {
    value,
    toggle
  }
}

function App() {
 const {value,toggle}=useToggle()
  return (
    <div>
    {value && <span>content</span>}
    <button onClick={toggle}>click</button>
    </div>
  );
}
export default App;