使用React?Hooks模擬生命周期的實現(xiàn)方法

更新時間：2023年02月08日 09:15:08 作者：barnett_y

這篇文章主要介紹了使用React?Hooks模擬生命周期,本文舉例說明如何使用 hooks 來模擬比較常見的 class 組件生命周期，需要的朋友可以參考下

前言

在 React 16.8 之前，函數(shù)組件只能是無狀態(tài)組件，也不能訪問 react 生命周期。hook 做為 react 新增特性，可以讓我們在不編寫 class 的情況下使用 state 以及其他的 react 特性，例如生命周期。接下來我們便舉例說明如何使用 hooks 來模擬比較常見的 class 組件生命周期。

constructor

class 組件

class Example extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
    }
    render() {
      return null;
  }
}

函數(shù)組件不需要構(gòu)造函數(shù),可以通過調(diào)用 useState 來初始化 state

function Example() {
  const [count, setCount] = useState(0);
  return null;
}

componentDidMount

class 組件訪問 componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

使用 hooks 模擬 componentDidMount

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

useEffect 擁有兩個參數(shù)，第一個參數(shù)作為回調(diào)函數(shù)會在瀏覽器布局和繪制完成后調(diào)用，因此它不會阻礙瀏覽器的渲染進(jìn)程。
第二個參數(shù)是一個數(shù)組

當(dāng)數(shù)組存在并有值時，如果數(shù)組中的任何值發(fā)生更改，則每次渲染后都會觸發(fā)回調(diào)。
當(dāng)它不存在時，每次渲染后都會觸發(fā)回調(diào)。
當(dāng)它是一個空列表時，回調(diào)只會被觸發(fā)一次，類似于 componentDidMount。

shouldComponentUpdate

class 組件訪問 shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
  console.log('shouldComponentUpdate')
  // return true 更新組件
  // return false 則不更新組件
}

hooks 模擬 shouldComponentUpdate

const MyComponent = React.memo(
    _MyComponent, 
    (prevProps, nextProps) => nextProps.count !== prevProps.count
)

React.memo 包裹一個組件來對它的 props 進(jìn)行淺比較,但這不是一個 hooks，因為它的寫法和 hooks 不同,其實React.memo 等效于 PureComponent，但它只比較 props。

componentDidUpdate

class 組件訪問 componentDidUpdate

componentDidMount() {
  console.log('mounted or updated');
}
 
componentDidUpdate() {
  console.log('mounted or updated');
}

使用 hooks 模擬 componentDidUpdate

useEffect(() => console.log('mounted or updated'));

值得注意的是，這里的回調(diào)函數(shù)會在每次渲染后調(diào)用，因此不僅可以訪問 componentDidUpdate，還可以訪問componentDidMount，如果只想模擬 componentDidUpdate，我們可以這樣來實現(xiàn)。

const mounted = useRef();
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
   console.log('I am didUpdate')
  }
});

useRef 在組件中創(chuàng)建“實例變量”。它作為一個標(biāo)志來指示組件是否處于掛載或更新階段。當(dāng)組件更新完成后在會執(zhí)行 else 里面的內(nèi)容，以此來單獨模擬 componentDidUpdate。

componentWillUnmount

class 組件訪問 componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}

hooks 模擬 componentWillUnmount

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

當(dāng)在 useEffect 的回調(diào)函數(shù)中返回一個函數(shù)時，這個函數(shù)會在組件卸載前被調(diào)用。我們可以在這里面清除定時器或事件監(jiān)聽器。

總結(jié)

引入 hooks 的函數(shù)組件功能越來越完善，在多數(shù)情況下，我們完全可以使用 hook 來替代 class 組件。并且使用函數(shù)組件也有以下幾點好處。
純函數(shù)概念，同樣的 props 會得到同樣的渲染結(jié)果?？梢允褂煤瘮?shù)組合，嵌套，實現(xiàn)功能更加強大的組件。組件不會被實例化，整體渲染性能得到提升。
但是 hooks 模擬的生命周期與class中的生命周期不盡相同，我們在使用時，還是需要思考業(yè)務(wù)場景下那種方式最適合。