JSX和组件的概念

一、JSX和组件的概念

   1. JSX

      1) 传统通过JS布局页面的方式如下：

          var img = document.createElement("img");
          img.src="images/1.jpg";
          $("#main").appendChild(newBox);

         相对于JSX，这样的代码可读性并不好，于是React发明了JSX,利用我们熟悉的XML语法来创建DOM

          var root = (
             <div class="box">
               <img src="1.jpg">
            </div>
          )

      2) JSX和JS的区别

         a) 在实际开发中，JSX在产品打包阶段已经编译成纯javascript，JSX并不会给这些JS代码带来任何的性能影响。

         b) JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖。

         c) 语法糖

          指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加代码的可读性，从而减少程序代码出错的机会。

   2. 组件

      1) 在HTML中我们可以把img/div/span等叫做标签，但不能把div和img的组合叫做标签，比如，如下整体我们就不能叫做标签，另外我组合起来的内容复用过程也比较麻烦

      2) 在RN模块中给我们提供了一些基础的组件View/Text等，此时我们也可以把View/Text的组合叫做组件，而且复用起来也比较简单

         var MyView = React.createClass({

            render(){
               return (
                  <View>
                       <Text>HELLO WORLD</Text>
                  </View>
              )
            }
         })




   3. 组件的创建

      这是ES5创建组件的方式,上一篇也提到过，组件的本质是一个对象，每个组件里面都有个render方法，render方法的返回值就是JSX(JSX语法要用小括号括起来),专门用来设置该组件的UI。

      var MyView = React.createClass({

           render(){
               return (
                    <View></View>
               )
           },
        })


二、组件View

   1. 就像开发web应用程序中，需要使用很多的HTML标签。例如div，form。但是在基于DIV+CSS布局的web开发中，最为重要的元素就是div。 DIV是页面布局的基础，是作为容器元素存在的。在React Native中，类似于HTML的DIV的组件就是 View组件。我们在写RN时UI都要叫组件。

   2. RN中的组件父元素可以被子元素的宽和高撑起来，这种方式大大便利了我们的布局方式，而原生的iOS中的UIView达不到这个效果。

   3. View在Web、Android、iOS三种平台上面，View视图分别对应三种平台原生视图，在iOS中对应UIView，在Web中对应< div >标签，Android对应android.view，下面是一个简单示例

 

   4. 注意事项

     a) 通过style属性给View设置样式，样式是一个对象,所以用大括号括起来，并且样式属性之间用逗号分隔

     b) width和height等一些number类型的样式属性都不需要在后面加单位

     c) 每个组件只能有一个根组件, 这个跟XML类似。

     d) 关于View的一些样式属性以及属性类型见下图

        见截图《View的样式属性》

   5. 另外RN的组件也是可以嵌套的，如下

          var MyView = React.createClass({

              render(){

                  return (
                      //如果不设置父元素的宽高、子元素将会把父元素的宽高给撑起来。可以自己试试
                      <View style={  {backgroundColor:"red",width:300,height:300}   }>

                         <View style={{backgroundColor:"blue",width:100,height:100}}></View>

                         <View style={{backgroundColor:"orange",width:200,height:200}}></View>

                      </View>

                  )
              }

          })

          效果见截图《RN的组件嵌套》

三、组件Text

   1. Text组件是RN中的一个基本组件，这个和iOS上的UILabel与Android上的TextView组件相类似，就是用来显示文本的，这个组件除了基本的显示布局之外，可以嵌套使用，设置样式，添加事件处理功能

   2. RN组件要设置文本必须要放置到Text组件中，直接在View组件中放置文本是会报错的

   3. Text的常用属性和方法，切记这是组件的属性不是样式属性

       见截图《Text的样式属性》

   4. Text的常用样式属性

   5. Text的嵌套

      1) HTML中我们可能会可以使用如下的方式给一段文本中的某个词设置特殊样式

         <div>跳楼价,跳楼价,每件只要<span style="color:red;fontSize:40px">998</span></div>

      2) 在RN中我们可以使用Text的嵌套来实现

          <Text>跳楼价,跳楼价,每件只要<Text style={{color:"red",fontSize:40}}>998</Text></Text>

   




四、样式表

     1. 之前我们设置样式就是在组件的style属性里写上他的样式对象，但这种方式跟HTML的内联方式一样，维护起来较为麻烦，RN专门提供了一个StyleSheet帮组我们给元素设置外联样式。写法如下：

       见《styleSheet设置样式》

     2. 我们一般的做法是给每个组件设置一个样式对象，里面的子组件的样式设置在样式对象的属性里。

五、补充

   1. 组件的样式属性和属性的区别

      这第一点一定要搞明白，要不然你在设置属性的时候会很迷惑的。

      <View>
         //numberOfLines是组件的属性   backgroundColor是组件的样式属性
        <Text numberOfLines={4} style={{backgroundColor:red}}>样式属性和属性的区别</Text>
      </View>