[Day14] 学 Reactstrap 就离 React 不远了 ～ 用 Navbar 认识 useState

前言

今天真的要进入 useState 了!!!!!
进入今天文章前请看一下昨日文章，
里面有写到关於 Navbar 的架构介绍，
今天就不会再讲到这部份~

本日正文

觉得程序码可能还是要再贴一遍，
不然直接看今天这篇的人可能会不知道我下面在说什麽XD

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default function App() {
  const [collapsed, setCollapsed] = useState(true);
  const toggleNavbar = () => setCollapsed(!collapsed);
  
  return (
    <div className="px-2">
      <Navbar light expand="md">
        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/alerts/">关於我</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/navbar/">与我联系</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

接下来要更进一步说明了，

<Collapse isOpen={!collapsed}>

先从 <Collapse> 的 isOpen 说明，
isOpen 意思是何时要打开 <Collapse> 里面的内容，
而它的设定是 {!collapsed}，
collapsed 又是什麽，让我们往上看，
会发现有 const [collapsed, setCollapsed] = useState(true); 这样的设定，
我记得我一开始看到这个完全问号XDDDDDDDDDD
就算看了官方文件还是雾煞煞QAQ

这边我用我理解的方式简单说明一下，
(PS. 不一定贴近真正 React 的意思，但觉得这样的理解方式可能比较好入门)

const [collapsed, setCollapsed] = useState(true);

是指宣告一个变数 collapsed，setCollapsed 是改变 collapsed 值的方式。

而为什麽要这样，
const 的宣告方式是不能改变变数的值对吧？
假设我现在写这两行 code：

const test = 1;
test = 2;

就会出现以下 error：

TypeError: Assignment to constant variable

然後再拿这个 error 去查询可以找到对於这个错误的说明：

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment

由以上得知用 const 宣告的变数是 read-only，且不可被改变的(cannot be reassigned)，
但你还是想改变它的时候该怎麽办？
在 React 提供了 useState 的方式，
让你还是可以去改变用 const 宣告变数的值。
在这里可以把 setXXX 看成是一个 useState 的 function
setXXX 的 XXX 是可以自订的，但为了维护跟程序易读性，
通常 XXX 会放变数的名称(搭配第一字大写)，
因此 const [collapsed, setCollapsed]
的意思是有一个用 const 宣告的变数 collapsed，
改变 collapsed 值的 function 是 setCollapsed，
而 setCollapsed 做的事就是用 useState 去改变值。

const [collapsed, setCollapsed] = useState(true);
那这整句话又是什麽意思？
当一个变数宣告了总是要给它初始值吧，
所以这边意思是 collapsed 初始值被宣告为 true。

我觉得拿 JavaScript 的写法来翻译有点像是这样：
(PS. 以下程序是不正确的，只是想要翻译成刚开始接触 React 的人比较看得懂的样子)

const collapsed;
setCollapsed(true);

funtion setCollapsed (value) {
	collapsed = useState(value);
}

所以如果之後我要改变 collapsed 的值，
我只能透过 setCollapsed，
例如 setCollapsed(false)，
collapsed 的值就会被改为 false 这样。

有这样的基础後，我们就可以再往上看这句了，

<NavbarToggler onClick={toggleNavbar} className="mr-2" />

onClick 顾名思义就是指当 <NavbarToggler> 被点击时要做什麽动作，
跟我们之前在 HTML 写 onclick="myFunction()" 是相似的。

所以这边的意思就是当 <NavbarToggler> 被点击时要执行 toggleNavbar，
toggleNavbar 又是什麽？再往上看会看到这句：

const toggleNavbar = () => setCollapsed(!collapsed);

这个意思是 toggleNavbar 是一个 function，
要执行 setCollapsed，且要以 collapsed 的相反值去执行(!collapsed)。

所以当目前是折叠状态 collapsed 为true，
<NavbarToggler> (menu icon) 被点击时，就会变为 false，(将选单展开的状态)
反之则又变为 true。

这边我们回过头看 toggle 的意思，
就是(轮流)切换的意思，
通常看到元件是 toggle，
代表它的状态会在启用、关闭中切换，
所以 toggleNavbar 会设置成 !collapsed 就不难理解了。

然後今天虽然都在翻译程序(?
但还是附一下今日连结(其实跟昨天是同一个) → Day13.14 - Reactstrap (Navbar)

也许从 React 开始接触的人看这边会觉得很直觉，
但我是从 Reactstrap 反过来接触到 React 的，
而且在这之前只有接触 HTML/CSS, JavaScript 的写法，
所以一开始我也只能自己多改程序测测看，
然後才慢慢了解它的用法。

希望我这样的解释方式可以让从写 HTML/CSS, JavaScript 跳到 React 的人比较看得懂orz
(如果有错请多多见谅QQ)

一直到现在我也不敢说我真的会 React 了，
我算是用自己理解的方式在写就是了XD

不过学语言好像就是如此，
要先从模仿开始，
无论是学外语或是程序语言都一样，
在还不了解文法跟单字的时候，
就是先模仿，多试多学多讲多用，
久了就会知道怎麽用了。

後记

今天终於来到第二周结束！
但明天开始的文章我又没梗了orz
关关难过关关过，
希望我能完赛orz