React Hooks 之自定义Hook

UseEffect应用

• 模拟componentDidMount

useEffect(()=>{console.log("第一次渲染")})

• 模拟componentDidUpdate

useEffect(()=>{ console.log('任意属性变更') })
useEffect(()=>{ console.log('n变了') }, [n])

• 模拟componentWillUnmount

useEffect(()=>{
  console.log('第一次渲染')
  return ()=>{
    console.log('组件要死了')
  }
})

自定义一个Hook

在使用React组件的时候，初次渲染会把组件从undefined定义为我们想要的类型，这个从0到1的过程，如果组件有useEffect这一hook，则会被调用。如果我们不希望这个过程调用useEffect，我们可以定义一个counter避免这个情况，将其封装为一个自定义hook

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

// 自定义hook命名为 useUpdate
const useUpdate = (fn, dep) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount((x) => x + 1);
  }, [dep]);

  useEffect(() => {
    if (count > 1) {
      fn();
    }
  }, [count, fn]);
};

const App = (props) => {
  const [n, setN] = useState(0);
  const onClick = () => {
    setN(n + 1);
  };

  useUpdate(() => {
    console.log("n变了");
  }, n);
  return (
    <div>
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  );

通过使用自定义hookuseUpdate,就可以避免n从undefined->number过程中调用useEffect hook，只有number->number过程才会调用。