React 其他常用Hooks

1. useImperativeHandle

• 在react中父组件可以通过forwardRef将ref转发到子组件；
• 子组件拿到父组件创建的ref，绑定到自己的某个元素；

forwardRef的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件，某下情况可能造成不可控的问题， 父组件可以拿到DOM后进行任意的操作 。

通过 useImperativeHandle：

可以只暴露固定的操作， 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起，在父组件调用子组件的方法时，通过自定义实现，让父组件使用返回的对象；

import React, { memo, useRef, forwardRef, useImperativeHandle } from 'react'

const HelloWorld = memo(forwardRef((props, ref) => {

  const inputRef = useRef()

  // 子组件对父组件传入的ref进行处理
  useImperativeHandle(ref, () => {
    return {
      focus() {
        console.log("focus")
        inputRef.current.focus()
      },
      setValue(value) {
        inputRef.current.value = value
      }
    }
  })

  return <input type="text" ref={inputRef}/>
}))


const App = memo(() => {
  const titleRef = useRef()
  const inputRef = useRef()

  function handleDOM() {
    // console.log(inputRef.current)
    inputRef.current.focus()
    // inputRef.current.value = ""
    inputRef.current.setValue("哈哈哈")
  }

  return (
    <div>
      <h2 ref={titleRef}>哈哈哈</h2>
      <HelloWorld ref={inputRef}/>
      <button onClick={handleDOM}>DOM操作</button>
    </div>
  )
})

export default App

2. useLayoutEffect

useLayoutEffect看起来和useEffect非常的相似，事实上他们也只有一点区别而已:

• useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新；
• useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

3. redux hooks

redux开发中，为了让组件和redux结合起来，我们使用了react-redux中的connect：

• 这种方式必须使用高阶函数结合返回的高阶组件；
• 必须编写：mapStateToProps和 mapDispatchToProps映射的函数；

Redux7.1开始，提供了Hook的方式，我们再也不需要编写connect以及对应的映射函数

useSelector的作用是将state映射到组件中：

• 参数一：将state映射到需要的数据中；
• 参数二：可以进行比较来决定是否组件重新渲染（react-redux中提供了shallowEqual进行比较）；

useDispatch： 直接获取dispatch函数，之后在组件中直接使用即可；

import React, { memo } from 'react'
import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { addNumberAction, changeMessageAction, subNumberAction } from './store/modules/counter'


// memo高阶组件包裹起来的组件有对应的特点: 只有props发生改变时, 才会重新渲染
const Home = memo((props) => {
  const { message } = useSelector((state) => ({
    message: state.counter.message
  }), shallowEqual) // shallowEqual优化，只有当组件内使用的state.message改变时重新加载  不会由于父组件更新了state的其他参数重新渲染

  const dispatch = useDispatch()
  function changeMessageHandle() {
    dispatch(changeMessageAction("你好啊, 师姐!"))
  }

  console.log("Home render")

  return (
    <div>
      <h2>Home: {message}</h2>
      <button onClick={e => changeMessageHandle()}>修改message</button>
    </div>
  )
})


const App = memo((props) => {
  // 1.使用useSelector将redux中store的数据映射到组件内
  const { count } = useSelector((state) => ({
    count: state.counter.count
  }), shallowEqual)

  // 2.使用dispatch直接派发action
  const dispatch = useDispatch()
  function addNumberHandle(num, isAdd = true) {
    if (isAdd) {
      dispatch(addNumberAction(num))
    } else {
      dispatch(subNumberAction(num))
    }
  }

  console.log("App render")

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => addNumberHandle(1)}>+1</button>
      <button onClick={e => addNumberHandle(6)}>+6</button>
      <button onClick={e => addNumberHandle(6, false)}>-6</button>

      <Home/>
    </div>
  )
})

export default App

4. useTransition

返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。

打个比方：搜索过滤，在输入框输入时，对于上w条数据时，会存在卡顿，是由于在搜索的输入事件中，event.target.value更新与过滤出来的数据同时更新，导致输入存在卡顿原因。通过useTransition 在告诉react对于某部分任务的更新优先级较低，可以稍后进行更新。

useTransition返回两个参数。

import React, { memo, useState, useTransition } from 'react'
import namesArray from './namesArray'

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray)
  const [ pending, startTransition ] = useTransition()

  function valueChangeHandle(event) {
    startTransition(() => {
      const keyword = event.target.value
      const filterShowNames = namesArray.filter(item => item.includes(keyword))
      setShowNames(filterShowNames)
    })
  }

  return (
    <div>
      <input type="text" onInput={valueChangeHandle}/>
      <h2>用户名列表: {pending && <span>data loading</span>} </h2>
      <ul>
        {
          showNames.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  )
})

export default App