今天,继续深入学习react.js。目录:一、JSX介绍二、React组件生命周期详解三、属性、状态的含义和用法四、React中事件的用法五、组件的协同使用六、React中的双向绑定 一、JSX介绍①定义JSX=JavaScript ②特点1、元素名首字母大写2、符合嵌套规则 ...
今天,继续深入学习react.js。
目录:
一、JSX介绍
二、React组件生命周期详解
三、属性、状态的含义和用法
四、React中事件的用法
五、组件的协同使用
六、React中的双向绑定
一、JSX介绍
①定义
JSX=JavaScript
②特点
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词,如for和class。需要替换成htmlFor和className
③使用方法
1、使用动态值:JSX将两个花括号之间的内容{...}渲染为动态值,花括号指明了一个javascript上下文环境,花括号里面可以是一个变量,也可以是函数。 例如:
var name=“winty”;<p>{name}</p>
function date(d){三、属性、状态的含义和用法
属性的含义:二、展开定义(个人认为就是对象式定义)这样定义的话,理论上使用应该是one={props.one}这样调用,但是这样写起来比较繁琐,而且如果数据被修改,就需要对应修改相应的赋值,并且无法动态地设置属性,所以react中添加了一种展开语法:状态的含义:事件对象介绍 其他不同类型的事件有不同的属性,简单了解一下
知道了事件的一些属性,我们就可以很方便地在React中获取这些属性,进行一些逻辑的处理,实现一些复杂的业务功能、页面效果等。
例如:我们可以利用鼠标事件属性,实时显示鼠标在某个区域的坐标:
<script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState: function () { return { x: 0, y: 0 } }, handleMouseMove: function (event) { this.setState({ x: event.clientX, y: event.clientY }); }, render: function () { return <div onMouseMove={this.handleMouseMove} style={{ height: '500px', width: '500px', backgroundColor: 'gray' }}> {this.state.x + ', ' + this.state.y} </div>; }, }); React.render(<HelloWorld></HelloWorld>, document.body); </script>
原标题:React.js深入学习详细解析
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。