永利网投正规网页永利网投正规网页


永利皇宫在线手机版客服

react初探(一)之JSX、状态(state)管理、条件渲染、事件处理

前言:

最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue。在实际项目中只使用过一次angular5,其余项目都是使用Vue写的。写篇博客记录一下一些项目中经常使用的技巧在Vue和react中不同的实现方法。

 使用JSX指定属性值和嵌入表达式:

(1)指定变量作为属性值

<div title={type}>type</div>

Vue中的写法:

<div :title="type">type</div> // vue写法

(2)指定字符串作为属性值

<div title="我是title的值"}>type</div>

(3)动态绑定class

<div className={hasClass ? "class" : ""}>class</div><div className={hasClass && "class"}>class</div>

Vue中的写法:

<div :class="{"class": hasClass}"></div> // Vue写法

(4)JSX中嵌入表达式

<div>{type}</div>

Vue中的写法:

<div>{{type}}</div> // Vue写法

注意:react的 { } 中的变量是非常灵活的,可以为原始值、React 元素,或者函数。

状态(state)管理:

(1)定义变量

类似于Vue在data定义组件中的变量,react可以在constructor函数初试化定义组件中的变量。

class State extends Component { constructor(props){ super(props); this.state = { name: "你假装没察觉" } }; render() { return ( <div> {this.state.name} </div> ) }}

 

在render函数中使用this.state就可以访问到在constructor中定义的this.state对象。PS:只能在constructor函数中对this.state对象进行初始化,在其他地方对this.state对象进行初始化都是无效的。

Vue的写法:

<div>{{name}}</div>data() { return { name: "你假装没察觉" };} // Vue的写法

 

(2)改变变量的值

在react中如果要改变state中定义的变量不能直接使用 " = "的方式直接赋值,需要使用setState函数。

this.setState({ name: "yjj"})

Vue中的写法:

this.name = "yjj" // Vue中的写法

注意:state的更新可能是异步的,如果存在 num = num + 10 这种情况,最好使用下面这种方式:

this.setState((prevState,props) => ({ num: prevState.num+10}))

条件渲染:

(1)与运算符:

利用js的 "&&" 运算符当第一项为false时,第二项不会加载进来的机制。

render() { const isShow = false return( <div> {isShow&&<div>isShow为true时我才显示</div>} </div> )}

(2) 三目运算符

render() { const isShow = true return( <div> {isShow?<div>isShow为true时我才显示</div>: <div>isShow为fasle时我才显示</div>} </div> )}

 Vue中的写法:

<div v-show="isShow">isShow为true时我才显示</div> 或者<div v-if="isShow">isShow为true时我才显示</div>// Vue中的写法

 事件处理:

 (1)在constructor函数中使用bind将类的方法绑定上this。PS:这种方法太繁琐,需要将每个处理事件的方法都绑定上this

class Event extends Component { constructor(props) { super(props) this.state = { num: 10 } this.add = this.add.bind(this) }; add() { this.setState((prevState) => ({ num: prevState.num+10 })) }; render() { return( <div> <div onClick={this.add}>num加10</div> <div>当前num={this.state.num}</div> </div> ) }}

(2)在回调函数中使用箭头函数。PS:需要多写一层箭头函数嵌套

<div onClick={(e)=>this.add(10,e)}>num加10</div> // 10为传递进去的参数

(3)在onClick定义处直接使用bind绑定this。PS:需要多写一个bind

<div onClick={this.add.bind(this,10,e)}>num加10</div> // 10为传递进去的参数

(4)定义方法时使用箭头函数。PS:当需要传递参数的时候还是只能在外面嵌套一层箭头函数

add = () => { this.setState((prevState) => ({ num: prevState.num+10 }))};render() { return( <div> <div onClick={this.add}>num加10</div> <div>当前num={this.state.num}</div> </div> )}

 PS:在react中阻止默认行为不能像Vue中直接使用return false,只能使用e.preventDefault()

 事件处理在Vue中的写法:

<div @click="add(10)">num加10</div> // Vue中的写法,10为传递进去的参数

总结: 

很多Vue项目中经常使用的技巧在react中都能找到类似的方法实现,区别只是在于写法不同而已。刚刚接触react不久,感觉很多地方都用着不是很顺手,总觉得还是Vue的写法要简单一些,等后面用react写几个项目再来总结一下Vue和react在实际项目中的差异。

欢迎阅读本文章: 苗秀梅

永利皇宫在线正规网页

永利皇宫在线手机版客服