昨天 Day 14 跟大家介绍了 React Hooks 的基本概念之後,今天就要马上带大家来看第一个 Hook 函式: useState()
的用法罗~
useState()
又称作 State Hook ,实现能够在 Function 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
的话,要怎麽撰写呢?
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)
第二十四天 各位点进来的朋友,你们好阿 小的不才只能做这个系列的文章,但还是希望分享给点进来的朋友,...
缘由: 开发时或多或少会遇到因某个条件地达成,需要显示或隐藏画面中的另一个条件,若是区块在最底部,直...
: 听说你ARM很厉害 你怎麽学习的? 学习? 每天伏地挺身100下就好了阿 : ??? 在进入正题...
大家好,这里是 A Fei,今天是铁人赛开赛第二天,也是连假开始前的小周末,在这先祝各位读者中秋佳节...
Visual Studio Code(简称VS Code) 由微软开发,并且支援Windows、Li...