20. React Hooks 想改善的问题 ( + 简单实作 useState)

( 今天的文章要写React的相关问题，完全没有写过React的人，建议从中文官方文件开始练习。)

React与其他JS框架有个很大的特色，
就是将会重复使用的程序码包装成元件(Component)，以便往後专案的维护。

以往React的元件都常都会写成class的形式，
在React 16.8後以後(2021/3 更新至 v17.0.2)，增加了React Hooks的功能。

React Hooks

Hook 是对 React 概念：props、state、context、refs 以及 lifecycle，提供了一个更直接的 API。

以往撰写成Class的形式，有一些实作上的缺陷，而Hook的功能带来了一些改善:

1. 更方便重复使用Stateful的逻辑

过去React没有办法把可重用的行为「附加(attach)」到一个元件上，
每当需要使用Stateful的逻辑，都必须重新去建构元件，
且如果是被包裹成非常多层的元件，会更不方便进行重构。

Hook 能在不改变 component 阶层的情况下重用 stateful 的逻辑。(也就是後文示范的useState)

2. 使元件逻辑更易於理解

基於原先React元件依照lifecycle方法进行拆分，
不相关的逻辑可能会被强迫放在同一个生命周期里。
也基於stateful逻辑不能重复使用的关系，原来的元件架构会更复杂，
使用State函式库集中管理可能也不够直观。

Hook 能把一个 component 拆分成更小的 function，让元件之间的逻辑关系更清晰。

3. Hook 不依赖 class 就能使用更多 React 的功能。

使用class写法必须多加注意this的指向，或是绑定(bind)event handler。
虽然基础好的人可能没有这些困扰QQ。但考虑到React在概念上比起Class，其实更接近Function，
官方还是提供了Hook这种更便於学习和使用的形式。

useState

以React Hooks中的State Hook为例，Hook本身是指函式(function)，
useState用於在每次输入、资料更动时，重新渲染画面。

基本语法:

 const [input, setValue] = useState("");

input是一个变数，而setValue是一个函式，
useState("")里的(小括号)会是input的初始值，范例的初始值为空""

而如果要使用State Hook，必须先从modules引入useState

import React, { useState } from 'react';

这里借用codepen的useState模板进行解说(撷取重点程序码)，

先尝试帮input设值:

import React, { useState } from 'react';

const App = () => {

const [input, setValue] = useState("");  // input初始值为空

 handleInput = (event) => {
    setValue(event.target.value);  // 设值的方法，可以想成input = event.target.value;
  }
  
  return(
  ...
  <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
  // value设为input，每次输入值改变(onChange)就执行handleInput函式。
  )
  
  ReactDOM.render(<App />,
document.getElementById("root"))

到这里，可以确认每次State跟着input改变。

然後继续执行渲染:

const App = () => {
  
  const [input, setValue] = useState("");
  const [name, setName] = useState('User');  // name的初始值为'User'
  
  handleInput = (event) => {
    setValue(event.target.value);
  }
  
  updateName = (event) => { 
    event.preventDefault();
    setName(input);  // name = input
    setValue("");  // input = "", 将输入框设为空
  }
  
 return(
      ...
      <h1>
        Hello, <span>{name}!</span>   //显示name的值
      </h1>
      ...    
      <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
      ...
      <button onClick={updateName} class="button is-dark">Save</button>
      // 每次按按钮(onClick)执行updateName()
      ...
  )
  
  ReactDOM.render(<App />,
document.getElementById("root"))

到这里可以完成一个输入到渲染画面的简易输入框!

Codepen完整范例程序码

提问

• 用过 React Hooks 吗？它要解决什麽问题？

1. Hook 能在不改变 component 阶层的情况下重用 stateful 的逻辑。
2. 依照lifecycle方法进行拆分的程序码，逻辑容易混乱。Hook 能把一个元件拆分成更小的 function，因此能依照逻辑关系建构元件，使程序码更易读。
3. class不便於理解和学习，Hook 不依赖 class 就能使用更多 React 的功能。

【如内文有误还请不吝指教>< 并感谢阅览至此的各位:D 】

参考资料
-介绍 Hook

---正文结束---