一、React的第二种使用方法-----脚手架

1.前提:Node.js >8.10

2.下载全局脚手架工具

npm  i  -g  create-react-app

3.运行全局脚手架工具,创建空白项目

create-react-app  项目名

4.进入空白项目,运行开发服务器

cd  项目名

npm start

5.客户端访问测试

http://127.0.0.1:3000

二、React中的数据绑定

1.内容绑定 ------ <p>{表达式}</p>

2.属性绑定 ------ <p title="{表达式}"></p>

3.指令绑定-------   React中没有指令

4.事件绑定 ------  与其他框架区别较大!

5.双向数据绑定-------与其他框架区别较大!

React中的事件句柄不同于HTML中的事件句柄(handler)

onclick --------onClick

ondbclick ------- onDoubleClick

onmouseover -------- onMouseOver

onblur  -------- onBlur

.....

Vue.js中的事件绑定                   Angular中的事件绑定               React中的事件绑定

<p @click="f2"></p>            <p  (click)="f2()"></p>           <p  onClick="{this.f2}"></p>

<p @click="f2()"></p>

总结:React中事件绑定需要注意:

1.事件句柄名称必须用"小驼峰命名法"

2.事件处理函数不能用引号

3.事件处理方法前必须加{  }

4.当前class内部的方法做事件处理方法,则必须加 this

5.事件处理方法名后不能加(  )

面试题1:React中事件处理方法中为什么this默认指向undefined?

JSX中,事件处理方法赋值时不是函数调用,而是函数的引用赋值-------- this指向不再

指向当前组件对象!而是指向当前ES6模块中的全局this-----值为undefind

面试题2:如何解决React事件处理方法中无法使用this的问题?------用三种方法

①用匿名函数封装立即调用的函数 

f2(){

console.log(this);

}

<p onClick={ ()=>{this.f2()} }></p>

②用箭头函数代替function匿名函数

f2 = ( )=>{

console.log(this);

}

<p  onClick={   this.f2   }></p>

③在构造方法中固定this的指向

constructor(){

super()

this.f2  = this.f2.bind( this )

}

f2(){

}

<p  onClick={  this.f2 }></p>

三、React中组件里的Model数据

React中class组件可以声明两种形式的Model数据:

①class属性------可以一次性绑定到模板,数据再变则不会再次修改视图模板.

class  MyC02{

count = 3

}

②组件状态数据--------可以绑定到模板,未来Model变则View变

使用步骤:

1)创建状态数据

constructor(){

super()

this.state = {  age:20 }

}

2)绑定状态数据

<p>{this.state.age}</p>

3)修改状态数据

this.setState({

age:21

})

注意:①setState()会修改虚拟DOM树

②setState()不会清空已有的状态数据,只会把新修改的数据合并到已有数据中.

③setState()是异步操作,不会立即执行-----底层会把连续的多次setState合并为一次操作,

以减少虚拟DOM/真实DOM的修改;如果希望看到修改后的值,可以使用setState({ },callback)中的回调函数.

④不推荐直接在setState中使用之前的this.state数值,使用临时变量代替

四、React中的双向数据绑定

Vue.js中的双向数据绑定                          Aangular中的双向数据绑定                    React中的双向数据绑定

---------------------------------------------------------------------------------------------------------------

v-model                                                      [(ngModule)]                                        受控组件

提示:双向数据绑定只能用于"表单元素",如input、textarea、select等

方向1:Model => View(value)

constructor(){

this.state ={  uname:'' }

}

<input  value={this.state.uname}/>

至此,输入框中会呈现状态数据,但是无法再修改------受控组件

方向2:View(value)  => Model

React的第二种使用方法----脚手架方式的更多相关文章

  1. springBoot第二种配置文件yaml书写方式及读取数据、整合myBatis和整合junit

    一.yaml文件格式:key-value形式:可以表示对象 集合 1.语法:key:value 冒号后面必须跟一个空格再写value值 key1: key2: key3:value 2.属性取值:a. ...

  2. tornado 第二种路由方法(装饰器)

    #!/usr/bin/env python # _*_coding:utf-8 _*_ import tornado.ioloop import tornado.web application = t ...

  3. 第二种BitBand操作的方式 - 让IDE来帮忙算地址

    要使用Bitband来訪问外设,一定要得出相应的映射地址.人工计算肯定是不靠谱的,并且也没人想这么干.因此能够通过Excel,拉个列表来计算.想想,这也是一个不错的招数.可是后来想想,还是嫌麻烦,毕竟 ...

  4. SpringMVC实现操作的第二种方式

    一: 运行效果: 点击提交之后显示效果 二: (1).web.xml <?xml version="1.0" encoding="UTF-8"?> ...

  5. HashMap两种遍历数据的方式

    HashMap的遍历有两种方式,一种是entrySet的方式,另外一种是keySet的方式. 第一种利用entrySet的方式: Map map = new HashMap(); Iterator i ...

  6. CSS当中color的四种表示方法

    这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...

  7. 【转载】JavaWeb之DBUtils QueryRunner类对数据表的增、删、查(8种结果集处理方式)、改操作

    一.使用QueryRunner类,实现对数据表的 insert delete update package com.shuhuadream.queryrunner; import java.sql.C ...

  8. 09 Python两种创建类的方式

    第一种比较普遍的方式: class Work(): def __init__(self,name): self.name = name w = Work('well woker') 这样就简单创建了一 ...

  9. java单例的几种实现方法

    java单例的几种实现方法: 方式1: public class Something { private Something() {} private static class LazyHolder ...

随机推荐

  1. python学习笔记(三)---字典

    字典 在Python中,字典 字典 是一系列键 键-值对 值对 .每个键 键 都与一个值相关联,你可以使用键来访问与之相关联的值.与键相关联的值可以是数字.字符串.列表乃至字典.事实上,可将 任何Py ...

  2. 日志分析工具ELK(三)

    目前官网更新特别快,不到半年时间就更新了好几个版本,目前最新的是5.1 以下安装配置使用4.5版本的 https://www.elastic.co/guide/en/kibana/4.5/index. ...

  3. Android MVP 十分钟入门!

    前言 在日常开发APP 的过程中,随着业务的扩展,规模的变化.我们的代码规模也会逐渐变得庞大,每一个类里的代码也会逐渐增多.尤其是Activity和Fragment ,由于Context 的存在,基本 ...

  4. 开启Apache服务出现的错误

    httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for Se ...

  5. USACO Training Section 1.2 [USACO1.2]回文平方数

    题目描述 回文数是指从左向右念和从右向左念都一样的数.如12321就是一个典型的回文数. 给定一个进制B(2<=B<=20,由十进制表示),输出所有的大于等于1小于等于300(十进制下)且 ...

  6. TX2开启最大功耗模式

    我们移植深度学习模型到Jetson TX2,为了获得更好的指标参数,我们需要将TX2开启最大功耗模式. Jetson TX2 工作模式及相应的CPU和GPU频率: 上电时,默认采用最低功耗模式1,风扇 ...

  7. 面试中的volatile关键字

    在Java的面试当中,面试官最爱问的就是volatile关键字相关的内容.经过多次面试之后,你是否思考过,为什么他们那么爱问volatile关键字相关的问题?而对于你,如果作为面试官,是否也会考虑采用 ...

  8. VSCode 安装 React 项目

    1 下载nodejs 安装 (此时npm 和 node环境都已经装好) 2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.tao ...

  9. 在linux上部署自己开发的web项目

    在linux上部署自己开发的web项目 前言:相信有很多做开发的小伙伴和我之前一样,只会在windows环境下,利用开发工具开发运行web项目,但是却不知道怎么把开发好的项目部署到linux服务器上去 ...

  10. N - Subpalindromes URAL - 1989 哈希+线段树

    N - Subpalindromes URAL - 1989 这个是一个哈希+线段树,这个题目也不算特别难,但是呢,还比较有意思. 这个题目给你两个操作,一个是回答l~r 区间是不是回文,一个是对一个 ...