React useEffect Hooks 傳遞不同參數(shù)有哪些執(zhí)行規(guī)則和返回方式
Effect Hook 可以讓你在函數(shù)組件中執(zhí)行副作用操作，這里提到副作用，什么是副作用呢，就是除了狀態(tài)相關的邏輯，比如網(wǎng)絡請求，監(jiān)聽事件，查找 dom。
可以這樣說，在使用了useState或是useEffect這樣的hooks之后，每次組件在render的時候都生成了一份本次render的state、function、effects，這些與之前或是之后的render里面的內(nèi)容都是沒有關系的。而對于class component來說，state是一種引用的形式。這就造成了二者在一些表現(xiàn)上的不同。
只要是副效應，都可以使用useEffect()引入。它的常見用途有下面幾種。
- 獲取數(shù)據(jù)(data fetching)
- 事件監(jiān)聽或訂閱(setting up a subscription)
- 改變 DOM(changing the DOM)
- 輸出日志(logging)
副效應是隨著組件加載而發(fā)生的，那么組件卸載時，可能需要清理這些副效應。
useEffect()允許返回一個函數(shù)，在組件卸載時，執(zhí)行該函數(shù)，清理副效應。如果不需要清理副效應，useEffect()就不用返回任何值。
使用useEffect()時，有一點需要注意。如果有多個副效應，應該調(diào)用多個useEffect()，而不應該合并寫在一起。
一、參數(shù)規(guī)則
1.可選的
2.數(shù)組類型
3.值為state或者props
二、不同的參數(shù)和返回
1.不傳參數(shù)
默認的行為，會每次 render 后都執(zhí)行，一般表單控制中使用。
類似于類組件中的componentDidMoount以及componentDidUpdate。
useEffect(() => {
console.log('useEffect with no dependency')
})
2.空數(shù)組
傳入第二個參數(shù)，每次 render 后比較數(shù)組的值沒變化，不會在執(zhí)行。
類似于類組件中的 componentDidMount。
useEffect(() => {
console.log('useEffect with empty dependency')
}, [])
3.有一個或者多個值得數(shù)組
傳入第二個參數(shù)，只有一個值，比較該值有變化就執(zhí)行
傳入第二個參數(shù)，有2個值的數(shù)組，會比較每一個值，有一個不相等就執(zhí)行；
類似于類組件中的componentDidUpdate；
useEffect(() => {
console.log('useEffect widh specify dependency')
}, [state, props])
4.返回一個函數(shù)
返回時傳遞一個函數(shù)進行卸載，在組件卸載時候調(diào)用；
類似于類組價中componentWillUnmout。
useEffect(() => {
console.log('useEffect widh specify callback');
return () => {
console.log('useEffect with specify callback');
}
})
如果你熟悉 React class 的生命周期函數(shù)，你可以把 useEffect Hook 看做componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數(shù)的組合。
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
使用 Hook 的示例
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
默認情況下，它在第一次渲染之后和每次更新之后都會執(zhí)行。你可能會更容易接受 effect 發(fā)生在“渲染之后”這種概念，不用再去考慮“掛載”還是“更新”。React 保證了每次運行 effect 的同時，DOM 都已經(jīng)更新完畢。
數(shù)據(jù)獲取，設置訂閱以及手動更改 React 組件中的 DOM 都屬于副作用。有些副作用可能需要清除，所以需要返回一個函數(shù)，比如掛載時設置定時器，卸載時取消定時器。
class Example extends Component {
constructor (props) {
super(props);
this.state = {
count: 0
}
}
componentDidMount() {
this.id = setInterval(() => {
this.setState({count: this.state.count + 1})
}, 1000);
}
componentWillUnmount() {
clearInterval(this.id)
}
render() {
return <h1>{this.state.count}</h1>;
}
}
使用 Hook 的示例
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>
}
