React Hooks 指北（八）：useLayoutEffect和自定义Hooks

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

1.useLayoutEffect介绍

useLayoutEffect和useEffect本质是同一个hooks,都是副作用钩子。其不同点主要有

1. useEffect更新是在数据改变并且页面已经渲染完成。而useLayoutEffect更新是在数据改变，但是页面还未渲染处执行
2. useEffect回调函数的执行不会阻塞浏览器的渲染，而useLayoutEffect回调函数的执行会阻塞浏览器的渲染。

2.使用

useEffect

分析代码，首次加载界面渲染1，然后执行useEffect的回调函数，执行setValue(2)。组件重新加载，并将数据更新，界面又渲染2。因此界面发生了两次渲染

export default memo(function Son(props) { 
  const [value,setValue] = useState(1)


  useEffect(()=>{
    if(value===1) 
      setValue(2)
  })

  return <div> 
    <div>{value}</div>
  </div>
})

useLayoutEffect

首次加载，界面渲染前，执行回调将value的值修改为2。组件重新更新，然后value修改2，界面渲染一次。

  export default memo(function Son(props) { 
      const [value,setValue] = useState(1)

      useLayoutEffect(()=>{
        if(value===1) 
          setValue(2)
      })

      return <div> 
        <div>{value}</div>
      </div>
    })
    

3.自定义Hooks

React提供给我们自定义Hooks，通过自定义Hooks可以实现逻辑的复用，极大的提高了组件开发的设计能力。 值得注意的是，自定义Hooks的函数命名必须是useXXX开头，否则React不会认为这是自定义Hooks

• 普通函数内部无法使用hooks,直接报错
• 自定义Hooks可以直接使用Hooks
• 自定义Hooks必须以use开头

设计自定义Hooks监听每个组件的创建和销毁

useLife自定义Hooks

import { useEffect } from "react";
export default function useLife(name) {
  useEffect(()=>{
    console.log(`${name}被首次创建`)
    return ()=>{
      console.log(`${name}被销毁`)
    }
  },[])
}

App.js

import Son from './views/Son';
export default function App() {
  const [show,setShow] = useState(true)
  return (
    <div>
      {show && <Son/>}
      <div onClick={()=>setShow(!show)}>切换</div>
    </div>
  );
}

Son.js:测试自定义Hooks

import useLife from "../hooks/life"
export default function Son(props) { 
  const [value,setValue] = useState(1)
  useLife('son')
  return <div> 
    <div>{value}</div>
  </div>
}

可以发现自定义Hooks十分便捷的可以实现。