到底React Hooks有何特別?
新近推出的React 16.7包括一個很有趣的功能,名字叫做React Hooks
。看到這個名字,很多人會下意識認為是在講
componentDidMount
, componentDidUpdate
等方法。但其實這些方法正名是 React Lifecycle Method
,推出React Hooks
是為了方便開發者多用functional component,但仍然能夠使用state
及props
等重要功能。
React簡介
如果你只對平常的Web Programming
有認識,而未曾使用過React 的話,首先需要理解React
的特別之處:
與Dom Manipulation
不同,以React開發前端軟件要以component
作為基本單位去思考。以下是一個
React Component的例子:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
對未曾接觸過React的朋友,以上一段代碼最令人奇怪的就是一段 <h1>Hello, </h1>。
這個格式稱之為JSX
,就是容許開發者將HTML
直接嵌入Javascript
之中,簡化代碼的複雜程度。以上一段,就是將從
function
外傳遞的值成為參數,生成對應的HTML。
const elem = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));
以上這個例子,name
的值就是Sara
,elem
亦會是<h1> Hello, Sara</h1>
的HTML。
就是運用了React裏面props
的概念,props
是properties
的簡稱,代表由外層component
傳遞進來的值。
用class來建立component
要運用另外一個重要概念 state
,在React Hooks
出現之前,我們需要使用class component in reacts
.以下是同一個component
,以 class的型式重寫。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
使用class
的一大好處,就是因為this
的存在,我們可以使用state
來儲存不同的值,再根據不同情況改變state
。
例如我們想為這個Welcome
加一個counter
,每一次按h1
就會加上1 。Welcome
就會變成這個樣子。
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>
);
}
}
加上React基本的設置,我們可以得到以下這個簡單的網站:
React Hooks
本來,React的component
用法就只有這兩大類,但是相信大家感受到使用functional component
簡單得多,
無需額外的一個class
,只要普通一個function
就已經解決了。
問題是Javascript的function不支援this, 所以也無法儲存任何state
因此,React的開發者加入了兩個非常有用的built-in functions
,一個叫useState
,一個叫useEffect
useState
幫助開發者讀取及寫入state
,簡化的正是以上setState
的一段代碼。useEffect
幫助開發者簡化例如componentDidUpdate
等的logic。
以下是一個使用了useState
重寫的例子。
function Welcome(props) {
const [counter, setCounter] = useState(0);
return (
<h1 onClick={() => setCounter((counter) => counter + 1)}>
Hello, {props.name}
{counter} times
</h1>
);
}
[counter,setCounter]
前面的是counter
的state
,後面的是更新counter
的function
。
因為我們的counter
本身是基於之前的counter
去更新,所以可以直接傳遞一個function
像
counter=>counter+1
去更新counter的數值。
至於useState(0)
的0
就是counter的初始數值。
總結
加入React Hooks,簡化了開發stateful react component
的難度,useEffect
亦可有效分享stateful logic
,不過今次篇幅有限,暫時先介紹useState
吧。