你的位置:首页 > 软件开发 > Java > React.js深入学习详细解析

React.js深入学习详细解析

发布时间:2016-03-23 18:00:11
今天,继续深入学习react.js。目录:一、JSX介绍二、React组件生命周期详解三、属性、状态的含义和用法四、React中事件的用法五、组件的协同使用六、React中的双向绑定 一、JSX介绍①定义JSX=JavaScript ②特点1、元素名首字母大写2、符合嵌套规则 ...

React.js深入学习详细解析

今天,继续深入学习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.js深入学习详细解析事件对象介绍React.js深入学习详细解析

 其他不同类型的事件有不同的属性,简单了解一下

React.js深入学习详细解析

知道了事件的一些属性,我们就可以很方便地在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

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。