您的位置:首页 > 设计教程 > 网页设计 > 内页

JavaScript用户界面库ReactJs入门教程

核心提示: React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。

下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

QQ截图20150721111858.png

看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

1)获取属性的值用的是this.props.属性名

2)创建的组件名称首字母必须大写。

3)为元素添加css的class时,要用className。

4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

2、组件状态

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

QQ截图20150721112014.png

这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

072305421429007.gif

原理分析:

当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

这里值得注意的几点如下:

1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

2)访问state的方法是this.state.属性名。

3)变量用{}包裹,不需要再加双引号。

3、组件的生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM

  • Updating:正在被重新渲染

  • Unmounting:已移出真实 DOM

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:designlinks
扫一扫 订阅最新资讯
回到顶部