4 個 useState Hook 示例

ZweiZhao 發布于2019-08-26 14:06 / 2198人閱讀

摘要：示例使用顯示隱藏組件這個示例是一個組件，它顯示一些文本，并在末尾顯示一個鏈接，當單擊鏈接時，它展開剩下的文本。還有一個處理提交的函數，其中，來阻止頁面刷新并打印出表單值。它使用傳遞一個對象，為了確?，F有的狀態不被覆蓋，這里使用了展開運算。

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

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

到 React 16.8 目前為止，如果編寫函數組件，然后遇到需要添加狀態的情況，咱們就必須將組件轉換為類組件。

編寫 class Thing extends React.Component，將函數體復制到render()方法中，修復縮進，最后添加需要的狀態。

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

useState 做啥子的

useState hook 允許咱們向函數組件添加狀態，我們通常稱這些為“ hooks”，但它們實際上是函數，與 React 16.8 捆綁在一起。通過在函數組件中調用useState，就會創建一個多帶帶的狀態。

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

對于 hooks，state 不必是對象，它可以是你想要的任何類型-數組、數字、布爾值、字符串等等。每次調用useState都會創建一個state塊，其中包含一個值。

示例：使用 useState 顯示/隱藏組件

這個示例是一個組件，它顯示一些文本，并在末尾顯示一個read more鏈接，當單擊鏈接時，它展開剩下的文本。

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

// 兩個 props:
//   text - 顯示的內容
//   maxLength - 在點擊“read more”之前顯示多少個字符
function LessText({ text, maxLength }) {
  // 創建一個狀態，并將其初始化為“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")
);

僅用一行代碼，我們就使這個函數組件有狀態：

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

但是這個函數到底在做什么呢?如果每次渲染都調用它(確實如此)，它又是如何保留狀態的。

Hooks 實現的技巧

這里的“神奇”之處是，React在每個組件的幕后維護一個對象，并且在這個持久對象中，有一個“狀態單元”數組。當你調用useState時，React將該狀態存儲在下一個可用的單元格中，并遞增數組索引。

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

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

示例：根據之前的狀態更新狀態

看看另一個例子：根據前一個值更新state的值。

咱們要造個計步器，每點擊一次按鈕，就計一次，點擊完后，它會告訴你你走了多少步。

import React, { useState } from "react";

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

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

  return (
    
      總共走了 {steps} 步!
      

      
    
  );
}

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

首先，通過調用useState創建一個新的state，并將其初始化為0。它返回steps的當前值0和setSteps函數來更新 steps，用 increment函數來對steps進行增 1 操作。

這里還可以優化的提取increment函數，可以直接將 increment 函數里面的內聯到 onClick 里面：

示例:state 作為數組

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

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

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

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

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

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

示例：具有多個鍵的 state

再來看看，state為對象的例子，創建一個包含2個字段的登錄表單：username 和password。

下面示例主要展示如何在一個state對象中存儲多個值，以及如何更新單個值。

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:
        
      
      

      
    
  );
}

如果想試試，可查看 CodeSandbox。

首先，我們創建一個state片段，并用一個對象初始化它

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

這看起來像是在類中初始化狀態的方式。

還有一個處理提交的函數，其中，e.preventDefault來阻止頁面刷新并打印出表單值。

updateField函數更有意思。它使用setValues傳遞一個對象，為了確保現有的狀態不被覆蓋，這里使用了展開運算(...form)。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎加群互相學習。

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

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

云服務器 GPU云服務器 java 4個cpu 4核云服務器有幾個線程服務器4個網口如何使用 useState

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/110061.html

10分鐘了解react新特性hooks

摘要：簡介是的新增特性。我們統一把這些操作稱為副作用，或者簡稱為作用。由于副作用函數是在組件內聲明的，所以它們可以訪問到組件的和。副作用函數還可以通過返回一個函數來指定如何清除副作用。目前為止，有兩種主流方案來解決這個問題高階組件和。 Hook 簡介 Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。 us...

hlcfan 2019-08-26 13:58 評論0 收藏0
快速了解 React Hooks 原理

摘要：使用該對象，可以跟蹤屬于組件的各種元數據位。調用你的組件這意味著它知道存儲的元數據對象。下一次渲染會發生什么需要重新渲染組件由于之前已經看過這個組件，它已經有了元數據關聯。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！我們大部分 React 類組件可以保存狀態，而函數組件不能？并且類組件具有生命周期，而函數組件卻不能...

Hydrogen 2019-08-26 14:04 評論0 收藏0
03. 該嘗嘗React Hook了。

摘要：我們統一把這些操作稱為副作用，或者簡稱為作用。盡可能使用標準的以避免阻塞視覺更新。大多數情況下，不需要同步地執行。返回的對象在組件的整個生命周期內保持不變。當對象內容發生變化時，并不會通知你。 Hook Hook 是 React 16.8.0 的新增特性。 Hook 使你在非 class 的情況下可以使用更多的 React 特性。Hook 不能在 class 組件中使用。使用規則： ...

cikenerd 2019-08-26 10:43 評論0 收藏0
React Hooks入門

摘要：組件的職責增長并變得不可分割。是架構的重要組成部分。有許多好處，但它們為初學者創造了入門的障礙。方法使用狀態鉤子的最好方法是對其進行解構并設置原始值。第一個參數將用于存儲狀態，第二個參數用于更新狀態。學習目標在本文結束時，您將能夠回答以下問題：什么是 hooks? 如何使用hooks？使用hooks的一些規則? 什么是custom hook(自定義鉤子)？什么時候應該使用 ...

zhangke3016 2019-08-02 15:17 評論0 收藏0
React Hook起飛指南

摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個內置，但僅僅基于以下兩個，就能做很多事情。行代碼實現一個全局元瀟根組件掛上即可子組件調用隨時隨地實現一個局部元瀟的本質是的一個語法糖，感興趣可以閱讀一下的類型定義和實現。 React Hook起飛指南作者：元瀟方凳雅集出品 16.8目前放出來了10個內置hook，但僅僅基于以下兩個API，就能做很多事情。所以這篇文章不會講很多API，...

姘擱『 2019-08-26 10:47 評論0 收藏0