不再犹豫
分享是一种美德

学习笔记4-React技术全家桶-组件实例的三大核心属性

wangtong阅读(1039)

1、state

理解

  1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

  1. 组件被称为”状态机”, 通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈建议:

  1. 组件中render方法中的this为组件实例对象

  1. 组件自定义的方法中this为undefined,如何解决?

    a) 强制绑定this: 通过函数对象的bind()

    b) 箭头函数

  2. 状态数据,不能直接修改或更新,必须是通过setState进行更新,且更新是一种合并不是替换

2、props

理解

  1. 每个组件对象都会有props(properties的简写)属性

  2. 组件标签的所有属性都保存在props中

作用

  1. 通过标签属性从组件外向组件内传递变化的数据

  2. 注意: 组件内部不要修改props数据

编码操作

  1. 内部读取某个属性值

    this.props.name

  2. 对props中的属性值进行类型限制和必要性限制

    第一种方式(React v15.5 开始已弃用):

    Person.propTypes = {
     name: React.PropTypes.string.isRequired,
     age: React.PropTypes.number
    }

    第二种方式(新):使用prop-types库进限制(需要引入prop-types库)

    Person.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number. 
    }

  3. 扩展属性: 将对象的所有属性通过props传递

    <Person {...person}/>

  4. 默认属性值:

    Person.defaultProps = {
      age: 18,
      sex:'男'
    }

  5. 组件类的构造函数

    constructor(props){
      super(props)
      console.log(props)//打印所有属性
    }

3、refs

理解

组件内的标签可以定义ref属性来标识自己

编码

  1. 字符串形式的ref

    <input ref="input1"/>

  1. 回调形式的ref

    <input ref={(c)=>{this.input1 = c}}

  2. createRef创建ref容器·

    myRef = React.createRef() 
    <input ref={this.myRef}/>

事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写)

    1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件

    2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

  1. 通过event.target得到发生事件的DOM元素对象

 

 

 

欢迎大家关注公众号:

学习笔记3-React技术全家桶-组件

wangtong阅读(963)

## 模块与组件、模块化与组件化的理解
### 模块:
​   理解:向外提供特定功能的js程序(一个js文件就是一个模块)
​   为什么要拆成模块:业务量增加的话,代码会越来越多,并且变得更加复杂,维护成本会提高
​   作用:将js变更为可复用的文件,简化js的编写及提高js的运行效率
### 组件
​   理解:用来实现局部功能效果的代码和资源的集合(html、js、css、image等)
​   为什么要用组件:一个页面的功能更加复杂
​   作用:服用编码,简化项目编码,提高运行效率
### 模块化
​   当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
### 组件化
​   当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
## React 面向组件编程
### 组件的定义方式:
    1、函数式组件
        执行了ReactDOM.render(<MyComponent/>,document.getElementById(‘test’))之后,发生了什么:
                1、React解析组件标签,找到了<MyComponent/>组件
                2、发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,之后呈现在页面中。
    2、类式组件
        执行了ReactDOM.render(<MyComponent/>,document.getElementById(‘test’))之后,发生了什么:
                1、React解析组件标签,找到了<MyComponent/>组件
                2、发现组件是使用类定义的,随后new 出该类的实例,并通过该实例调用到原型上的render方法。
                3将render返回的虚拟DOM转为真实DOM,之后呈现在页面中。
        类的基本知识复习:
             总结:
             1、类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性时才写
             2、如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的
             3、类中所定义的方法,都是放在类的原型对象上,供实例去使用
### 注意
    1、组件名必须首字母大写
    2、虚拟DOM元素只能有一个根元素
    3、虚拟DOM元素必须有结束标签
### 渲染类组件标签的基本流程:
    1、React内部会创建组件实例对象
    2、调用render()得到的虚拟DOM,并解析为真实DOM
    3、插入到指定的页面元素内部

欢迎大家关注公众号:

学习笔记2-React技术全家桶

wangtong阅读(938)

## 基本使用
    1、核心js库:
        (1)react.js:React核心库。
        (2)react-dom.js:提供操作DOM的react扩展库。
        (3)babel.min.js:解析JSX语法代码转为JS代码的库。
    2、创建虚拟DOM的两种方式:
        (1)纯JS创建
        (2)JSX创建
## JSX语法规则:
    1、定义虚拟DOM时,不要写引号
    2、标签中混入JS表达式时要用{}
        一定注意区分:【js语句(代码)】与【js表达式】
            1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
                下面这些都是表达式:
                    (1)a
                    (2)a+b
                    (3)demo(1)
                    (4)arr.map()
                    (5)funuction test(){}
            2、语句(代码):
                下面这些都是语句(代码):
                    (1)if(){}
                    (2)for(){}
                    (3)switch(){case:***}
    3、样式的类名指定不能用class,要用className
    4、内联样式格式:style={{key:value}}
    5、虚拟DOM只能有一个根标签
    6、标签必须闭合
    7、标签首字母
        (1)若小写字母开头,则将改标签为html中同名元素,若html中无该标签对应的同名元素,则报错
        (2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

欢迎大家关注公众号:

【收藏】JS中Class类的详解

wangtong阅读(1721)

概述

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

严格模式

类和模块的内部,默认就是严格模式,所以不需要使用 use strict 指定运行模式

类的声明

定义一个类的一种方法是使用一个类声明,即用带有class关键字的类名(这里是“Rectangle”)
函数名和实例化构造名相同且大写(非强制)

class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}

函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

var person= new Person()
class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
// Personis not defined

类声明不可以重复

class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared

类必须使用 new 调用,否则会报错。这是它跟普通构造函数的一个主要区别,就是后者不用 new 也可以执行

class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
Person()
// TypeError Class constructor Person cannot be invoked without 'new'

类表达式(类定义)

类表达式可以是被命名的或匿名的

/* 匿名类 */ 
let Person = class {
        constructor(x, y) {
        this.x = x
        this.y = y
    }
}

/* 命名的类 */ 
let Person = class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}

类的方法
constructor 方法

constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

class Person {
    constructor(x, y) {
        this.x = x // 默认返回实例对象 this
        this.y = y
    }
    toString() {
        console.log(this.x + ', ' + this.y)
    }
}

注意:

  1. 在类中声明方法的时候,方法前不加 function 关键字
  2. 方法之间不要用逗号分隔,否则会报错
  3. 类的内部所有定义的方法,都是不可枚举的(non-enumerable)
  4. 一个类中只能拥有一个 constructor 方法

静态方法

静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2) // 3
p.sum(1,2) // TypeError p.sum is not a function

原型方法

类的所有方法都定义在类的 prototype 属性上面,在类的实例上面调用方法,其实就是调用原型上的方法
原型方法可以通过实例对象调用,但不能通过类名调用,会报错

class Person {
    constructor() {
        // 默认返回实例对象 this
    }
    sum() {
    }
    toString() {
        console.log('123456')
    }
}
// 给 Person 的原型添加方法
Person.prototype.toVal = function() {
    console.log('I am is toVal')
}

// 等同于
Person.prototype = {
    constructor() {},
    sum() {},
    toString() {}
}

var p = new Person()
p.toString() // 123456
p.toVal() // I am is toVal
Person.toString() // TypeError Person.toStringis not a function
Person.toVal() // TypeError Person.toVal is not a function

实例方法

实例方法也可以通过实例对象调用,但同样不能通过类名调用,会报错

class Person {
    constructor() {
        this.sum = function(a, b) {
            console.log(a + b)
        }
    }
}
var p = new Person()
p.sum(1,2) // 3
Person.sum(1,2) // TypeError Person.sum is not a function

欢迎大家关注公众号:

 

 

————————————————
版权声明:本文为CSDN博主「半度℃温热」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/fu983531588/article/details/89499461

【收藏】如何正确的判断this的指向?

wangtong阅读(1170)

this的指向问题在JavaScript中是非常重要的,如果用一句话说明 this 的指向,那么就是: 谁调用它,this 就指向谁。

1、普通函数(this指向window)默认绑定;严格模式下会抛出错误undefined(’use strict’)

var age = 18;
function fun() {
    console.log(this.age);
}

fun();//18 this指向window

2、对象函数(this指向该方法所属对象)

var o = {
    sayHi:function(){
        console.log(this); 
    }
}
o.sayHi();//{sayHi: ƒ}

3、构造函数(如果没有return,则this指向这个对象实例;如果存在return返回一个对象,则this指向返回的这个对象)

function Star(uname,age){
    this.uname = uname;
    this.age = age;
}
let a = new Star('xiaoming',18);
console.log(a);//Star {uname: "xiaoming", age: 18}
function Star(uname,age){
    this.uname = uname;
    this.age = age;
    let obj = {
        age:10
    }
    return obj;
}
let a = new Star('xiaoming',18);
console.log(a);//{age: 10}

 

4、绑定事件函数(this指向的是函数的调用者,指向了接收事件的 HTML 元素)

var btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this); //btn <button>点击</button>
}

5、定时器函数(this指向window)

setTimeout(function(){
    console.log(this);
}, 2000);//this指向window

6、立即执行函数(this 指向window)

(function(){
    console.log(this); //this指向window
})();

7、箭头函数(不绑定this关键字,指向的是函数定义位置的上下文this)

const obj ={name:'xiaoming'};
function fn(){
    console.log(this);//{name: "xiaoming"}
    return ()=>{
        console.log(this);//{name: "xiaoming"}
    }
}
const resFn = fn.call(obj);
resFn();

8、显示绑定:函数通过call()、apply()调用,bind()方法绑定,this指向的就是指定的对象;

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
var fun = person.fun;
fun.call(person); //20
fun.apply(person); //20
fun.bind(person)(); //20

如果这些方法传入的第一个参数是 undefined 或者 null,严格模式下 this 指向为传入的值undefined / null;非严格模式下指向window(全局);

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
var fun = person.fun;
fun.call(null); //28

9、 隐式绑定:函数的调用是在某个对象上触发的,即调用位置上存在上下文对象(相当于对象函数中的this指向)。典型的隐式调用为: xxx.fn()

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
person.fun(); //20 隐式绑定

 

欢迎大家关注公众号:

 

————————————————
版权声明:本文为CSDN博主「中南啊哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42721322/article/details/106391922

学习笔记1-React技术全家桶

wangtong阅读(1277)

  1. React是什么?

    React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。(用于动态构建用户界面的Javascript库(只关注视图)

  2. 为什么要学?

    2.1、原生js操作DOM繁琐、效率低(DOM-API操作UI)

    2.2、 使用js直接操作DOM,导致浏览器进行大量的重绘重排

    2.3、原生js没有组件化编码方案,复用率低

  3. React的特点:

    3.1、采用组件化编码、声明式编码,提高开发效率及组件复用率 

             React 高效的原因:

                (1)使用虚拟DOM,不总是直接操作页面的真实DOM
                (2)DOM Diffing算法,最小化页面重绘

    3.2、在React Native中可以使用React语法进行移动端开发

    3.3、使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

  4. 学习React之前需要掌握的js基础知识

    4.1、判断this的指向

    4.2、class(类)

    4.3、ES6语法规范

    4.4、npm包管理器

    4.5、原型、原链接

    4.6、数组常用方法

    4.7、模块化

欢迎大家关注公众号:

Vue学习笔记-网络应用

CN、古哥阅读(7462)

网络请求库:

axios:

什么是 axios?

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>

 

 

 

欢迎大家关注公众号:

Vue实例-本地留言板

mrnaas阅读(2614)

好久没有写新的笔记了,今天回想了一下之前学习的Vue知识,现在复习一遍,写写学习事的实例并加以修改一下:

本地记事本:

本地简单的留言板功能,后期其实可以添加盖楼功能的,但是目前先不考虑,大家也可以自己试着添加一下,后期我更新后会同步代码!

1、主要功能

(1)添加留言

(2)删除留言

(3)留言统计及删除

2、主要知识点:

(1)监听事件—–v-on/@

(2)list—–v-for

(3)数据绑定—–v-model

(4)v-show

在线演示

代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta name="robots" content="noindex, nofollow" />

    <meta name="googlebot" content="noindex, nofollow" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>本地留言板</title>

    <link rel="stylesheet" type="text/css" href="./css/index.css" />

</head>

<body>

    <section id="app">

        <!-- 输入框 -->

        <header class="header">

            <h1>本地留言板</h1>

            <input v-model="temp.name" autofocus="autofocus" autocomplete="off" placeholder="请输入昵称"

              class="new-todo" />

              <input v-model="temp.text" autofocus="autofocus" autocomplete="off" placeholder="请输入留言内容"

                class="new-todo" />

                <button class="textbtn textbtn-red" @click="add">提交</button>

        </header>

        

        <!-- 记事本内容列表 -->

        <section class="main">

            <ul class="todo-list">

              <li class="todo" v-for="(item,index) in list">

                <div class="view">

                  <span class="index">{{ index+1 }}.</span>

                  <label>昵称:<span style="color: red;">{{ item.name }}</span></label>

                  <label>留言内容:<span style="color:blue">{{ item.text }}</span></label>

                  <label>留言时间: <span style="color:green">{{ item.time }}</span></label>

                  <button class="destroy" @click="remove(index)"></button>

                </div>

              </li>

            </ul>

        </section>

        <!-- 记事本统计信息 -->

        <footer class="footer" v-show="list.length!=0">

            <span class="todo-count" v-if="list.length!=0">

              <strong>{{ list.length }}</strong> items left

            </span>

            <button v-show="list.length!=0" class="clear-completed" @click="clear">

              Clear

            </button>

        </footer>

    </section>

    <!-- 底部 -->

    <footer class="info">

      <p>技术支持:

        <a href="http://www.mrnaas.com/" target="_blank" style="color: red;">MN乐享</a>

      </p>

    </footer>

    <script src="utils/vue.js"></script>

    <script src="utils/index.js"></script>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                temp:{

                    name:null,

                    text:null

                },

                list: []

            },

            methods: {

                add: function () {

                    let time = parseTime(Date())

                    let obj = JSON.parse(JSON.stringify(this.temp))//为了防止错误发生,采用深拷贝

                    if(obj.name && obj.text){

                        obj.time = time

                        this.list.push(obj);

                    }else{

                        alert("留言昵称/留言内容必填!")

                    }

                },

                remove: function (index) {

                    console.log("删除");

                    console.log(index);

                    this.list.splice(index, 1);

                },

                clear: function () {

                    this.list = [];

                }

            }

        })

    </script>

</body>

</html>

 

链接: https://pan.baidu.com/s/1fMgOHYz79emhehgaxNV-aA

提取码获取方法:

关注公众号发送:【留言板】

GitHub

https://github.com/twang211/webdemo