当前位置:首页 » 《随便一记》 » 正文

2021.10.04 task9 react-hardhat_王奕翔的博客

7 人参与  2022年03月17日 17:06  分类 : 《随便一记》  评论

点击全文阅读


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

点击全文阅读


本文链接:http://zhangshiyu.com/post/36339.html

函数  箭头  上下文  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1