[JavaScript知识库]React Hook

hooks

在React16.8才出现的，为了解决函数式组件的一些问题比如没有状态

useState

当我们调用useState时，可以在函数中添加一个参数，作为对应stata的默认值

import { useState } from 'react'

const 组件 = () => {
  const [msg, setMsg] = useState('默认值')
  const [num, setNum] = useState(0)
  /* 
    this.state = {
      msg: '默认值'
    }


    setMsg('新值')

    setState({
      msg: "新值"
    })
  */
  return (
    // 如果想要修改msg则直接调用函数setMsg
    <div>{msg}
      
    </div>
  )
}

useEffect

代替类组件中的生命周期

const 组件 = () => {
  useEffect(() => {
    // 如果第二个参数是空数组，则该方法表示 componentWillMount 和 componentWillUnMount
    
    return () => {
      // 这里是unmount时执行的代码
    }

  }, [])
}

const 组件 = () => {
  useEffect(() => {
    // 如果没有第二个参数，则该方法表示 componentWillUpdate 和 componentWillUnMount
    
    return () => {
      // 这里是unmount时执行的代码
    }

  })
}

useParams

可以获取动态路由提供的参数

// /users/:id
import { useParams } from 'react-router-dom'

const 组件 = () => {
  const {id} = useParams()
}