08 hook学习02

useState回调函数的参数

参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

const [name, setName] = useState(()=>{   
  // 编写计算逻辑    return '计算之后的初始值'
})

import { useEffect, useState } from 'react'

function Count (props) {
  const [count, setCount] = useState(() => {
    // 使用函数进行计算
    return props.count
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

function App (props) {
  return (
    <div>
      <Count count={10} />
      <Count count={20} />
    </div>
  )
}

useEffect清理副作用

在组件被销毁时，如果有些副作用操作需要给清理，

在useEffect返回时写函数，实现组件销毁时执行

function Count (props) {
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('setInterval run')
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <div>
      123
    </div>
  )
}

function App (props) {
  const [flag, setFlag] = useState(true)
  return (
    <div>
      <button onClick={() => setFlag(!flag)}>switch</button>
      {flag ? <Count /> : null}
      666
    </div>
  )
}

useEffect发送网络请求

import { useEffect, useState } from 'react'

// 类组件 发送网络请求
// 使用生命周期钩子函数 componentDidMount
// 在初始化的时候dom渲染完毕后只执行一次


// useEffect
// 1，不加依赖项  - 初始化+重新渲染
// 2，加[]，初始化执行一次
// 3，加特定的依赖项，-首次执行，任意一个变化执行


function App (props) {
  useEffect(() => {
    async function loadData () {
      const res = await fetch('http://localhost:3001/get')
      console.log(res)
    }
    loadData()
  }, [])
  return (
    <div>
    </div>
  )
}


export default App

useRef

在函数组件中获取真实dom元素的对象或者组件对象

使用方法：

• 导入 useRef 函数
• 执行 useRef 函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例）
• 通过ref 绑定 要获取的元素或者组件

import { useEffect, useRef, useState } from 'react'
import React from 'react'
class Test extends React.Component {
  getName = () => {
    return 'this is test child'
  }
  render () {
    return (
      <div>
        123
      </div>
    )
  }
}

function App (props) {
  const testRef = useRef(null)
  const h1Ref = useRef(null)

  useEffect(() => {
    console.log(testRef.current)
    console.log(testRef.current.getName())
    console.log(h1Ref.current)
  }, [])
  //useEffect在渲染之后执行

  return (
    <div>
      <Test ref={testRef} />
      <h1 ref={h1Ref}>this is test demo</h1>
    </div>
  )
}


export default App

useContext

实现步骤

1. 使用createContext 创建Context对象
2. 在顶层组件通过Provider 提供数据
3. 在底层组件通过useContext函数获取数据

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

function ConsumerA () {
  return (
    <div>
      <h2>this is A</h2>
      <ConsumerB />
    </div>
  )
}
function ConsumerB () {
  const count = useContext(Context)
  return (
    <div>
      this is B<br />
      APP data count:{count}
    </div>
  )
}
const Context = createContext()

function App (props) {
  const [count, setCount] = useState(10)
  return (
    <Context.Provider value={count}>
      <div>
        <h1>this is APP</h1>
        <ConsumerA />
        <button onClick={() => setCount(count + 1)}>{count}</button>
      </div>
    </Context.Provider>
  )
}


export default App