Python有幾種內置類型。 如果你創建了一個name變量並將其賦值為“Roger”，這個變量將自動表示一個字符串數據類型。 name = "Roger" 你可以使用type()函數檢查變量的類型，將變量作為參數傳入，然後將結果與str進行比較： name = "Roger" type(name) == str #True 或者使用isinstance()： name = "Roger" isinstance(name, str) #True 注意，在Python中查看True值時，除了在REPL中之外，你需要將這段代碼包裹在print()中，但出於清晰起見，我避免使用它。 我們在這裡使用了str類，但對於其他數據類型也同樣有效。 首先，我們有數字。 整數使用int類來表示。 浮點數（小數）的類型是float： age = 1 type(age) == int #True fraction = 0.1 type(fraction) == float #True 你看到了如何從字面值創建一個類型，就像這樣： name = "Flavio" age = 20 Python會自動從值的類型中檢測類型。 你還可以通過使用類的構造函數來創建特定類型的變量，傳入字面值或變量名： name = str("Flavio") anotherName = str(name) 你還可以通過使用類的構造函數來將一種類型轉換為另一種類型。 Python將嘗試確定正確的值，例如從字符串中提取數字： age = int("20") print(age) #20 fraction = 0.1 intFraction = int(fraction) print(intFraction) #0 這稱為類型轉換。當然，這種轉換可能不總是成功，取決於傳遞的值。如果在上述字符串中寫入test而不是20，你將得到一個ValueError: invalid literal for int() with base 10: 'test'錯誤。...

Python通過其標準庫提供了許多內建功能。 標準庫是一個龐大的集合，包含各種實用程序，從數學實用程序到調試，再到創建圖形用戶界面。 您可以在此處找到完整的標準庫模塊列表：https://docs.python.org/zh-tw/3/library/index.html 一些重要的模塊包括： math：用於數學實用程序 re：用於正則表達式 json：用於處理JSON datetime：用於處理日期 sqlite3：用於使用SQLite os：用於操作系統實用程序 random：用於生成隨機數 statistics：用於統計實用程序 requests：用於執行HTTP網絡請求 http：用於創建HTTP服務器 urllib：用於管理URL 讓我們介紹如何使用標準庫的模塊。您已經知道如何使用自己創建的模塊，在程序文件夾中從其他文件中導入。 對於標準庫提供的模塊，使用方式是一樣的： import math math.sqrt(4) # 2.0 或者 from math import sqrt sqrt(4) # 2.0 我們將很快逐個探索最重要的模塊，以便了解它們可以做些什麼。

操作符重載是一種高級技巧，我們可以使用它來使類可比較，並使它們能夠使用Python的操作符。 讓我們來看一個Dog類： class Dog: # Dog類 def __init__(self, name, age): self.name = name self.age = age 讓我們創建2個Dog對象： roger = Dog('Roger', 8) syd = Dog('Syd', 7) 我們可以使用操作符重載來添加一種比較這兩個對象的方式，基於age屬性： class Dog: # Dog類 def __init__(self, name, age): self.name = name self.age = age def __gt__(self, other): return True if self.age > other.age else False 現在，如果你嘗試運行print(roger > syd)，你將得到結果True。 同樣地，我們可以定義以下方法： __eq__() 檢查是否相等 __lt__() 檢查一個對象是否比另一個對象小使用 < 操作符 __le__() 小於等於 (<=) __ge__() 大於等於 (>=) __ne__() 不相等 (!=) 然後，您可以定義用於與算術操作進行交互的方法：...

使用類別在Python中定義新的物件 除了使用Python提供的型別外，我們可以宣告自己的類別並從類別實例化物件。 一個物件是一個類別的實例。 類別是一個物件的型別。 以這種方式定義一個類別： class <類別名稱>: # 我的類別 例如，讓我們定義一個狗(Dog)類別： class Dog: # 狗類別 類別可以定義方法： class Dog: # 狗類別 def bark(self): print('WOF!') self作為方法的參數指向當前物件實例，在定義方法時必須指定。 我們可以使用以下語法來創建一個類別的實例，即一個物件： roger = Dog() 現在roger是一個新的Dog型別的物件。 如果執行以下程式碼： print(type(roger)) 你會得到<class '__main__.Dog'> 一種特殊類型的方法__init__()被稱為建構子，我們可以在從該類別創建一個新物件時使用它來初始化一個或多個屬性： class Dog: def __init__(self, name, age): self.name = name self.age = age def bark(self): print('WOF!') 我們可以這樣使用它： roger = Dog('Roger', 8) print(roger.name) # 'Roger' print(roger.age) # 8 roger.bark() # 'WOF!' 類別的一個重要功能是繼承。 我們可以創建一個動物(Animal)類別，其中包含一個名為walk()的方法： class Animal: def walk(self): print('Walking..') 狗(Dog)類別可以繼承自動物(Animal)：...

快速開始在您的 React 應用程式中使用 Reach Router 在最近的一個專案中，我使用了 Reach Router ，我認為這是在 React 應用程式中實現路由的最簡單方法。 相比於我之前使用過的 React Router 來說，我覺得 Reach Router 更容易上手。 以下是一個短短五分鐘的教學，讓您快速了解 Reach Router 的基本用法。 安裝 首先，在命令行輸入以下指令安裝 Reach Router： npm install @reach/router 如果您對 @ 的語法不熟悉，它是 npm 的一個功能，允許使用專屬的套件名稱空間來命名套件。 接下來，將它引入到您的專案中： import { Router } from '@reach/router' 基本用法 我在頂層 React 檔案 index.js 中使用它，通常是在 create-react-app 安裝中，我將所有想要顯示的元件包裝在內： ReactDOM.render( <Router> <Form path="/" /> <PrivateArea path="/private-area" /> </Router>, document.getElementById('root') ) 我在元件上添加的 path 屬性可用於設定它們的路徑。換句話說，當我在瀏覽器的網址欄輸入這個路徑時，Reach Router 就會顯示對應的元件給我看。 / 路徑是預設路由，也就是當您在應用程式網域之外沒有設置 URL / 路徑時，它將顯示。也就是說，它是「首頁」。...

上下文 API 是一種很好的方法，讓我們在應用程式中傳遞狀態，而不需要使用 props。 上下文 API 的引入可以讓我們在應用程式中傳遞狀態 (並且允許該狀態在多個組件之間更新)，而不需要使用 props。 React 團隊建議，在只有幾個層級的子組件需要傳遞狀態的情況下，仍然使用 props，因為相比於上下文 API，props 是更簡單的 API。 在許多情況下，使用上下文 API 可以避免使用 Redux，大大簡化我們的應用程式，同時學習如何使用 React。 它是如何運作的呢？ 你可以使用 React.createContext() 創建一個上下文 (Context)： const { Provider, Consumer } = React.createContext() 然後，你可以創建一個包裹組件 (wrapper component)，並返回一個 Provider 組件，在其中加入所有你希望訪問上下文的組件： class Container extends React.Component { constructor(props) { super(props) this.state = { something: 'hey' } } render() { return ( <Provider value={{ state: this.state }}>{this.props.children}</Provider> ) } } class HelloWorld extends React.Component { render() { return ( <Container> <Button /> </Container> ) } } 我將這個組件命名為 Container，因為它將是一個全局的提供者 (Provider)。你也可以創建更小的上下文 (Context)。...

了解 useEffect React Hook 的用途以及如何使用它！ 如果你對 React Hook 還不熟悉，可以先閱讀我的React Hook 簡介。 在 React 中，我常常使用的一個 Hook 是 useEffect。 import React, { useEffect } from 'react' useEffect 函數會在元件首次渲染以及每次更新後執行。 React 首先會更新 DOM，然後呼叫傳給 useEffect() 的函數。 舉個例子： const { useEffect, useState } = React const CounterWithNameAndSideEffect = () => { const [count, setCount] = useState(0) const [name, setName] = useState('Flavio') useEffect(() => { console.log(`Hi ${name} you clicked ${count} times`) }) return ( <div> <p> Hi {name} you clicked {count} times </p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={() => setName(name === 'Flavio' ?...

學習如何使用 Hooks 建立 React 應用程式 Hooks 是在 React 16.7 中引入的功能，它將改變我們未來編寫 React 應用程式的方式。 在出現 Hooks 之前，某些關鍵的功能只能在類別組件中實現：擁有自己的狀態和使用生命週期事件。輕巧靈活的函式組件在功能上受到了限制。 Hooks 允許函式組件擁有狀態並響應生命週期事件，並且幾乎使類別組件過時。它們還允許函式組件以良好的方式處理事件。 存取狀態 使用 useState() API，您可以創建一個新的狀態變量並對其進行更改。useState() 接受狀態項目的初始值並返回包含狀態變量和修改狀態的函數的陣列。由於它返回的是一個陣列，我們使用陣列解構來訪問每個單獨的項目，就像這樣：const [count, setCount] = useState(0)。 以下是一個實際示例： import { useState } from 'react' const Counter = () => { const [count, setCount] = useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) } ReactDOM.render(<Counter />, document.getElementById('app')) 您可以添加任意多個 useState() 調用，以創建任意多個狀態變量。只需確保在組件的頂層調用它（不在 if 或其他塊中）。 Codepen 上的示例：...

了解如何使用 React Portals React 16 於 2017 年 9 月发布了 Portals。 Portal 是在組件層次結構之外的地方渲染元素的方法，它位於一個獨立的組件中。 當該元素被渲染時，它上發生的事件將由 React 組件層次結構管理，而不是由 DOM 位置所定義的層次結構管理。 因此有了 “portal” 這個名字：一個元素存在於 DOM 樹的某個位置，超出了普通的 React 組件樹，但包含它的 React 組件樹仍然負責管理它。 React 提供了一個簡單的 API 來實現這一點，即 ReactDOM.createPortal() ，它接受兩個參數。第一個是要渲染的元素，第二個是要渲染到的 DOM 元素。 這一功能的典型用例是模態窗口。 模態窗口要全屏渲染，必須存在於元素之外，以便可以使用 CSS 正確地應用樣式。 所以如果把模態窗口定義為一個組件： class Modal extends React.Component { constructor(props) { super(props) this.el = document.createElement('div') } componentDidMount() { document.getElementById('modal').appendChild(this.el) } componentWillUnmount() { document.getElementById('modal').removeChild(this.el) } render() { return ReactDOM.createPortal( this.props.children, this.el ) } } 我們可以在 App 組件中渲染它，並且即使技術上模態窗口是在不同的 DOM 樹中渲染的，也會由 App 組件處理模態窗口中發生的所有事件：...

如何使用PropTypes設置prop的要求類型 由於JavaScript是一種動態類型的語言，我們實際上沒有辦法在編譯時強制變量的類型，如果我們傳遞無效類型，它們將在運行時失敗，或者如果類型是兼容的但不是我們期望的類型時，將會得到奇怪的結果。 Flow和TypeScript在這方面提供了很大的幫助，但React有一種直接幫助處理props類型的方法，即使在運行代碼之前，我們的工具（編輯器，linters）可以檢測到我們傳遞了錯誤的值： import PropTypes from 'prop-types' import React from 'react' class BlogPostExcerpt extends Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) } } BlogPostExcerpt.propTypes = { title: PropTypes.string, description: PropTypes.string } export default BlogPostExcerpt 哪些類型可以使用 這些是我們可以接受的基本類型： PropTypes.array PropTypes.bool PropTypes.func PropTypes.number PropTypes.object PropTypes.string PropTypes.symbol 我們可以接受兩種類型中的其中一種： PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), 我們可以接受多個值中的一個： PropTypes.oneOf(['Test1', 'Test2']), 我們可以接受一個類的實例： PropTypes.instanceOf(Something) 我們可以接受任何React節點： PropTypes.node 甚至可以接受任何類型： PropTypes.any 數組有一種特殊的語法，我們可以使用它來接受特定類型的數組： PropTypes.arrayOf(PropTypes.string) 對於對象，我們可以通過以下方式組合對象的屬性： PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }) 要求屬性 將isRequired添加到任何PropTypes選項中，如果該屬性缺失，React將返回一個錯誤：...