3.1 React组件介绍 |
|
React组件从形式上看很像是JavaScript函数,通过这个函数返回一个需要在页面上展示的React元素。其实,在第2章的代码实例中我们已经使用到了React组件,具体的代码如下:
【代码3-1】
上面这段代码就是通过JavaScript函数形式实现的React组件。React组件的结构看起来十分简洁和高效,在函数内部定义好页面需要的元素组合,通过return语句返回函数值就可以了。
另外,在本书第1章中介绍过,React语法是基于版本ECMAScript 6实现的。因此,React组件除了通过JavaScript函数的形式,还可以通过ES6 Class(类)的形式来实现,具体代码如下:
【代码3-2】
上面这段代码就是通过ES6 Class(类)形式实现的React组件。其实,【代码3-2】与【代码3-1】虽然实现的手段不一样,但最终的效果是一致的。