国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

4 個 useState Hook 示例

ZweiZhao / 2020人閱讀

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

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

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

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

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

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

useState 做啥子的

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

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

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

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

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

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

// 兩個 props:
//   text - 顯示的內(nèi)容
//   maxLength - 在點擊“read more”之前顯示多少個字符
function LessText({ text, maxLength }) {
  // 創(chuàng)建一個狀態(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")
);

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

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

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

Hooks 實現(xiàn)的技巧

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

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

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

示例：根據(jù)之前的狀態(tài)更新狀態(tài)

看看另一個例子：根據(jù)前一個值更新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")
);

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

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

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

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

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

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

    
  );
}

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

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

示例：具有多個鍵的 state

再來看看，state為對象的例子，創(chuàng)建一個包含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 (
    

      
      

      
      

      
    

  );
}

如果想試試，可查看 CodeSandbox。

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

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

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

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

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

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

交流

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110061.html

相關(guān)文章

  • 10分鐘了解react新特性hooks

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

    hlcfan 評論0 收藏0

  • 快速了解 React Hooks 原理

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

    Hydrogen 評論0 收藏0

  • 03. 該嘗嘗React Hook了。

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

    cikenerd 評論0 收藏0

  • React Hooks入門

    摘要：組件的職責(zé)增長并變得不可分割。是架構(gòu)的重要組成部分。有許多好處，但它們?yōu)槌鯇W(xué)者創(chuàng)造了入門的障礙。方法使用狀態(tài)鉤子的最好方法是對其進行解構(gòu)并設(shè)置原始值。第一個參數(shù)將用于存儲狀態(tài)，第二個參數(shù)用于更新狀態(tài)。 學(xué)習(xí)目標(biāo) 在本文結(jié)束時，您將能夠回答以下問題： 什么是 hooks? 如何使用hooks？ 使用hooks的一些規(guī)則? 什么是custom hook(自定義鉤子)？ 什么時候應(yīng)該使用 ...

    zhangke3016 評論0 收藏0

  • React Hook起飛指南

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

    姘擱『 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<