[FE302] React 基礎 - hooks 版本：state


Posted by s103071049 on 2021-09-06

初探 state

畫面永遠由 state 產生，UI 只是 state 的 mapping。ie UI = f(state)，只要關注畫面長甚麼樣子就可以了。

使用 state 的方式

  1. import React from 'react'
  2. React.useState() 會回傳一個陣列，透過解構語法使我們不用 renaming
function useState() {
  return [123, 456]
}
const [a, b] = useState()

// 通常會用解構的寫法表示 
import {useState} from 'react'
const [todos, setTodos] = useState([
    123, 456, 555 // todos 的初始值
  ])

useState is a hook，透過這樣的方式在 function component 裡面使用 state。

function App() {
  const [counter, setCounter] = React.useState(0) // 初始值是 0
  const handleButtonClick = () => {
    setCounter(counter + 1)
  } 
  return (
    <div className="App">
      counter: {counter}
      <button onClick={handleButtonClick}>increment</button>
      <TodoItem content={21}/>
      <BlackTodoItem content={212} size="XL" />
    </div>
  );
}

React 裡面有個動作是 render，意思是他執行 app 這個 function， react 會將 return 的東西放到畫面上，放到畫面上這個動作是 mount，就是把東西放到 dom 上去。mount 完後再更新 state，他就會 re-render，re-render 就是再呼叫一次 app 這個 function 的意思。

加上 console 看得更清楚

function App() {
  const [counter, setCounter] = React.useState(0) // 初始值是 0
  console.log('render', counter)
  const handleButtonClick = () => {
    console.log('button click')
    setCounter(counter + 1)
  } 
  return (
    <div className="App">
      counter: {counter}
      <button onClick={handleButtonClick}>increment</button>
      <TodoItem content={21}/>
      <BlackTodoItem content={212} size="XL" />
    </div>
  );
}

jsx 裡沒有迴圈，所以只能透過 functional 的方式做，

render 一系列資料：透過 map 的方式將 array 裡的每個東西都 map 成一個 component，他就會變成很多 component 的意思。

兩個寫法等價

  const [todos, setTodos] = React.useState([
    123, 456, 555
  ])

  {// render 多個 component 可以傳陣列
    [<TodoItem content={21}/>, <TodoItem content={212}/>]
  }

  {　
    todos.map(todo => <TodoItem content={todo} />)
  }

console 出現錯誤訊息 : Warning: Each child in a list should have a unique "key" prop.

render 一個陣列要幫他加上一個 key，key 會幫 react 辨別他是哪一個 item。一般來說不推薦用 index 當 key，但我們暫時先用 index 當 key。

  {
    todos.map((todo, index) => <TodoItem key={index} content={todo} />)
  }

注意一：改 state 要用 setter 的方式改，不是用 push 方式亂改。

注意二：因為 .push 會改變原本的 todos，所以 todos.push(123) 後我的 todos 變成 [123, 456, 555, 123]，而 setTodos(todos) 的 todos 也是 [123, 456, 555, 123]，當 react 判定舊的 state 與新的 state 一樣，他就部會做事情。因為更新成一樣的 state 就等於不更新。

  const [todos, setTodos] = React.useState([
    123, 456, 555
  ]) 
  const handleButtonClick = () => {
    todos.push(123)
    setTodos(todos) // 裡面傳新的 todos 
  }

state is immutable in react，所以對於新增來說你會用解構語法這麼寫

前面是將 todos 的值複製過來，後面是新增的東西。

  const handleButtonClick = () => {
    setTodos([...todos,  Math.random()]) // 裡面傳新的 todos 
  }

總結

  1. 用 useState 後面傳狀態的初始值。使用前需要先 import {useState} from 'react'。
  2. useState 會回給你一個陣列，第一個參數是 state 的值、第二個參數是 setter function 透過他去 set 你的 state
  3. 改變 state 時 call setter function，裡面傳新的 state。
  4. react state is immutable，也就是 state 基本上不變，不變指的是不能直接改他，ex：todos[1] = 100。所以要改 state 時要產生出一個新的 state 出來，怎麼產生會用一些慣用的 pattern。

再探 state 之新增 todo

jsx 裡面沒有內容一定要加上 slash，< />

加上 todo 功能

function App() {
  const [todos, setTodos] = useState([
    123, 456, 555
  ]) // 初始值是 0
  const handleButtonClick = () => {
    setTodos([...todos, Math.random()]) // 裡面傳新的 todos 
  } 
  return (
    <div className="App">
      <input type="text" placeholder="todo"/>
      <button onClick={handleButtonClick}>Add todo</button>
      {
        todos.map((todo, index) => <TodoItem key={index} content={todo} />)
      }
    </div>
  );
}

react component 有兩種類型，以有無被 react 控制進行劃分。

一、controller component
二、uncontrollered component

一、controller component

在 react 裡面幾乎所有會動的東西都有它的狀態，當我在畫面上打字時，打的字也會在 react 的 state 裡。所以這個東西也要我自己進行控制。

  1. const [value, setValue] = useState('')
  2. 將 input 的值跟 state 做掛勾 <input type="text" placeholder="todo" value={value}/>
  3. 不管怎麼打字，畫面都不會變，因為我的 state 沒有改變。可以在 input 上聽一個 onChange 事件，命名慣例會用 handle 開頭，<input type="text" placeholder="todo" value={value} onChange={handleInputChange}/>
  const handleInputChange = (e) => {
    console.log(e.target.value) // 會將打的字的值給印出來，所以
    setValue(e.target.value)
  }

成功地順利打字!!可喜可賀 ~

  1. 第一次 render 時，value 是空字串
  2. 當我按 a 他觸發 handleInputChange 這個事件，他的 e.target.value 是 a 所以 setValue(e.target.value) === setValue(a)，我的 value 就是 a
  3. state 改變就會重新 render，所以 re-render 的時候 input 的 value 變成 a
  4. 當我再打 b，setValue(e.target.value) === setValue(ab)，所以 const [value, setValue] 的 value 就是 ab
  5. state 改變就會重新 render，所以 re-render 的時候 input 的 value 變成 ab，<input type="text" placeholder="todo" value={ab} onChange={handleInputChange}/>

透過這樣的操作，就可以將 input 的 state 的值給放到 state 裡面去。這是方法一、controller component，我的value 是有放在 state 裡面

二、uncontrollered component

  1. <input type="text" placeholder="todo"/>
  2. 拿到 input value 的方式：一、使用 className，透過 document.querySelector('.input-todo').value 拿值；二、透過 ref 存取 input dom 的元素，需要 import ref 的 hook：import {useState, useRef} from 'react'，<input ref={inputRef} className="input-todo" type="text" placeholder="todo"/>
const inputRef = useRef()
const handleButtonClick = () => {
console.log(inputRef) // inputRef 是 obj 會有 current 這個 key
console.log(inputRef.current) // 他的 dom 元素
console.log(inputRef.current.value) // 輸入的東西
setTodos([...todos, Math.random()])
}

小結

input 的值有放到 state 裡面就是 controlled，沒有就是 uncontrolled
參考：官方文件 forms 裡面 controlled components，官方文件都是提供 class component 的用法，但可以透過 google 關鍵字 controlled components hooks / function components

controlled components 的方式完成新增 todo-list

import './App.css';
import styled from 'styled-components'
import {useState} from 'react'
import TodoItem from './TodoItem';

function App() {
  const [todos, setTodos] = useState([
    123
  ]) // 初始值是 0
  const [value, setValue] = useState('')
  const handleButtonClick = () => {
    setTodos([value, ...todos])
    setValue('') // 將 todo 清空
  }
  const handleInputChange = (e) => {
    setValue(e.target.value)
  }
  return (
    <div className="App">
      <input type="text" placeholder="todo" value={value} onChange={handleInputChange}/>
      <button onClick={handleButtonClick}>Add todo</button>
      {
        todos.map((todo, index) => <TodoItem key={index} content={todo} />)
      }
    </div>
  );
}
export default App;

刪除、編輯有 todo 的 id 會比較好做事。此外也要儲存 todo 的其他狀態，

現在加上 id 的功能

import './App.css';
import styled from 'styled-components'
import {useState} from 'react'
import TodoItem from './TodoItem';
let id = 2 // 每次 render 都會重新呼叫 App 所以 id 要放外面
function App() {
  const [todos, setTodos] = useState([
    {id: 1, content: 'abc'}
  ])
  const [value, setValue] = useState('')
  const handleButtonClick = () => {
    setTodos([{
      id, content: value
    }, ...todos])
    setValue('') // 將 todo 清空
    id ++
  }
  const handleInputChange = (e) => {
    setValue(e.target.value)
  }
  return (
    <div className="App">
      <input type="text" placeholder="todo" value={value} onChange={handleInputChange}/>
      <button onClick={handleButtonClick}>Add todo</button>
      {
        todos.map((todo) => <TodoItem key={todo.id} content={todo.content} />)
      }
    </div>
  );
}
export default App;

將 id 用 useState 的方式表達也可以。但因為 id 沒有在畫面上出現，所以 id 改變不用重新渲染。react 的原則是 state 改變就會重新渲染，所以我們會不希望存成 state。

function App() {
  const [todos, setTodos] = useState([
    {id: 1, content: 'abc'}
  ])
  const [value, setValue] = useState('')
  const [id, SetId] = useState(2)
  const handleButtonClick = () => {
    setTodos([{
      id, content: value
    }, ...todos])
    setValue('') // 將 todo 清空
    //id ++
    SetId(id + 1)
  }

我們也可以用 userRef 的方式寫，const id = useRef(2) // 他的初始值，useRef 比較神奇的點在為了讓值給以保存，在 component re-render 不會變，除了可以當 state 用也可以直接操作，他會維持原本的東西。使用 useRef 他會回傳一個物件，裡面的 current 值是你設定的初始值。

之所以會有 current 是因為物件指向的問題，

function App() {
  const [todos, setTodos] = useState([
    {id: 1, content: 'abc'}
  ])
  const [value, setValue] = useState('')
  const id = useRef(2) // 他的初始值
  const handleButtonClick = () => {
    setTodos([{
      id: id.current, 
      content: value
    }, ...todos])
    setValue('') // 將 todo 清空
    //id ++
    id.current ++
  }
  下面略

為了確定有無成功，可以這麼做，todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)，將整個 todo 傳到 TodoItem，

function TodoItem ({className, size, todo}) {
  return (
    <div className="App">
      <TodoItemWrapper className={className} data-todo-id={todo.id}>
        <TodoContent size={size}>{todo.content}</TodoContent>
        <TodoButtonWrapper>
          <Button>completed</Button>
          <GreenButton>deleted</GreenButton>
        </TodoButtonWrapper>
      </TodoItemWrapper>
    </div>
  )
}

react 裡面使用表單相關，就要處理事件，

加上刪除 todo

App 是父親它 render TodoItem 小孩，所以我要怎麼在 TodoItem 改到 App ?

把這個 function 當作 props 傳給 TodoItem。將要做事情的 function 寫在 parent 然後傳給 child，child 再呼叫這個 function 就可以在 parent 這邊處理這個資訊。

// TodoItem
function TodoItem ({className, size, todo, handleDeleteTodo}) {
  return (
    <div className="App">
      <TodoItemWrapper className={className} data-todo-id={todo.id}>
        <TodoContent size={size}>{todo.content}</TodoContent>
        <TodoButtonWrapper>
          <Button>completed</Button>
          <GreenButton onClick= {() => {
            handleDeleteTodo(todo.id)
          }}>deleted</GreenButton>
        </TodoButtonWrapper>
      </TodoItemWrapper>
    </div>
  )
}

刪除不會改原本的陣列，會產生新的陣列。用 filter

// App
上略
  const handleDeleteTodo = id => {
    setTodos(todos.filter(todo => todo.id !== id)) // todo.id 不等於要刪除的 id 就會留下來
  }
  return (
    <div className="App">
      <input type="text" placeholder="todo" value={value} onChange={handleInputChange}/>
      <button onClick={handleButtonClick}>Add todo</button>
      {
        todos.map((todo) => <TodoItem key={todo.id} todo={todo} handleDeleteTodo={handleDeleteTodo}/>)
      }
    </div>
  );
}

加上編輯 todo 功能

先檢視資料結構：現在只有 id, content

  const [todos, setTodos] = useState([
    {id: 1, content: 'abc'}
  ])

再加上 isDone，然後我們先調整介面

function App() {
  const [todos, setTodos] = useState([
    {id: 1, content: 'done', isDone: true},
    {id:2, content: 'not done', isDone: false}
  ])
  const [value, setValue] = useState('')
  const id = useRef(3) // 他的初始值

對 TodoItem 來說如果已完成他的 isDone 是 true，這時就要顯示未完成，反之 fase 已完成。

jsx 沒有 if-else，所以可以用短路或三元運算子去寫。然後加上刪除線的功能。

傳進去的 props 除了會給 styled-component 外，也會架在 dom 上去，傳的變數前面加上 $ 字號，她就不會被傳到 dom 上去。參考：transient props

const TodoContent = styled.div`
  color: ${props => props.theme.colors.red_300};
  font-size: 24px;
  ${props => props.size === 'XL' && `font-size: 20px;`};
  ${props => props.$isDone && `text-decoration: line-through`}
`
        <TodoContent $isDone={todo.isDone} size={size}>{todo.content}</TodoContent>
        <TodoButtonWrapper>
          <Button>
            {todo.isDone ? '未完成' : '已完成'}
          </Button>

處理 mark 的部份，用 map
基本上新增用解構的語法、刪除用 filter、修改用 map ，這是固定用法

// App
  const hadnleToggleIsDone = id => {
    setTodos(todos.map(todo => {
      if (todo.id !== id) return todo // 這個 id 不是我要修改的 id 我就將原本的 todo 回傳
      return {
        ...todo, // todo 原本的東西
        isDone: !todo.isDone // 我要修改的屬性
      }
    }))
  }
  return (
    <div className="App">
      <input type="text" placeholder="todo" value={value} onChange={handleInputChange}/>
      <button onClick={handleButtonClick}>Add todo</button>
      {
        todos.map((todo) => <TodoItem key={todo.id} todo={todo} handleDeleteTodo={handleDeleteTodo} hadnleToggleIsDone={hadnleToggleIsDone}/>)
      }
    </div>
  );

將它拆出來，可讀性會比 inline function 高很多。

function TodoItem ({className, size, todo, handleDeleteTodo, hadnleToggleIsDone}) {
  const handleToggleClick = () => {
    hadnleToggleIsDone(todo.id)
  }
  return (
    <div className="App">
      <TodoItemWrapper className={className} data-todo-id={todo.id}>
        <TodoContent $isDone={todo.isDone} size={size}>{todo.content}</TodoContent>
        <TodoButtonWrapper>
          <Button onClick={handleToggleClick}>
            {todo.isDone ? '未完成' : '已完成'}
          </Button>
          <GreenButton onClick= {() => {
            handleDeleteTodo(todo.id)
          }}>deleted</GreenButton>
        </TodoButtonWrapper>
      </TodoItemWrapper>
    </div>
  )
}

todo list 中場總結

  1. Component (類似切版)
  2. Props (Component 可以傳自訂的 Props 進去，像是自訂的 html 元素，就可以在子層接收到這些東西)
  3. Style (css / inline-style / styled-component 寫法)
  4. Event Handler (加上 onClick / onSubmit / onMouseDown)
  5. JSX (render 簡單的 component、傳 js 用 { } 沒有迴圈跟 if-else，所以要用短路跟三元運算子寫、render 一系列 list 會用 map 變成陣列，只是 render 陣列要提供 key)
  6. State (用 useState 放初始值、用 setState 改變 state、immutable 的概念)

新增時會用一個新的陣列
刪除用 filter 產生新的陣列
編輯用 map 產生新的陣列



s103071049




Related Posts

每日心得筆記 2020-06-24(三)

每日心得筆記 2020-06-24(三)

 半夏
用 DDS 開發 ROS 2.0

用 DDS 開發 ROS 2.0

 Po-Jen
Meet 創業小聚 2020.10.21

Meet 創業小聚 2020.10.21

 JingTeng

Comments