好巧不巧，作業了一年跳槽了，之前用的vue，現在用的react～ 嗯！作業使人進步！現在開始學react吧！
切入正題～
react hooks是React16.8.0之后出現的，
類組件存在的問題：
- this指向問題
- 生命周期繁瑣
- 創建類的實體開銷較大
而函陣列件函陣列件沒有this，沒有生命周期，沒有狀態state，函式的執行開銷比創建類實體的開銷要小，
因此，為了提高性能，盡量使用函陣列件，
然而函陣列件有個最大的問題就是沒有狀態state，所以react官方出了個hooks來解決這個問題，
專案中最常用的幾個hook：
useState
1. useState最好寫到函式的起始位置，便于閱讀 2. useState嚴禁出現在代碼塊（判斷、回圈）中 3. useState回傳的函式（陣列的第二項），參考不變（節約記憶體空間） 4. 使用函式改變資料，若資料和之前的資料完全相等（使用Object.is比較），不會導致重新渲染，以達到優化效率的目的， 5. 使用函式改變資料，若傳入的是值，只會保留最后一次的函式執行，若傳入的是函式，會在事件完成后統一執行，import React, { useState } from 'react';// 引入state hook
export default function App() {
console.log("App render")
const [n, setN] = useState(0); //使用一個狀態，該狀態的默認值是0
return <div>
<button onClick={() => {
setN(n - 1);
setN(n - 2);// 傳入值，只會保留最后一次setN的執行
// setN(prevN => prevN - 1);
// setN(prevN => prevN - 1);//傳入函式，在事件完成之后統一執行
}}>-</button>
<span>{n}</span>
</div>
}
6. 如果要實作強制重繪組件
- 類組件：使用forceUpdate函式
- 函陣列件：使用一個空物件的useState
類組件
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<button onClick={()=>{
//不會運行shouldComponentUpdate
this.forceUpdate();//強制重新渲染
}}>強制重繪</button>
</div>
)
}
}
函陣列件
import React, { useState } from 'react'
export default function App() {
const [, forceUpdate] = useState({});
return <div>
<p >
<button onClick={() => {
forceUpdate({});
}}>強制重繪</button>
</p>
</div>
}
useEffect
它能在函陣列件中執行副作用，并且它與 class 中的生命周期函式極為類似，
副作用：1. ajax請求 2. 計時器 3. 其他異步操作 4. 更改真實DOM物件 5. 本地存盤 6. 其他會對外部產生影響的操作
- 副作用函式的運行時間點，是在頁面完成真實的UI渲染之后，因此它的執行是異步的，并且不會阻塞瀏覽器
- 每個函陣列件中，可以多次使用useEffect，但不要放入判斷或回圈等代碼塊中，
- useEffect中的副作用函式，可以有回傳值，回傳值必須是一個函式，該函式叫做清理函式
- useEffect函式，可以傳遞第二個引數
import React, { useState, useEffect } from 'react'
function Test() {
useEffect(() => {
console.log("副作用函式，僅掛載時運行一次")
return () => {
console.log("清理函式，僅卸載時運行一次")
};
}, []); //使用空陣列作為依賴項，則副作用函式僅在掛載的時候運行
console.log("渲染組件");
const [, forceUpdate] = useState({})
return <h1>Test組件 <button onClick={() => {
forceUpdate({})
}}>重繪組件</button></h1>
}
export default function App() {
const [visible, setVisible] = useState(true)
return (
<div>
{
visible && <Test />
}
<button onClick={() => {
setVisible(!visible);
}}>顯示/隱藏</button>
</div>
)
}
useRef
useRef(value)回傳一個物件：{current: value}
- 在每次渲染時回傳同一個 ref 物件
- 變更 .current 屬性不會引發組件重新渲染
import React, { useRef } from 'react'
export default function App() {
console.log('app render')
const nRef = useRef(10); // {current:10}
return (
<div>
<h1>{nRef.current}不會變</h1>
<button onClick={() => {nRef.current--;console.log(nRef.current, 'nRef.current變化')}}>減少</button>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/304450.html
標籤：其他
下一篇：練習spopcmd云云首頁