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在实际项目中的差异。
react初探(一)之JSX、状态(state)管理、条件渲染、事件处理的更多相关文章
- Terraform状态State管理,让变更有记录
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 简介 最近工作中用到了Terraform,权当学习记录一下,希望能帮助到其它人. Terraform系列文章如下: Ter ...
- react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染
我们已经学会了 React 创建元素和渲染元素 ReactDOM.render(<div>Hello React!</div>, document.getElementById ...
- React文档(八)条件渲染
在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- 【译】在React中实现条件渲染的7种方法
原文地址:https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications 借助R ...
- React项目中使用Mobx状态管理(一)
1.安装 $ yarn add mobx mobx-react 2.新建store/index.js,存放数据(以下思路仅限于父子组件的简单应用) 注意:这里暂时没使用装饰器@observable,装 ...
- React组件系统、props与状态(state)
多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...
- React 初探
React 简单介绍 先说 React 与 React Native 他们是真的亲戚,可不像 Java 和 Javascript 一样. 其实第一次看到 React 的语法我是拒绝的,因为这么丑的写法 ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
随机推荐
- 关于表情的战争APP隐私政策网址
本软件尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本软件会按照本隐私权政策的规定使用和披露您的个人信息.但本软件将以高度的勤勉.审慎义务对待这些信息.除本隐私权政策另 ...
- JMeter接口自动化测试实例—JMeter引用javaScript
Jmeter提供了JSR223 PreProcessor前置处理器,通过该工具融合了Java 8 Nashorn 脚本引擎,可以执行js脚本以便对脚本进行前置处理.其中比较典型的应用就是通过执行js脚 ...
- 解决Qt下ssl出错的办法
在使用 QNetworkAccessManager 时出现的ssl错误:qt.network.ssl: QSslSocket: cannot resolve SSL_set_psk_client_ca ...
- 爬虫----scrapy账号登录豆瓣,并且重定向到电影界面,获取界面信息
Request:这是url重定向 FormRequest:这是表单提交,就是登录界面时,输入账号.密码,点击登陆的过程 # -*- coding: utf-8 -*-import scrapyfrom ...
- #WEB安全基础 : HTTP协议 | 0x12 MIME多用途邮件扩展以及多部分对象集合
我们是怎么让邮件里又有图片又有文字的? 文字和图片是两个不同的类型,而邮件又是一个类型. C语言的结构体允许用户定义一个含有多类型的自定义类型 像这样,看不懂没关系,你只要知道邮件里有多个类型就可以了 ...
- 文件 "c:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA\ttt.mdf" 已压缩,但未驻留在只读数据库或文件组中。必须将此文件解压缩。 CREATE DATABASE 失败。无法创建列出的某些文件名。请查看相关错误。 (.Net SqlClient Data Provider)
问题: 文件 "c:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA\ttt.mdf" 已压缩,但 ...
- Scala字节数组转换为数字
1. 2个字节数组转换为整数 def bytes2uint8(_bytes: Array[Byte], _offset: Int): Int = { val b0 = _bytes(_offset) ...
- javascript数组方法
[声明一个数组]var a=[1,2,3]; [定义数组的长度]var a=new Array(2); [连接数组]数组1.concat(数组2,数组3) [将数组转换为字符串,可自定连接符]arr. ...
- Java并发包1--线程的状态及常用方法
一.线程主要有以下几种状态: new(新建):线程刚刚被创建 runnable(就绪):新建的线程执行start方法进入就绪状态等待系统调度分配CPU,被分配了之后就进入运行中状态 blocked(阻 ...
- 【源码】HashMap源码及线程非安全分析
最近工作不是太忙,准备再读读一些源码,想来想去,还是先从JDK的源码读起吧,毕竟很久不去读了,很多东西都生疏了.当然,还是先从炙手可热的HashMap,每次读都会有一些收获.当然,JDK8对HashM ...