react hooks

useState，useEffect，useRef，useSelector，useDispatch的基本使用

1，关于useState的使用，使用useState()进行状态管理

import React, { useEffect, useRef, useState } from 'react'
function App(props) {
  //  setName为设置name的值的函数，useState可设置name的默认值
  const [name, setName] = useState(props.name)
  const [age, setAge] = useState(props.age)

  // useState支持传入一个函数来设置默认值
  const [count, setCount] = useState(() => {
    return props.count || 0
  }))

  const changeName = value => {
    // 改变name的值
    setName(value)
  }
  //  直接用name
  return (
    <>
      <div>{name}</div>
      <button onClick={() => changeName('yebuyu')}>改变name值</button>
    </>
  )
}

2，useEffect的使用

1）useEffect是通用的副效应钩子 ，组件加载以后，React 就会执行这个函数（最少执行一次）；

2）useEffect()的第二个参数，为一个数组，数组元素为指定的依赖项，只有当依赖项变量发生变化时，副效应函数才会执行(可以用作watch监听，某个变量更新就执行该函数)；

3）若第二个参数为空数组，则副效应函数只运行一次；

4）多个副效应需要使用多个useEffect()

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

const App = (props) => {
  // 第二个参数为依赖项，只有当props.name值改变时才会调用useEffect()，初始化时也会调用一次
  useEffect(() => {
    document.title = `Hello, ${props.name}`;
  }, [props.name]);

  return <h1>Hello, {props.name}</h1>;
}

5）useEffect允许返回一个函数，组件在卸载时执行；一般可用于初始化数据、清理副效应、监听、定时器等；

useEffect(() => {
  window.addEventListener('beforeunload', fn)
  
  timer = setTimeout(() => {
    // do something
  }, 200)
  return () => {
    window.removeEventListener('beforeunload', fn)
    clearTimeout(timer)
    timer = null
  };
}, []);

3，useRef()的使用：获取ref

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

const GetElement = () => {
  const ref = useRef()
  
  useEffect(() => {
    if (ref.current) {
      console.log(`width: ${ref.current.clientWidth}, height: ${ref.current.clientHeight}`)
    }
  }, [])
  return (
    <div>
      <h2>Get Element</h2>
      <div ref={ref} style={{ width: 400, height: 300, background: 'red' }} />
    </div>
  )
}

4，useSelector的使用：获取redux里面的state；useDispatch的使用：获取redux里面的方法，以便调用

import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
const App = () => {
  // 获取redux的方法
  const dispatch = useDispatch()
  
  // 获取redux的变量名
  const { emailText } = useSelector(state => ({
    emailText: state.chat.emailText,
  }))
  
  useEffect(() => {
    console.log(emailText)
    // 执行store中chat模块的setEmail方法名
    dispatch.chat.setEmail('123')
  }, [emailText])
  return (
    <div>
      ...
    </div>
  )
}

参考链接：

简单易懂的 React useState() Hook 指南（长文建议收藏） - 掘金

使用 State Hook – React

轻松学会 React 钩子：以 useEffect() 为例 - 阮一峰的网络日志