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 react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

//或者

yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

State Hooks

首先看一個React既有的版本基於 class 的組件.

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>
    );
  }

}

接下來咱們看看用Hooks是如何實現的：

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>
  );
};

從代碼結構上，減小了編碼量。由原來的 class 組件變成 function 組件了。

不一樣的地方：

• 新加入了 useState 方法
• 經過 useState 鉤子解構出了 state 與 setState 方法。
• state 的默認值，直接經過 useState 傳入
• 更新 state 再也不使用 setState 方法。

若是有多個 state 怎麼定義呢？

const [count, setCount] = useState(0);
const [name, setName] = useState(null);

在線示例
推薦閱讀《React 手稿》