Learning React.js Note 4 - React State with Hooks

Understanding array destructuring

数组解构

解构和展开：
https://www.tslang.cn/docs/handbook/variable-declarations.html

this array destructuring is going to take in these values by position
这个数组解构将按位置接收这些值

const [test] = ["popcorn", "pretzels", "pineapple"];
console.log(test); // popcorn 爆米花

const [a, b, c] = ["popcorn", "pretzels", "pineapple"];
console.log(a); // popcorn 爆米花
console.log(c); // pipeapple 凤梨

pretzels 椒盐脆饼

// 前面加2个逗号commas，直接取最后一个值 (前面有几个值就加几个逗号)
const [, , c] = ["popcorn", "pretzels", "pineapple"];
console.log(c); // pineapple

Using useState

import React, { useState } from "react"; // import {useState}
import ReactDOM from "react-dom";
import "./index.css";

function App() {
  const [status, setStatus] = useState("open"); // 第1个值返回当前状态，第2个值是改变状态的函数
  return (
    <>
      <h2>Status: {status}</h2>
      <button onClick={() => setStatus("open")}>Open</button>
      <button onClick={() => setStatus("Back in 5")}>Break</button>
      <button onClick={() => setStatus("closed")}>Closed</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

how to incorporate合并 state values
如何合并状态值

So just to recap here所以在这里简单回顾一下,

a hook is a function that allows you to add some functionality to the component. And useState is a built-in 内置的 hook that we can use to handle state changes in our application.

Remember that the first value that is returned from the useState function inside of this array destructuring is the state value.
And then the second value is a function that we can use to change that state value.

Using multiple state variables

function App() {
  const [year, setYear] = useState(2050);
  const [status, setStatus] = useState("open");
  const [manager, setManager] = useState("Alex");
  return (
    <>
      <div>
        Year:{year}
        <button onClick={() => setYear(year + 1)}>Set Year</button>
      </div>
      <div>
        Mangaer on Duty: {manager}
        <button onClick={() => setManager("Rachel")}>New Manager</button>
      </div>
      <div>
        <h2>Status: {status}</h2>
        <button onClick={() => setStatus("open")}>Open</button>
        <button onClick={() => setStatus("Back in 5")}>Break</button>
        <button onClick={() => setStatus("closed")}>Closed</button>
      </div>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Working with useEffect

import React, { useState, useEffect } from "react"; // import {useEffect}
import ReactDOM from "react-dom";
import "./index.css";

function CheckBox() {
  const [checked, setChecked] = useState(false);
  //alert(checked);
  useEffect(() => {
    alert(checked);
  });

  return (
    <>
      <form>
        <input
          type="checkbox"
          value={checked}
          onChange={() => setChecked((checked) => !checked)}
        />
      </form>
      {checked ? "checked" : "not checked"}
    </>
  );
}

ReactDOM.render(<CheckBox />, document.getElementById("root"));

The things that we want the component to do other than return UI are called effects.
除了返回 UI 之外，我们希望组件做的事情称为效果。

So an alert, a console log, any sort of interaction with the browser or a native API is not part of the render.
It’s not part of the return. So we can use effect hooks