React基础知识整理学习六

useEffect发送请求

格式:

// 正确使用
useEffect(() => {
  // 定义一个函数
  async function fetchMyAPI() {
    let url = 'http://something/' + productId
    const response = await myFetch(url)
  }
  // 调用它
  fetchMyAPI()
}, [productId])
复制代码

注:effect 只能是一个同步函数，不能使用 async

useEffect-副作用函数的返回值-清理副作用

格式:

useEffect(() => {
  // 副作用函数的内容

  return 副作用函数的返回值
}, [])
复制代码

副作用函数的返回值是可选的，可省略。也可以返回一个清理函数，用来清理副作用

清理函数的执行时机：

• 清理函数会在组件卸载时以及下一次副作用函数调用之前执行

示例:

import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'

function Com1 () {
  useEffect(() => {
    console.log('子组件的副作用函数')
    
    return ()=>{
      console.log('子组件的副作用函数的清理函数')
    }
  }, [])
  return <div>子组件</div>
}
export default function App () {
  const [isShow, setIsShow] = useState(true)
  const [count, setCcount] = useState(0)
  
  useEffect(() => {
    console.log('父组件的副作用函数的内容')

    return () => {
      
      console.log('父组件的副作用函数的 清理函数 的内容')
    }
  }, [count])
  
  return (
    <div>
      {isShow && <Com1 />}
      <button onClick={() => setIsShow(!isShow)}>删除|创建子组件</button>
		<button onClick={() => setCcount(count+1)}>点击+1, {count}</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

使用useEffect的4种情况

情况1：不带第二个参数。执行时机：初始执行，每次更新之后都要执行。

模拟 componentDidmount + componentDidUpdate

useEffect(() => {
  // 副作用函数的内容
})
复制代码

情况2：带第二个参数，参数是空数组。执行时机：只执行第一次。

模拟 componentDidMount

useEffect(() => {
  // 副作用函数的内容
}, [])
复制代码

使用场景：1 事件绑定 2 发送请求获取数据 等。

情况3：带第二个参数（数组格式），并指定了依赖项。执行时机：（1）初始执行一次 （2）依赖项的值变化了，执行一次

useEffect(() => {
  // 副作用函数的内容
}, [依赖项1,依赖项2,....])
复制代码

这里的依赖项就是组件中定义的状态。

情况4：依赖项为空，没有具体的副作用函数，有副作用函数的清理函数

模拟：componentWillUnMount

useEffect(() => {
  
  return () => {
    // 副作用函数的清理函数，模拟 componentWillUnMount
  }
  
}, [])
复制代码

示例:

import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'

function Com1 () {
  useEffect(() => {
    const fn = (e) => {
      console.log(e.pageX, e.pageY)
    }
+    window.addEventListener('mousemove', fn)

+    return () => {
      window.removeEventListener('mousemove', fn)
      console.log('组件删除了')
    }
  }, [])
  return <div>子组件</div>
}
export default function App () {
  const [isShow, setIsShow] = useState(true)
  return (
    <div>
      {isShow && <Com1 />}
      <button onClick={() => setIsShow(!isShow)}>切换</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

自定义hooks

除了使用内置的 Hooks 之外，还可以创建自己的 Hooks（自定义 Hooks）。

自定义 Hooks 针对不同组件实现不同状态逻辑复用。

• 自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks
• Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！
• 自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样）

示例:

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import useTimer from './CountDownFunc'

export default function CountDown () {
  const [ isDisabled, setIsDisabled ] = useState(false)
  // 调用useTimer逻辑
  const { count, start } = useTimer(10, () => {
    // 倒计时为0后需要执行的函数
    setIsDisabled(false)
  })
  const hClick = () => {
    // 点击按钮后将按钮设置为禁用状态
    setIsDisabled(true)
    // 点击按钮后开启定时器
    start()
  }

  return (
    <div>
      <button disabled={isDisabled} onClick={hClick}>
        {!isDisabled ? '发送短信' : '等待' + count + '秒'}
      </button>
    </div>
  )
}

ReactDOM.render(<CountDown />, document.getElementById('root'))
复制代码

import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import useTimer from './CountDownFunc'

export default function ErrorPage () {
  const { count, start } = useTimer(5, () => {
    console.log('https://www.baidu.com/')
  })
  console.log(start)
  useEffect(
    () => {
      start()
    },
    [ start ]
  )
  return (
    <div>
      页面走丢了,{count}秒后跳转或<a href="https://www.baidu.com/">点我</a>跳转
    </div>
  )
}

ReactDOM.render(<ErrorPage />, document.getElementById('root'))
复制代码

封装逻辑:

import { useState, useEffect, useRef, useCallback } from 'react'
export default function useTimer (time = 10, callback = () => {}) {
  const refText = useRef(null)
  const [ count, setCount ] = useState(time)
  // 用于用户自己开启定时器
  const start = useCallback(
    () => {
      setCount(time)
      refText.current = setInterval(() => {
        console.log(1)
        return setCount((count) => {
          return count - 1
        })
      }, 1000)
    },
    [ time ]
  )

  // 用于极端情况下关闭组件后清除定时器
  useEffect(() => {
    return () => {
      clearInterval(refText.current)
    }
  }, [])
  // 当倒计时为0时停止定时器
  useEffect(
    () => {
      if (count === 0) {
        // 当倒计时清零后用户自己定义需要执行的操作
        callback()
        clearInterval(refText.current)
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [ count ]
  )
  return {
    count,
    start
  }
}
复制代码

useRef-操作DOM

• 参数：在获取 DOM 时，一般都设置为 null
• 返回值：包含 current 属性的对象。
• 注意：只要在 React 中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM（比如，获取 DOM 的宽高等）。
• 注意：useRef不仅仅可以用于操作DOM，还可以操作组件

// 1. 导入 useRef
import React, { useRef } from 'react'
import ReactDom from 'react-dom'

class Com1 extends React.Component {
  state = {
    a: 100
  }

  render () {
    return <div>com1, {this.state.a}</div>
  }
}

export default function App () {
  // 2. 调用useRef(初值),得到引用对象
  // 3. 把引用对象设置ref 给任意的组件/元素
  // 4. 通过引用对象.current 获取 组件/元素
  const refTxt = useRef(null)
  const refCom1 = useRef(null)
  console.log(refTxt)

  const click = () => {
    console.log(refTxt, refCom1)
    console.log(refCom1.current.state.a)
    // console.log(refTxt.current.value)
    // refTxt.current.style.backgroundColor = 'red'
  }
  return (
    <div>
      useRef, <input ref={refTxt} />{' '}
      <button onClick={click}>点击，获取input中的值</button>
      <br />
      <Com1 ref={refCom1} />
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

useRef-在多次渲染之间共享数据-停止定时器

使用步骤:

// 1. 导入 useRef
import React, { useRef } from 'react'

组件() {
  // 2. 调用useRef，
  const timeRef = useRef(null)
  // 3. 向引用的current中存入数据
  timeRef.current = 你需要在多次渲染之间共享的数据
}
复制代码

正确示例:

import React, { useEffect, useRef, useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [count, setCount] = useState(0)
  const timeRef = useRef(null)
  console.log(timeRef.current)
  useEffect(() => {
    timeRef.current = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
    console.log(timeRef.current)
  }, [])

  const hClick = () => {
    console.log(timeRef.current)
    clearInterval(timeRef.current)
  }

  return (
    <div>
      count:{count}
      <button onClick={hClick}>点击停止定时器</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

错误示例:

import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [count, setCount] = useState(0)
  let timeId = null
  console.log(timeId)
  useEffect(() => {
    timeId = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
    console.log(timeId)
  }, [])

  const hClick = () => {
    console.log(timeId)
    clearInterval(timeId)
  }

  return (
    <div>
      count:{count}
      <button onClick={hClick}>点击停止定时器</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

数据更新会重新执行函数组件,执行timeId = null,所以无法清除定时器.

useContext-全局状态

useContext使用步骤

(1)在context.js文件中导入并调用createContext方法，导出

```
 import { createContext } from 'react'
 const { Provider, Consumer } = createContext()
 export { Provider, Consumer }
```
复制代码

(2)使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据

```
import { Provider } from './context.js'
return (
  <Provider value={{ hChange, num }}>
    <根组件的内容/>
  </Provider>
)
```
复制代码

(3)在任意后代组件中，如果希望获取公共数据：

导入useContext；调用useContext(第一步中导出的context) 得到value的值

```
import { Consumer } from './context.js'
const 函数组件 = () => {

    return (   <Consumer>
    {(data) => {
      return (
        <div>
         num:{data.num}
          <button onClick={data.hChange}>+1</button>
        </div>
      )
    }}
  </Consumer> )
}
```
复制代码