到底React Hooks有何特別（二）？淺談useEffect及useReducer
· 6 min read
於本篇文章的上集，我們討論了useState如何令Stateful React component簡化良多，此篇主要討論的是如何使
用useEffect。useEffect可以簡化stateful logic，很多人都提到 React Hooks 有可能可以完全取代Redux作為 React State
Management的標準，正因如此。
重溫
上集提到，使用useState可以將原本class based component變成簡單的 functional component。
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
this.incrementCounter = this.incrementCounter.bind(this);
}
incrementCounter() {
this.setState((state) => ({
counter: state.counter + 1,
}));
}
render() {
return (
<h1 onClick={this.incrementCounter}>
Hello, {this.props.name}
{this.state.counter} times
</h1>
);
}
}
變成
function Welcome(props) {
const [counter, setCounter] = useState(0);
return (
<h1 onClick={() => setCounter((counter) => counter + 1)}>
Hello, {props.name}
{counter} times
</h1>
);
}
