2021.10.04
主要根據dapp-learning的教程在學習
在學習task 9 hardhat-react 的部分
區塊鏈專案大部分用的都是 react，所以了解 react的基本機制也很重要
今天著重學習了react
react 的設計思想是UI組件化
學習資料：https://chinese.freecodecamp.org/news/react-beginner-handbook/
學習了react 的基本使用和箭頭函式
下面是react的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-react基本使用</title>
</head>
<body>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
const title = React.createElement('h1',null,'Hello React')
ReactDOM.render(title,document.getElementById('root'))
</script>
</body>
</html>
下面是箭頭函式的學習筆記
// 之前是
const myFunction = function(){
//..
}
const myFunction = () => {
//..
}
// 如果函式體只包含一條陳述句，您可以省略括號并將所有內容寫在一行中
const myFunction = () => doSomething()
const myFunction = (param1,param2) => doSomething(param1,param2)
const myFunction = param => doSomething(param)
//如果您有一個引數，則可以完全省略括號
const myFunction = param => doSomething(param)
// 隱式回報
const myFunction = () => 'test'
myFunction() //'test'
const myFunction = () => ({ value: 'test' })
myFunction() //{value: 'test'}
// this 如何作業在箭頭功能
// this 是一個很難掌握的概念，因為它會因背景關系而異，也因Javascript的模式而異
// 澄清這個概念很重要，因為與常規函式相比，箭頭函式的行為非常不同
// 當定義為物件的方法時，在常規函式中this參考該物件，因此可以執行以下操作：
const car = {
model: 'Fiesta',
manufacturer: 'Ford',
fullName: function(){
return `${this.manufacturer} ${this.model}`
}
}
this帶有箭頭函式的作用域是從執行背景關系繼承的，箭頭函式根本沒有系結this，所以它的值會在呼叫堆疊中查找，
所以在這段代碼car.fullName()中將不起作用，并將回傳字串"undefined undefined"
const car = {
model: 'Fiesta',
manufacturer: 'Ford',
fullName: () => {
return `${this.manufacturer} ${this.model}`
}
}
箭頭函式也不能用作建構式，當實體化一個物件時會引發一個TypeError.
當不需要動態背景關系時，這是應該使用常規函式的地方，
這也是處理事件時的問題，DOM 事件偵聽器設定this為目標元素，如果您依賴于this事件處理程式，則需要一個常規函式：
const link = document.querySelector('#link')
link.addEventListener('click', () => {
// this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
// this === link
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/305755.html
標籤：區塊鏈
上一篇：趨勢與未來 賦能OEC生態 BabySwap價值無限
下一篇：可能失敗，但用例超贊的專案