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