React-06hooks

使用Hooks的理由

1、高阶组件为了复用导致代码层级复杂 2、生命周期的复杂 3、写成functional组件，无状态组件，因为需要状态，又改了class，成本高

保存组件状态useState

基本使用

import React, { useState } from 'react'

export default function SaveState() {

  const [name, setName] = useState("张三")
  console.log(name);
  return (
    <div>
      <button onClick={() => {
        setName('法外狂徒')
      }}>变身</button>
      {name}
    </div>
  )

处理副作用useEffect和同步执行副作用useLayoutEffect

基本使用

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

export default function Effect() {

  const [word, setword] = useState('second')

  useEffect(() => {
    setword(word.substring(0,1).toUpperCase()+word.substring(1))
    
  }, [word]) //空数组表明不依赖任何东西，只执行一次，如果设置了对应的状态，则可以在使用set状态的地方复用
  

  return (
    <div>
      {word} <button onClick={() => {
        setword('zhangsan')
      }}>change</button>
    </div>
  )
}

记忆函数useCallback

防止由于组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次 基本使用

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

export default function CBK() {

  const [count, setcount] = useState(0)

  const cb = useCallback(
    () => {
      setcount(count + 5)
    },
    [count]
  )

  return (
    <div>
      <button onClick={() => {
        cb()
      }}>加一{count}</button>
    </div>
  )
}

第二个参数数组，如果传空，则无论做什么函数内部都不会发生多次变化只会保存第一次的变化

保存引用值useRef

基本使用

import React, { useRef } from 'react'

export default function Ref() {

  const myInputTxt = useRef()

  return (
    <div>
      <input type="text" ref={myInputTxt} onChange={(evt) => {
        console.log(evt.currentTarget.value);
      }}/>
    </div>
  )
}

useReducer状态管理

基本使用

import React, { useReducer } from 'react'

// 处理函数
const reducer = (prevState, action) => {
  console.log('reducer', prevState, action);
  // 注意：不能修改原状态，需要创建新的状态进行修改
  let newState = {...prevState}
  if (action.type == 'min') {
    newState.count--
  } else {
    newState.count++
  }
  return newState
}

// 外部对象
const countState = {
  count:0
}

export default function Reduc() {

  const [state, dispatch] = useReducer(reducer, countState)

  return (
    <div>
      <button onClick={() => {
        dispatch({
          type:'min'
        })
      }}>-</button>
      {state.count}
      <button onClick={() => {
        dispatch({
          type:'sum'
        })
      }}>+</button>
    </div>
  )
}