React手稿之State Hooks of Hooks
React Hooks
React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。
官方也陳述，接下來的90%的工作會投入到React Hooks中。
從目前官方的文件可以看出，Hooks從以下四個方面來提高React的編碼。
- state
- 生命週期
- content
- 自定義方法
Hooks的主要用途是替代之前版本的 class 元件。
說明：
到目前為止，React在已釋出的release版本中有該功能，想體驗該功能，必須安裝16.7.0-alpha.0。
```npm i [email protected] [email protected]
//或者
yarn add [email protected] [email protected]
<h1>State Hooks</h1>
<p>首先看一個React既有的版本基於 <code>class</code> 的元件.</p>
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };}
render() {
const { count } = this.state;
return (
<React.Fragment>
<p>You clicked {count} times</p>
<button onClick={() => setState({count : count + 1})}>
Click me
</button>
</React.Fragment>
);
}
}
<p>接下來我們看看用Hooks是如何實現的：</p>
import React, { useState } from 'react';
export default () => {
const [count, setCount] = useState(0);
return (
<React.Fragment>
<p>You clicked { count } times</p>
<button onClick={ () => setCount(count + 1) }>
Click me
</button>
</React.Fragment>
);
};
<p>從程式碼結構上，減少了編碼量。由原來的 <code>class</code> 元件變成 <code>function</code> 元件了。</p>
<p>不同的地方：</p>
<ul>
<li>新加入了 <code>useState</code> 方法</li>
<li>通過 <code>useState</code> 鉤子解構出了 <code>state</code> 與 <code>setState</code> 方法。</li>
<li>
<code>state</code> 的預設值，直接通過 <code>useState</code> 傳入</li>
<li>更新 <code>state</code> 不再使用 <code>setState</code> 方法。</li>
</ul>
<p>如果有多個 <code>state</code> 怎麼定義呢？</p>
const [count, setCount] = useState(0);
const [name, setName] = useState(null);
```
線上示例
推薦閱讀《React 手稿》
來源：https://segmentfault.com/a/1190000017261209