函数组件代替class组件，自定义hooks组件之update

函数组件代替class组件，自定义hooks update

函数组件代替class组件面临的问题

1. 有无state

可以使用react.useState Reactv16.8.0 推出的HooksAPI

2. 生命周期

解决方法

1. 模拟生命周期,只要数据更新就执行,重点看useEffect 他相当于把state值全部列为useEffect为第二个参数

 useEffect((props)=>{console.log("first"),[allstate]})

import React, { useState,useEffect } from 'react';
let App=()=>{
  const [u,Setn]=useState(0)
        
  useEffect((props)=>{console.log("first")})
 const   add = () => {
      Setn(u=>u+1)
    }
    return (
    <>
      <div>{u}</div>
      <button onClick={add}>+1</button>
      </>
  )
}

2. 模拟生命周期中只在第一次渲染执行,写一个空数组即可

useEffect(()=>{console.log("first")},[])

3. 模拟 销毁

let App=()=>{
  const [u,Setn]=useState(0)
  const [visible,setvisible]=useState(true)
  useEffect((props)=>{console.log("first")})
  useEffect((props)=>{
    return ()=>{
      console.log('组件销毁')
    }
  })
 const   add = () => {
      Setn(u=>u+1)
    }
    const   hasvisible = () => {
      setvisible(visible=>false)
    }
    return (
    <>
    <div >
      {visible? 'nb':null}
      <div>{u}</div>

    </div>
    <button onClick={add}>+1</button>
      <button onClick={hasvisible}>visible</button>
    </>
  )
}
// first
// App.js:47 组件销毁
// App.js:44 first

自定义hooks之useUpdate

模拟仅在update时才执行的操作(从第二次开始), 变量名要以Use开头,请注意大小写

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


// dep 是要静态的 react官方灌顶
const Useupdate=(fn,dep)=>{
    const [x,updatex]=useState(0)
    useEffect(()=>{
        if(x>1) {
            fn()
        }
    },[x,fn])
    useEffect(()=>{
        updatex(x=>x+1)
    },[dep])
}

export default Useupdate

当使用Useupdate时候

// import useupdate.js
 useupdate(()=>{
      console.log('u变化了')
    },u)