useEffect

1. 基本使用

import React, { useState, useEffect, useRef } from 'react'

const Fetch = () => {
  const [result, setResult] = useState(null)

  useEffect(() => {
    fetch('./index.html').then(res => {
      console.log('--res', res.body);
      setResult(res.url)
    })
  })

  return (
    <div>
      result: {result}
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Fetch />
    </div>
  )
}

export default App

2. 存在依赖项

1. 依赖项为一个空数组[]时只执行一次
2. 只要有一个变化useEffect都会重复执行

  useEffect(() => {
    fetch('./index.html').then(res => {
      setResult(res.url)
    })
  }, [a, b])

3. capture value
   如果在没有依赖的情况下，会捕获初次执行时获得的状态值，之后会一直使用此状态值，哪怕外部的状态值发生了变化

 useEffect(() => {
   console.log(count);
   setInterval(() => {
     // capture value 特性使得count一直是0
     setCount(count + 1)
   }, 500)
 }, [])

image.png

  const [count, setCount] = useState(0)

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(count + 1)
    }, 500)
    return () => clearTimeout(timer)
  },[count])

4. react hooks不予许在条件语句，或者条件语句后面执行
   react hooks会把所有的hooks当做一个链表存储，
   如果有if语句，会让组件提前结束，hooks添加不到链表中

  // 条件语句中添加effect是不允许的
  if (count > 5) {
    useEffect(() => {
      console.log(count);
    })
  }

  // 这种也是不可以的
  if (count > 5) {
    return null
  }

  useEffect(() => {
    console.log(count);
  })