第30节——react hook 模仿生命周期

1、模仿componentDidMount

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

export default function hook() {

  useEffect(() => {
    /**
     * 当它是一个空数组时，回调只会被触发一次，类似于 componentDidMount
     */
    console.log("componentDidmount")
  }, [])

 return (
   

     
生命周期
   
 )
}

2、模仿shouldComponentUpdate

用React.memo就可以模仿shouldComponentUpdate的部分功能

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


const MyComponent =  React.memo((props) => {
  /* 使用 props 渲染 */
  return (
    
{props.num}
  )
  /**
   * prevProps 上次的值
   * nextProps 最新的值
   * 
   * 如果传来的值是偶数的话则不更新组件
   */
}, (prevProps, nextProps) => {
  console.log(nextProps, nextProps.num % 2)
  return nextProps.num % 2 === 0
})

export default function hook() {

  const [num, setNum] = useState(1)

  useEffect(() => {
    /**
     * 当它是一个空数组时，回调只会被触发一次，类似于 componentDidMount
     */
    console.log("componentDidmount")
  }, [])

  return (
    

       setNum(num + 1)}>+1
      
    
  )
}

3、模仿componentWillUnmount

  useEffect(() => {
   
    return () => {
      console.log('componentWillUnmount')
    }
  }, [])

4、封装第一个自定义hook useDidUpdate

1、封装hooks 实现componentDidUpdate功能

• 初始化的时候不调用
• 每次render时都会被调用

2、期望结果

// 引入我们封装的自定义hooks
import useDidUpdate from './hooks/use-didupdate'

export default () => {
   useDidupdate(() => {
     // 每次初始化的时候不触发，每次render都会触发
    console.log("模仿componentDidUpdate")
  })
}