[ Day 15 ] React Hooks 中的 useState

https://ithelp.ithome.com.tw/upload/images/20210926/201341532CtSg2DKIk.png
昨天 Day 14 跟大家介绍了 React Hooks 的基本概念之後,今天就要马上带大家来看第一个 Hook 函式: useState() 的用法罗~


useState()

又称作 State Hook ,实现能够在 Function Component 中使用 State 状态的一个方法。

我们直接来看下面这个官网范例,帮助大家快速了解这个方法的应用吧!

Class Component 中操作 State

// 在 Class Component <Example> 中撰写 state,当按钮被点击时 count 值 +1
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

在 Class Component 中,我们可以直接在 this.state 给予一个物件的值 { count: 0 } 去做状态的初始化,并在 render() 函式中监听点击事件,当按钮被点击时触发 setState() 方法来改变 this.state 当中的 count 值 +1 。

那如果使用 setState() 这个 Hook Function 的话,要怎麽撰写呢?

Function Component 中操作 State

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
}

在 Function Component 中我们要操作 state 的话要记得先引用该方法,另外必须采用 JavaScript ES6 解构赋值的方式来宣告两个变数,第一个变数 count 等同於 Class Component 中 this.state 里的变数名称,而第二个变数则是等同於 Class Component 中 setState() 这个函式的名称。

备注:第二个变数的名称通常都会采用 set + state变数 这个组合,所以在这边才会将该函式命名为 setCount

而在 useState() 中的参数 0 就是初始化值的设定,所以我们可以把上段程序码理解成:我们宣告了一个叫做 count 的 state 变数,并将起始值设成了 0。而当我们需要更新目前的 count 值时,我们可以呼叫 setCount 这个方法

所以同样操作 State 但是改写成 Function Component 的话,就会变成这样的结果:

// 原本 Class Component Example 中的 state 值写法
<p>You clicked {this.state.count} times</p>
// 改写成 Function Component 的 Example 其 state 值
<p>You clicked { count } times </p>

而在 render() 中的写法也改成下面的程序码:

// 原本 Class Component redner() 中 return 的 state 值变更的写法
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
</button>
// 改写成 Function Component 後 redner() 中 return 的 state 值变更的写法
<button onClick={() => setCount(count + 1)}>
    Click me
</button>

这样比较两个不同元件的撰写方式之後有没有发现 Function Component 搭配 React Hooks 的写法确实比原本的 Class Component 简洁明了非常多!
useState() 这个方法就可以很明显的感受到 React Hooks 让人喜爱的地方了欸~


那今天为大家介绍的第一个 React Hooks : useState() 就到这边告一个段落罗~
明天要介绍的是第二个 React Hooks : useEffect() ,敬请期待!
我们下篇见ʘ‿ʘ


<<:  架站:Wordpress apps + DDNS+SSL+Port Forward

>>:  [第15天]理财达人Mx. Ada-持仓部位(库存)(positions)

Fortran 语言和你 SAY HELLO!!

第二十四天 各位点进来的朋友,你们好阿 小的不才只能做这个系列的文章,但还是希望分享给点进来的朋友,...

隐藏&显示画面中间的某区块

缘由: 开发时或多或少会遇到因某个条件地达成,需要显示或隐藏画面中的另一个条件,若是区块在最底部,直...

第0砍 - 虚张声势

: 听说你ARM很厉害 你怎麽学习的? 学习? 每天伏地挺身100下就好了阿 : ??? 在进入正题...

吾即是汝,汝即是吾,Ruby 30 天刷题修行篇第二话

大家好,这里是 A Fei,今天是铁人赛开赛第二天,也是连假开始前的小周末,在这先祝各位读者中秋佳节...

Day2 Visual Studio Code 功能简易说明

Visual Studio Code(简称VS Code) 由微软开发,并且支援Windows、Li...