React学习（day3)

useEffect的使用

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如Ajax请求，更改DOM等等

需求：在组建渲染完毕后，立即从服务器端获取频道列表数据并显示到页面中

语法：

useEffect(() => { }, [])

 案例代码：

const URL = 'http://geek.itheima.net/v1_0/channels'
function Day3(){
  //创建一个状态
const [list,setList] = useState([])
  useEffect(()=>{
    //额外的操作，获取频道列表
    async function getList(){
      const res = await fetch(URL)
      const jsonRes = await res.json()
      console.log(jsonRes)
      setList(jsonRes.data.channels)
    }
    getList()
  },[])
  return (
    <>
      <div>
        <ul>
          {list.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </div>
    </>
  )
}

useEffect依赖项参数说明

useEffect的副作用函数的指向性时机，根据传入依赖项参数的不同而不同。

依赖项	副作用函数执行时机
没有依赖项	组件初始渲染 + 组件更新时执行
空数组依赖	只在初始渲染时执行一次
添加特定依赖项	组件初始渲染 + 特性依赖项变化时执行

1.组件初始渲染 + 组件更新时执行

function Day3( ){
  const [count,setCount] = useState(0)
    useEffect(()=>{
      alert('副作用函数执行了')
  })
  return (
    <div>
      day3练习
      <button onClick={()=>setCount(count+1)}>+{count}</button>
    </div>
  )
}

2.传入空数组，只在初始时执行一次

function Day3( ){
  const [count,setCount] = useState(0)
    useEffect(()=>{
      alert('副作用函数执行了')
  },[])
  return (
    <div>
      day3练习
      <button onClick={()=>setCount(count+1)}>+{count}</button>
    </div>
  )
}

3.传入特定的依赖项， 初始 + 依赖项变化时执行

function Day3( ){
  const [number,setNumber] = useState(0)
  const [count,setCount] = useState(0)
    useEffect(()=>{
      alert('副作用函数执行了')
  },[number])
  return (
    <div>
      day3练习
      <button onClick={()=>setNumber(number+1)}>number : +{number}</button>      {/* 发生变化 */}
      <button onClick={()=>setCount(count+1)}>count : +{count}</button>      {/* 无变化 */}
    </div>
  )
}

useEffect一键清除副作用

在useEffect中编写由渲染本身引起的对接组件外部的操作，也常叫做副作用操作。

比如在useEffect开启一个定时器，如果想要在组件卸载时把这个定时器再清理掉，这个过程就是清除副作用。

  useEffect(()=>{
    //实现副作用操作逻辑
    return ()=>{
      //清除副作用逻辑
    }
  })

自定义Hook函数

概念：自定义hook是以use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用。

//自定义Hook
function useToggle (){
  const [value,setValue] = useState(true)
  const toggle = ()=>setValue(!value)

  //哪些状态和回调函数需要再其他组件中使用 return
  return {
    value,
    toggle
  }
}


function Day3( ){

  const {value,toggle} = useToggle()

  return (
    <div>
      <div>{value && <div>this is div</div>}</div>
      <div><button onClick={toggle}>toggle</button></div>
    </div>
  )

}

封装自定义Hook通用思路

1.声明一个以use打头的函数

2.在函数体内封装可复用的逻辑（子要是可复用的逻辑）

3.把组件中用到的状态或者回调return出去（以对象或者数组）

4.在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

React Hooks使用规则

使用规则

1.只能在组件中或者其他自定义Hook函数内调用

2.只能在组件的顶层调用，不能嵌套if、for、其他函数中