react hooks 学习笔记

文章参考

1. react hooks 使用

什么是 react hooks?

1. hooks 是 react 16.8 引入的特性，Hook
2. 是一个特殊的函数，它可以让你“钩入” React 的特性。
3. 他允许你在不写 class 的情况下操作 state 和 react 的其他特性。

useState && useEffect

useState介绍

state hook的主要作用就是获取需要的 state 和 更新state的方法

const [state, setState] = useState(initialState);

参数： initialState 可以直接是当前 state 的初始值，也可以是一个函数，函数的返回值将作为 state 的值，参数只会在组件的初始渲染中起作用

useEffect 介绍

useEffect 方法是在每次渲染之后执行，可以理解为 class 写法中的 componentDidMount / componentDidUpdate（为了方便理解可以这么理解，但不完全一样）

useEffect(didUpdate);

参数：function，在每次渲染之后执行，在函数里可以编写更新 dom ，添加订阅 等。

参数返回值： function(可以不返回) 如果 didUpdate 函数中返回了一个函数，这个函数会在组件卸载前执行(每次渲染都会执行)需要清除上次订阅的内容可以再这里面写。

执行条件： useEffect 的第二个参数是一个数组，只有当数组中的的值发生改变的时候才会调用 effect，如果执行在第一次挂载和卸载的时候调用，只需要传一个[]空数组

import React, {Component, useState, useReducer, useEffect, useLayoutEffect} from 'react'

function HoookStudy() {
  // count 是定义的变量， setCount 是改变count值的方法，useState(0)中的0 表示的是
  let [count, setCount] = useState(0)

  // 组件加载的执行的方法， 类似于 组件挂载完成时触发的函数：componentDidMount
  useEffect(() => {
    let interval = setInterval(() => {
      console.log('use useEffect')
      // 改变count的值， c 代表 count运行到这个时候的值，返回值就是要改变的值
      setCount((c) => {
        return c + 1
      })
    }, 1000)
  
    // 组件卸载执行的方法，类似于 组件将要销毁时触发的函数：componentWillUnmount
    return () => {
      console.log('unuse useEffect')
      clearInterval(interval)
    }
  }, [])

  return (
    <div>
      {count}
    </div>
  )
}

export default HoookStudy

1. 一旦改变定义的数据，例如，上面调用 setCount 方法，则组件会重新渲染，即 return 后面的内容会根据实际的变量值发生改变
2. 它的作用和 React class 中的 setState 类似

useReducer

1. userReducer 的作用于 useState 类似，都是改变定义好的数据，一旦数据发生变化，return 显示的组件内容会根据实际变量值发生改变
2. useReducer 有点类似于 redux 中的 reducer 的用法，都是改变数据

import React, {Component, useState, useReducer, useEffect, useLayoutEffect} from 'react'

// 定义一个reducer
function countReducer (state, action) {
  switch (action.type) {
    case 'add':
      return state + 1
    case 'minus':
      return state - 1
    default:
      return state
  }
}

function HoookStudy() {

  // 使用前面定义的方法，作用于 reducer, 第二个参数是初始值 0
  const [count, dispatchCount] = useReducer(countReducer, 0)

  // 组件加载的执行的方法， 类似于 组件挂载完成时触发的函数：componentDidMount
  useEffect(() => {
    let interval = setInterval(() => {
      console.log('use useEffect')
      dispatchCount({
        type: 'minus'
      })
    }, 1000)
  
    // 组件卸载执行的方法，类似于 组件将要销毁时触发的函数：componentWillUnmount
    return () => {
      console.log('unuse useEffect')
      clearInterval(interval)
    }
  }, [])

  return (
    <div>
      {count}
    </div>
  )
}

export default HoookStudy

useEffect & useLayoutEffect

1. useEffect 是在 组件渲染之后执行

2. useLayoutEffect 是在组件渲染之前执行

3. 一旦定义好的数据发生改变，如果在 useEffect 中的第二个参数中含有，则会执行 useEffect 方法

4. 一旦定义好的数据发生改变，如果在 useLayoutEffect 中的第二个参数中含有，则会执行 useLayoutEffect 方法

5. 显示的组件内容会根据实际变量值发生改变

import React, {Component, useState, useReducer, useEffect, useLayoutEffect} from 'react'


// 定义一个reducer
function countReducer (state, action) {
  switch (action.type) {
    case 'add':
      return state + 1
    case 'minus':
      return state - 1
    default:
      return state
  }
}


function HoookStudy() {

  // 使用前面定义的方法，作用于 reducer, 第二个参数是初始值 0
  const [count, dispatchCount] = useReducer(countReducer, 0)
  const [name, setName] = useState('huangbiao')


  /**
   useLayoutEffect 和 useEffect 区别
   1. useEffect 是在 组件渲染之后执行
   2. useLayoutEffect 是在组件渲染之前执行
   */

  useLayoutEffect( () => {
    console.log('layout effect invoked')
    return () => {
      console.log('layout effect deteched')
    }
  }, [name])
  /** 第二个参数：
  1. 传入数组中的项，内容发生变化，就会重新执行 useLayoutEffect 和 return 后面的方法，默认传入 空数组[]
  2. 
  */ 

  // 组件创建或者更新的时候，都会执行 useEffect 这个方法，类似于 组件挂载完成时触发的函数：componentDidMount
  useEffect( () => {
    console.log('effect invoked')
    return () => {
      console.log('effect deteched')
    }
  }, [name]) /** 第二个参数：
  1. 传入数组中的项，内容发生变化，就会重新执行 useEffect和 return 后面的方法，默认传入 空数组[]
  2. 
  */ 

  return (
    <div>
      <input value={name} onChange={ (e) => {
        setName(e.target.value)
      }} />
      <button onClick={() => {
        dispatchCount({
          type: 'add'
        })
      }}>{count}</button>
      {count}
    </div>
  )

}

export default HoookStudy