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
})