2021.10.04 task9 react-hardhat

最新推荐文章于 2024-08-06 13:10:20 发布

王奕翔

最新推荐文章于 2024-08-06 13:10:20 发布

阅读量7.9k

点赞数

分类专栏：区块链技术学习文章标签： React UI组件化箭头函数区块链开发 this上下文

本文链接：https://blog.csdn.net/weixin_42477229/article/details/120609079

版权

区块链技术学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

王奕翔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.10.04 task9 react-hardhat

2021.10.04主要根据dapp-learning的教程在学习在学习task 9 hardhat-react 的部分区块链项目大部分用的都是 react，所以了解 react的基本机制也很重要今天着重学习了reactreact 的设计思想是UI组件化学习资料：https://chinese.freecodecamp.org/news/react-beginner-handbook/学习了react 的基本使用和箭头函数下面是react的基本使用<!DOCTYPE html>
复制链接

扫一扫

专栏目录