摘要：示例使用顯示隱藏組件這個(gè)示例是一個(gè)組件，它顯示一些文本，并在末尾顯示一個(gè)鏈接，當(dāng)單擊鏈接時(shí)，它展開(kāi)剩下的文本。還有一個(gè)處理提交的函數(shù)，其中，來(lái)阻止頁(yè)面刷新并打印出表單值。它使用傳遞一個(gè)對(duì)象，為了確保現(xiàn)有的狀態(tài)不被覆蓋，這里使用了展開(kāi)運(yùn)算。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

到 React 16.8 目前為止，如果編寫(xiě)函數(shù)組件，然后遇到需要添加狀態(tài)的情況，咱們就必須將組件轉(zhuǎn)換為類組件。

編寫(xiě) class Thing extends React.Component，將函數(shù)體復(fù)制到render()方法中，修復(fù)縮進(jìn)，最后添加需要的狀態(tài)。

今天，可以使用 Hook 獲得相同的功能，并為自己節(jié)省了工作時(shí)間。在本文中，主要介紹useState hook。

useState hook 允許咱們向函數(shù)組件添加狀態(tài)，我們通常稱這些為“ hooks”，但它們實(shí)際上是函數(shù)，與 React 16.8 捆綁在一起。 通過(guò)在函數(shù)組件中調(diào)用useState，就會(huì)創(chuàng)建一個(gè)多帶帶的狀態(tài)。

在類組件中，state 總是一個(gè)對(duì)象，可以在該對(duì)象上添加保存屬性。

對(duì)于 hooks，state 不必是對(duì)象，它可以是你想要的任何類型-數(shù)組、數(shù)字、布爾值、字符串等等。每次調(diào)用useState都會(huì)創(chuàng)建一個(gè)state塊，其中包含一個(gè)值。

這個(gè)示例是一個(gè)組件，它顯示一些文本，并在末尾顯示一個(gè)read more鏈接，當(dāng)單擊鏈接時(shí)，它展開(kāi)剩下的文本。

import React, { useState } from "react";
import ReactDOM from "react-dom";

// 兩個(gè) props:
//   text - 顯示的內(nèi)容
//   maxLength - 在點(diǎn)擊“read more”之前顯示多少個(gè)字符
function LessText({ text, maxLength }) {
  // 創(chuàng)建一個(gè)狀態(tài)，并將其初始化為“true”
  const [hidden, setHidden] = useState(true);


  if (text <= maxLength) {
    return {text};
  }

  return (
    
      {hidden ? `${text.substr(0, maxLength).trim()} ...` : text}
      {hidden ? (
         setHidden(false)}> read more
      ) : (
         setHidden(true)}> read less
      )}
    
  );
}

ReactDOM.render(
  ,
  document.querySelector("#root")
);

僅用一行代碼，我們就使這個(gè)函數(shù)組件有狀態(tài)：

const [hidden, setHidden] = useState(true);

但是這個(gè)函數(shù)到底在做什么呢?如果每次渲染都調(diào)用它(確實(shí)如此)，它又是如何保留狀態(tài)的。

這里的“神奇”之處是，React在每個(gè)組件的幕后維護(hù)一個(gè)對(duì)象，并且在這個(gè)持久對(duì)象中，有一個(gè)“狀態(tài)單元”數(shù)組。當(dāng)你調(diào)用useState時(shí)，React將該狀態(tài)存儲(chǔ)在下一個(gè)可用的單元格中，并遞增數(shù)組索引。

假設(shè)你的 hooks 總是以相同的順序調(diào)用(如果遵循 hooks 的規(guī)則，它們將是相同的順序)，React能夠查找特定useState調(diào)用的前一個(gè)值。對(duì)useState的第一個(gè)調(diào)用存儲(chǔ)在第一個(gè)數(shù)組元素中，第二個(gè)調(diào)用存儲(chǔ)在第二個(gè)元素中，依此類推。

這也不是很神奇的事情，主要它依賴于你可能沒(méi)有想過(guò)的事實(shí)：咱們寫(xiě)的的組件是由React調(diào)用 ，所以它可以在調(diào)用組件之前事先做好一些工作。 而且，渲染組件的行為不僅僅是函數(shù)調(diào)用。 像這樣的JSX被編譯為React.createElement（Thing） - 顯然 React 可以控制它的調(diào)用方式和時(shí)間。

看看另一個(gè)例子：根據(jù)前一個(gè)值更新state的值。

咱們要造個(gè)計(jì)步器，每點(diǎn)擊一次按鈕，就計(jì)一次，點(diǎn)擊完后，它會(huì)告訴你你走了多少步。

import React, { useState } from "react";

function StepTracker() {
  const [steps, setSteps] = useState(0);

  function increment() {
    setSteps(steps => steps + 1);
  }

  return (
    

      總共走了 {steps} 步!
      

      
        點(diǎn)點(diǎn)我，步數(shù)不是個(gè)事！
      
    
  );
}

ReactDOM.render(
  ,
  document.querySelector("#root")
);

首先，通過(guò)調(diào)用useState創(chuàng)建一個(gè)新的state，并將其初始化為0。它返回steps的當(dāng)前值0和setSteps函數(shù)來(lái)更新 steps，用 increment函數(shù)來(lái)對(duì)steps進(jìn)行增 1 操作。

這里還可以優(yōu)化的提取increment函數(shù)，可以直接將 increment 函數(shù)里面的內(nèi)聯(lián)到 onClick 里面：

 setSteps(steps => steps + 1)}>
  I took another step

記住，state可以保存任何你想要的值。下面是一個(gè)隨機(jī)數(shù)列表的例子，單擊按鈕將向列表添加一個(gè)新的隨機(jī)數(shù)：

function RandomList() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.random() * 100
      }
    ]);
  };

  return (
    <>
      Add a number
      

        {items.map(item => (
          
{item.value}
        ))}
      
    
  );
}

注意，我們state初始化為空數(shù)組[]，并在addItem函數(shù)中更新值。

setItems 更新 state 不會(huì)將舊值“合并” - 它會(huì)使用新值覆蓋state。 這與this.setState在類中的工作方式不同。

再來(lái)看看，state為對(duì)象的例子，創(chuàng)建一個(gè)包含2個(gè)字段的登錄表單：username 和password。

下面示例主要展示如何在一個(gè)state對(duì)象中存儲(chǔ)多個(gè)值，以及如何更新單個(gè)值。

function LoginForm() {
  const [form, setValues] = useState({
    username: "",
    password: ""
  });

  const printValues = e => {
    e.preventDefault();
    console.log(form.username, form.password);
  };

  const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    

      
        Username:
        
      
      

      
        Password:
        
      
      

      Submit
    
  );
}

如果想試試，可查看 CodeSandbox。

首先，我們創(chuàng)建一個(gè)state片段，并用一個(gè)對(duì)象初始化它

const [form, setValues] = useState({
  username: "",
  password: ""
})

這看起來(lái)像是在類中初始化狀態(tài)的方式。

還有一個(gè)處理提交的函數(shù)，其中，e.preventDefault來(lái)阻止頁(yè)面刷新并打印出表單值。

updateField函數(shù)更有意思。它使用setValues傳遞一個(gè)對(duì)象，為了確?，F(xiàn)有的狀態(tài)不被覆蓋，這里使用了展開(kāi)運(yùn)算(...form)。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。