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

一、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