到底React Hooks有何特別（二）？淺談useEffect及useReducer
· 5 min read
Developer & Co-founder of Tecky Academy
於本篇文章的上集，我們討論了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>;
}
