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 钩子解构出了 statesetState 方法。
  • state 的默认值,直接通过 useState 传入
  • 更新 state 不再使用 setState 方法。

如果有多个 state 怎么定义呢?

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

在线示例
推荐阅读《React 手稿》

阅读 1.4k

React 手稿
记录个人在工作和学习中积累的React知识点。

React 第一本手稿级的文档。

5.9k 声望
9.9k 粉丝
0 条评论

React 第一本手稿级的文档。

5.9k 声望
9.9k 粉丝
文章目录
宣传栏