日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

React?Hooks--useEffect代替常用生命周期函數(shù)方式_React

作者：javafanwk ? 更新時間： 2022-11-06 編程語言

useEffect代替常用生命周期函數(shù)

原始生命周期函數(shù)

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

采用原始的方式把計數(shù)器的Demo增加兩個生命周期函數(shù)componentDidMount和componentDidUpdate。

分別在組件第一次渲染后在瀏覽器控制臺打印出計數(shù)器結(jié)果和在每次計數(shù)器狀態(tài)發(fā)生變化后打印出結(jié)果。

代碼如下：

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首次渲染和之后的每次渲染都會調(diào)用一遍useEffect函數(shù)，而之前我們要用兩個生命周期函數(shù)分別表示首次渲染(componentDidMonut)和更新導致的重新渲染(componentDidUpdate)。

組件中經(jīng)常用到componentWillUnmount生命周期函數(shù)（組件將要被卸載時執(zhí)行）。比如我們的定時器要清空，避免發(fā)生內(nèi)存泄漏;比如登錄狀態(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的第二個參數(shù)：

實現(xiàn)類似componentWillUnmount的效果，它是一個數(shù)組，數(shù)組中可以寫入很多狀態(tài)對應的變量，意思是當狀態(tài)值發(fā)生變化時，我們才進行解綁。

如果我們想每次count發(fā)生變化，我們都進行解綁，只需要在第二個參數(shù)的數(shù)組里加入count變量就可以了但是當傳空數(shù)組[]時，就是當組件將被銷毀時才進行解綁，這也就實現(xiàn)了componentWillUnmount的生命周期函數(shù)。

對React Hooks（useState和useEffect) 的總結(jié)思考

一、為什么用React Hooks(面向生命周期編程變成了面向業(yè)務邏輯編程)

Hooks是React16.8版本后新增加的特性，目的是讓你用函數(shù)組件的寫法代替原來的類組件寫法，同時讓函數(shù)組件支持state，同時用useEffect代替原來的生命周期的業(yè)務功能編寫代碼

風格，目的就是解決原來用class寫組件的痛點，痛點有哪些自行查閱資料,主要有：

（1）選擇性煩惱：是使用狀態(tài)組件還是無狀態(tài)組件? ? 擁有了hooks后，現(xiàn)在一切組件均是Function。

（2）搞不清生命周期的鉤子函數(shù)？ ?擁有了hooks后，生命周期鉤子函數(shù)可以先丟一邊了。

（3）組件的this搞暈了？擁有了hooks后，不需面對this.

二、useState理解

1.useState是異步的，定義方法(語法叫數(shù)組解構(gòu)寫法），例如：

// 聲明一個叫 “count” 的 state 變量?
?const [count, setCount] = useState(0);
// 更新state
<button onClick={() => setCount(count + 1)}>
? ? Click me
? </button>

2. state變量可以定義多個，也可以存儲對象和數(shù)組，這邊有一個規(guī)則：它總是替換它，而不象class一樣合并它，即有閉包的概念。

三、useEffect的理解(原則：讓你忘記類組件的生命周期的函數(shù)寫法）

useEffect出現(xiàn)的需求背景：我們只想在 React 更新 DOM 之后運行一些額外的代碼 ? (所以叫副作用函數(shù)）

（一） 它是一個鉤子函數(shù)的定義，即對于dom的渲染后會產(chǎn)生相應的副作用（這個副作用中定義相關(guān)的功能），達于原來類組件的對生命周期函數(shù)一樣的應用效果，但比它更靈活省事。

（二）定義一個useEffect主要分為四種定義方法（總結(jié)：需不要return，需不要第二個參數(shù)，第二個參數(shù)要不要[])：

  • 1.每次渲染都要執(zhí)行：則第二個參數(shù)不需要。
  • 2.在組件銷毀或者調(diào)用函數(shù)前調(diào)用。： ? 則第一個參數(shù)中增加return語句。
  • 3.只在組件掛載時執(zhí)行一次：則第二個參數(shù)用空數(shù)組:[].
  • 4.只在某一個state或者prop值發(fā)生變化后，才執(zhí)行，則第二個參數(shù)[變量名]。

（三）useEffect可以定義多個，把功能實現(xiàn)進行分離。

（四）useEffect 使用規(guī)則：

  • 1.只在最頂層使用 Hook
  • 2.只在 React 函數(shù)中調(diào)用 Hook

四、useState和useEffect聲明時有先后順序

產(chǎn)生的結(jié)果是不一樣，所以根據(jù)業(yè)務需要靈活確定他們先后順序的組合。

原文鏈接：https://blog.csdn.net/fwk19840301/article/details/122746267

欄目分類
最近更新