React?Hooks--useEffect代替常用生命周期函數方式
useEffect代替常用生命周期函數
原始生命周期函數
componentDidMountcomponentDidUpdatecomponentWillUnmount
采用原始的方式把計數器的Demo增加兩個生命周期函數componentDidMount和componentDidUpdate。
分別在組件第一次渲染后在瀏覽器控制臺打印出計數器結果和在每次計數器狀態(tài)發(fā)生變化后打印出結果。
代碼如下：
import React, { Component } from 'react';
class Example3 extends Component {
constructor(props) {
super(props);
this.state = { count:0 }
}
componentDidMount(){
console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)
}
componentDidUpdate(){
console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.addCount.bind(this)}>Chlick me</button>
</div>
);
}
addCount(){
this.setState({count:this.state.count+1})
}
}
export default Example3;React首次渲染和之后的每次渲染都會調用一遍useEffect函數，而之前我們要用兩個生命周期函數分別表示首次渲染(componentDidMonut)和更新導致的重新渲染(componentDidUpdate)。
組件中經常用到componentWillUnmount生命周期函數（組件將要被卸載時執(zhí)行）。比如我們的定時器要清空，避免發(fā)生內存泄漏;比如登錄狀態(tài)要取消掉，避免下次進入信息出錯。
app.js
import React, { useState , useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
function Index() {
useEffect(()=>{
console.log('useEffect=>老弟你來了！Index頁面')
return ()=>{
console.log('老弟，你走了!Index頁面')
}
},[])
return <h2>JSPang.com</h2>;
}
function List() {
useEffect(()=>{
console.log('useEffect=>老弟，你來了！List頁面')
return ()=>{
console.log('老弟，你走了!List頁面')
}
})
return <h2>List-Page</h2>;
}
function App(){
const [ count , setCount ] = useState(0);
useEffect(()=>{
console.log(`useEffect=>You clicked ${count} times`)
return ()=>{
console.log('====================')
}
},[count])
return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
<Router>
<ul>
<li> <Link to="/">首頁</Link> </li>
<li><Link to="/list/">列表</Link> </li>
</ul>
<Route path="/" exact component={Index} />
<Route path="/list/" component={List} />
</Router>
</div>
)
}
export default App;index.js
import React from "react";
import {render} from "react-dom"
import App from "./components/app"
import {BrowserRouter} from "react-router-dom";
//渲染組件,我們使用react-router組件渲染組件時需要使用路由器組件標簽,我們可以使用"<BrowserRouter>"或者是"<HashRouter>"。但需要注意喲，這是一個SPA應用喲~
render(
(
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById("root")
)PS：
useEffect的第二個參數：
實現類似componentWillUnmount的效果，它是一個數組，數組中可以寫入很多狀態(tài)對應的變量，意思是當狀態(tài)值發(fā)生變化時，我們才進行解綁。
如果我們想每次count發(fā)生變化，我們都進行解綁，只需要在第二個參數的數組里加入count變量就可以了但是當傳空數組[]時，就是當組件將被銷毀時才進行解綁，這也就實現了componentWillUnmount的生命周期函數。
對React Hooks（useState和useEffect) 的總結思考
一、為什么用React Hooks(面向生命周期編程變成了面向業(yè)務邏輯編程)
Hooks是React16.8版本后新增加的特性，目的是讓你用函數組件的寫法代替原來的類組件寫法，同時讓函數組件支持state，同時用useEffect代替原來的生命周期的業(yè)務功能編寫代碼
風格，目的就是解決原來用class寫組件的痛點，痛點有哪些自行查閱資料,主要有：
（1）選擇性煩惱：是使用狀態(tài)組件還是無狀態(tài)組件? 擁有了hooks后，現在一切組件均是Function。
（2）搞不清生命周期的鉤子函數？ 擁有了hooks后，生命周期鉤子函數可以先丟一邊了。
（3）組件的this搞暈了？擁有了hooks后，不需面對this.
二、useState理解
1.useState是異步的，定義方法(語法叫數組解構寫法），例如：
// 聲明一個叫 “count” 的 state 變量?
?const [count, setCount] = useState(0);
// 更新state
<button onClick={() => setCount(count + 1)}>
? ? Click me
? </button>2. state變量可以定義多個，也可以存儲對象和數組，這邊有一個規(guī)則：它總是替換它，而不象class一樣合并它，即有閉包的概念。
三、useEffect的理解(原則：讓你忘記類組件的生命周期的函數寫法）
useEffect出現的需求背景：我們只想在 React 更新 DOM 之后運行一些額外的代碼 (所以叫副作用函數）
（一） 它是一個鉤子函數的定義，即對于dom的渲染后會產生相應的副作用（這個副作用中定義相關的功能），達于原來類組件的對生命周期函數一樣的應用效果，但比它更靈活省事。
（二）定義一個useEffect主要分為四種定義方法（總結：需不要return，需不要第二個參數，第二個參數要不要[])：
- 1.每次渲染都要執(zhí)行：則第二個參數不需要。
- 2.在組件銷毀或者調用函數前調用。： 則第一個參數中增加return語句。
- 3.只在組件掛載時執(zhí)行一次：則第二個參數用空數組:[].
- 4.只在某一個state或者prop值發(fā)生變化后，才執(zhí)行，則第二個參數[變量名]。
（三）useEffect可以定義多個，把功能實現進行分離。
（四）useEffect 使用規(guī)則：
- 1.只在最頂層使用 Hook
- 2.只在 React 函數中調用 Hook
四、useState和useEffect聲明時有先后順序
產生的結果是不一樣，所以根據業(yè)務需要靈活確定他們先后順序的組合。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
高階組件就是接受一個組件作為參數并返回一個新組件（功能增強的組件）的函數。這里需要注意高階組件是一個函數，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結，一起看看吧2022-10-10
這篇文章主要介紹了React項目經驗總結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了React函數式組件和類式組件詳情，React是組件化的的JS庫，組件化也是React的核心思想，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
本文主要介紹了React?useEffect異步操作常見問題小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要為大家介紹了React 數據獲取與性能優(yōu)化方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在React中，路由是一套映射規(guī)則，是URL路徑與組件的對應關系。使用React路由，就是配置路徑和組件的對應關系，這篇文章主要介紹了路由react-router-dom的使用,需要的朋友可以參考下2023-02-02
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對這些問題還不是很明白，那么可以在這篇文章中找到答案2022-11-11
React利用React.memo和useCallback緩存彈窗組件
本文主要介紹了React利用React.memo和useCallback緩存彈窗組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-07-07
Modal(模態(tài)框)是 web 開發(fā)中十分常見的組件,即從頁面中彈出的對話框,下面這篇文章主要給大家介紹了關于React項目中hook實現展示對話框功能的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了最新版React?Native環(huán)境搭建，React Native的運行需要依賴原生Android和iOS環(huán)境，因此需要分別安裝原生Android和iOS的開發(fā)環(huán)境，本文給大家介紹的非常詳細,需要的朋友可以參考下2022-08-08