使用React?Hooks模擬生命周期的實現方法
前言
在 React 16.8 之前,函數組件只能是無狀態(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; } }
函數組件不需要構造函數,可以通過調用 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 擁有兩個參數,第一個參數作為回調函數會在瀏覽器布局和繪制完成后調用,因此它不會阻礙瀏覽器的渲染進程。
第二個參數是一個數組
- 當數組存在并有值時,如果數組中的任何值發(fā)生更改,則每次渲染后都會觸發(fā)回調。
- 當它不存在時,每次渲染后都會觸發(fā)回調。
- 當它是一個空列表時,回調只會被觸發(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 進行淺比較,但這不是一個 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'));
值得注意的是,這里的回調函數會在每次渲染后調用,因此不僅可以訪問 componentDidUpdate,還可以訪問componentDidMount,如果只想模擬 componentDidUpdate,我們可以這樣來實現。
const mounted = useRef(); useEffect(() => { if (!mounted.current) { mounted.current = true; } else { console.log('I am didUpdate') } });
useRef 在組件中創(chuàng)建“實例變量”。它作為一個標志來指示組件是否處于掛載或更新階段。當組件更新完成后在會執(zhí)行 else 里面的內容,以此來單獨模擬 componentDidUpdate。
componentWillUnmount
class 組件訪問 componentWillUnmount
componentWillUnmount() { console.log('will unmount'); }
hooks 模擬 componentWillUnmount
useEffect(() => { return () => { console.log('will unmount'); } }, []);
當在 useEffect 的回調函數中返回一個函數時,這個函數會在組件卸載前被調用。我們可以在這里面清除定時器或事件監(jiān)聽器。
總結
- 引入 hooks 的函數組件功能越來越完善,在多數情況下,我們完全可以使用 hook 來替代 class 組件。并且使用函數組件也有以下幾點好處。
- 純函數概念,同樣的 props 會得到同樣的渲染結果。可以使用函數組合,嵌套,實現功能更加強大的組件。組件不會被實例化,整體渲染性能得到提升。
- 但是 hooks 模擬的生命周期與class中的生命周期不盡相同,我們在使用時,還是需要思考業(yè)務場景下那種方式最適合。
參考鏈接
blog.solutotlv.com/react-class…
到此這篇關于使用React Hooks模擬生命周期的文章就介紹到這了,更多相關React Hooks模擬生命周期內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook,是最流行的不可變數據結構的實現之一。它實現了完全的持久化數據結構,使用結構共享。所有的更新操作都會返回新的值,但是在內部結構是共享的,來減少內存占用2023-02-02使用react-activation實現keepAlive支持返回傳參
本文主要介紹了使用react-activation實現keepAlive支持返回傳參,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-05-05解決React報錯Functions are not valid as 
這篇文章主要為大家介紹了React報錯Functions are not valid as a React child解決詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12react最流行的生態(tài)替代antdpro搭建輕量級后臺管理
這篇文章主要為大家介紹了react最流行的生態(tài)替代antdpro搭建輕量級后臺管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08