react(笔记)6.0---hook函数扩展,复杂数据管理.各项缓存.组件通信调用

---useReducer(类似于useState)状态管理数据

用于管理相对复杂的状态数据

示例代码:

import { useReducer } from 'react'
// reducer函数的使用
function reducer(state, action) {
    switch (action.type) {
        case 'ADD':
            return state + 1
        case 'DEL':
            return state - 1
        case 'SET':
            return action.payload
        default:
            return state 
    }
}

const Layout = () => {
    const [state , dispath] = useReducer(reducer,0)
    return (<div>
        <button onClick={()=>dispath({type:'DEL'})}>-</button>
        {state}
        <button onClick={()=>dispath({type:'ADD'})}>+</button>
        <button onClick={()=>dispath({type:'SET',payload:100})}>UPDATE</button>
    </div>
    )
}
export default Layout

---useMemo(类似于useEffect)计算缓存

作用:计算缓存,适用于消耗非常大的计算

示例代码:

只有count1变化时才返回计算得到的结果

import { useMemo, useState } from 'react'

function fib (n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sum = fib(count)
  // 通过useMemo缓存计算结果，只有count发生变化时才重新计算
  const sum = useMemo(() => {
    return fib(count)
  }, [count])

  const [num, setNum] = useState(0)

  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}

export default App

---React.memo(组件缓存渲染)缓存值

作用:阻止子组件跟着父组件一起渲染

说明:

1. 传递一个简单类型的prop, prop变化时组件重新渲染
2．传递一个引用类型的prop,比较的是新值和旧值的引用是否相等当父组件的函数重新执行时，实际上形成的是新的数组引用
3．保证引用稳定->可以使用useMemo 组件渲染的过程中缓存一个值、
 

用memo()包着子组件,然后把渲染的子组件标签改为返回的对象MomoSon

示例代码:

import { memo, useState } from "react"

// memo阻住子组件跟着渲染
const MemoSon = memo(function Son() {
  console.log('xixixixi')
  return (<div>我是 son</div>)
}
)
function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <div>我是爹</div>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
      {/* <Son></Son> */}
      <MemoSon></MemoSon>
    </div>
  )
}

export default App

---useCallback(组件缓存渲染)缓存函数

基于React.memo实现

在给子组件传递方法时带上useCallback,然后返回新的函数

写法:

useCallback((message) => {
    console.log(message)
  }, [])

 示例代码:

// useCallBack

import { memo, useCallback, useState } from 'react'

const MemoSon = memo(function Son() {
  console.log('Son组件渲染了')
  return <div>this is son</div>
})

function App() {
  const [count , forceUpate] = useState()
  console.log('父组件重新渲染了')
  const onGetSonMessage = useCallback((message) => {
    console.log(message)
  }, [])

  return (
    <div>
      <MemoSon onGetSonMessage={onGetSonMessage} />
      <button onClick={() => forceUpate(count + 1 )}>update</button>
    </div>
  )
}

export default App

---React-forwardRef(父组件获取子组件的dom元素)

--先认识useRef

useRef的作用:可以在React组件中用于访问DOM节点或存储跨渲染周期的数据

实现思路:1.先用Useref绑定一个dom元素,再用forwardRef接收

示例代码:

import { forwardRef, useRef } from "react"

// function Son(){
// return <input type="text" ref={ref}></input>
// }
const Son = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />
})

function App() {
  const sonRef = useRef(null)
  const showRef = () => {
    console.log(sonRef); //<input/>
    
    sonRef.current.focus()
  }
  return (
    <div>
      <div>我是爹</div>
      <Son ref={sonRef}></Son>
      <button onClick={showRef}>11</button>
    </div>
  )
}

export default App

---useInperativeHandle(父组件调用子组件的方法)

基于forwardRef

示例代码:

import { forwardRef, useImperativeHandle, useRef } from "react"

// function Son(){
// return <input type="text" ref={ref}></input>
// }
const Son = forwardRef((props, ref) => {
  // 功能逻辑
  const inputRef = useRef(null)
  const focusHandler = () => {
    inputRef.current.focus()
  }
  // 把方法暴露给父组件
  useImperativeHandle(ref, () => {
    // 可以是多个方法
    return {
      focusHandler
    }
  })
  return <input type="text" ref={inputRef} />
})

function App() {
  const sonRef = useRef(null)
  const showRef = () => {
    // console.log(sonRef.current); 
    sonRef.current.focusHandler()
  }
  return (
    <div>
      <div>我是爹</div>
      <Son ref={sonRef}></Son>
      <button onClick={showRef}>11</button>
    </div>
  )
}

export default App