React的基本使用-JSX、创建视图、插值、条件输出、列表循环、属性表达式

React基本使用

React是用于构建用户界面的 JavaScript 库。
React的特点：

• 以声明式编写 UI，可以让你的代码更加可靠，并且更方便调试。
• 组件逻辑使用 JavaScript 编写而不是模版，可以轻松地在应用中传递数据，而且使状态与 DOM 分离。
• 还可以使用 Node 进行服务器渲染，或者使用 React Native 开发原生移动应用。

ReactDOM
ReactDOM 提供了与浏览器交互的 DOM 功能，
比如：dom 渲染
ReactDOM.render(element, container, callback)
参数1：element，要渲染的内容
参数2：container，要渲染的内容存放的容器
参数3：callback:，渲染后的回调函数

小试牛刀，看看它是怎么使用的吧！
使用之前，先要引入两个js库，如下：

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>

<div id="myDiv"></div>

ReactDOM.render(
   "hello,how are you?",
   document.querySelector("#myDiv"),
   ()=>{
      console.log("成功了");
});

运行结果如下：

虚拟 dom 与组件
虚拟dom与组件是React.提供 React.js 核心功能代码，
用来渲染视图
React.createElement(type,props,children);
参数1是必填，标签名称,
参数2是选填，属性
参数3是选填, 子节点

<div id="second"></div>

     // (1)
        // ReactDOM.render(
        //     React.createElement("h1",null,"标题"),
        //     document.querySelector("#second"),
        //     ()=>{
        //         console.log("succeed");
        //     }
        // );

        // (2)
        let h1 = React.createElement("h1",null,"标题");
        let p1 = React.createElement("p",null,"段落");
        let el = React.createElement("header", 
        {id:"header"},h1,p1);
        ReactDOM.render(
            el,
            document.querySelector("#second"),
            ()=>{
                console.log("succeed");
            }
        );

运行结果如下：

JSX
JSX是基于javascript与xml的扩展语法。

JSX优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速

除了上面两个包之外，还需要下面的js包

  <script src="js/babel.js"></script>

  <div id="third"></div>

    <script type="text/babel">
        ReactDOM.render(
            <header>
                <h1>JSX是基于js与xml的扩展语法</h1>
                <p>我是段落</p>
                <div>我是div</div>
            </header>,
            document.querySelector("#third"),
            ()=>{
                console.log("succeed");
            }
        );     
    </script>

结果如下：

注意：
使用JSX语法，需要加入这两个条件:

• 除了引入react.js与react-dom.js之外，还需引入babel.js
• 在签上加入一个type属性，并给type赋值text/babel

插值表达式
在 JSX 中可以使用 {表达式} 嵌入表达式
表达式：产生值的一组代码的集合

• 变量
• 算术运算
• 函数调用
• ……

示例：

<div id="four"></div>

let data = 10;//原样输出
let dataStr = "JSX渲染";//原样输出
let dataBool = false;//布尔类型的值不输出
let dataUDefined = undefined;//undefined类型的值不输出
let dataArr = ["a","b","c"];//数组元素会将逗号去掉再输出
let dataObj = { //对象类型(不能直接{dataObj}这样使用，会报错)
   name:"汤姆",
   sex:"男",
   age:18
};

ReactDOM.render(
   <header>
        <h1>{data}</h1>
        <p>{dataStr}</p>
        <p>{dataBool}</p>
        <p>{dataUDefined}</p>
        <div>{dataArr}</div>
        <div>{dataObj.name}-
        {dataObj.sex}-{dataObj.age}
        </div>
   </header>,
   document.querySelector("#four"),
   ()=>{
      console.log("succeed");
   }
);

运行结果：

注意：

• JSX不支持语句，比如if、for、while
• 字符串和数字类型的数据会原样输出，渲染到页面上
• 布尔类型、空类型、undefined类型会被忽略，页面上不再渲染

补充一点表达式与语句的区别：

（1）两者的定义区别：一个表达式会产生一个值,它可以放在任何需要一个值的地方，
而语句则是由分号分隔的句子或命令。如果在表达式后面加上一个";"分隔符，这就被称为"表达式语句"。
它表明"只有表达式，而没有其他语法元素的语句"。
（2）两者的功能区别：表达式经常作为函数的参数，它可以放在任何需要一个值的地方。
而语句则是一个行为，循环语句和if语句就是典型的语句，一个程序是由一系列语句组成的。
（3）是否支持嵌套方式的区别：在javascript中所有表达式都有返回值，
表达式都可以嵌套在别的表达式中，但语句不行，语句只能独立的出现。

条件渲染

• 三元运算符
• 逻辑与、逻辑或运算符

<div id="five"></div>

 ReactDOM.render(
    <header>
       // 注释会显示到页面上
       {
       /* 
       使用问号冒号表达式，为true时输出前面的内容，
       为false时输出后面的内容*/
      }
      <h2>{true ? "正确" : "错误"}</h2>
      <h2>{false ? "对" : "错"}</h2>
            
     {
        // 使用逻辑或表达式，为true时，没有内容
     }
     <h3>{true || "JSX渲染"}</h3>
     <h3>{false || "JSX渲染"}</h3>
                
    {
     // 使用逻辑与表达式,为false时，没有内容
    }
    <h4>{true && "返回正确结果"}</h4>
    <h4>{false && "返回正确结果"}</h4>
 </header>,
 document.querySelector("#five"),
 ()=>{
     console.log("succeed");
 }
);

运行结果如下：

列表渲染

• 数组
• 对象

<div id="six"></div>

let data = ["one","two","three"];
function getData() {
   let arr =  []; //存便利后的原数组的元素
   // （1）forEach循环数组元素
   // data.forEach((item=>{
   // 将原数组中的元素遍历添加到li中,再将li添加到新数组中
   //     arr.push(
{item}
);
   // }));

   // （2）map遍历数组
   data.map((item)=>{
       arr.push(<li>{item}</li>);
   });
   return arr;
 }

 ReactDOM.render(
    <ul>
       {getData()}    
   </ul>,
   document.querySelector("#six"),
   ()=>{
      console.log("succeed");
   }
);

运行结果：

注意:

• 注释也会显示到页面上，如果使用插值符号{}将注释包裹住，注释就不会再显示到页面上了
• JSX语法中，注释有单行注释//与多行注释/**/

在属性上使用表达式
JSX 中的表达式也可以使用在属性上。
当在属性中使用 {} 的时候，不能使用引号包含。

<div id="root">
   <!-- 头部 -->
   <div id="header"></div>
   <!-- 容器 -->
   <div id="container"></div>
   <!-- 尾部 -->
   <div id="footer"></div>
</div>

 <style>
     .box{
         width: 400px;
         height: 400px;
         background-color: lightblue;
        }
 </style>

（1）插值在行内样式使用

ReactDOM.render(
 <div>
    <div className="box" 
    style={width:'200px',height:'200px',
    border:'1px solid red'}>
    </div> 
 </div>,
 document.querySelector("#header"),
 ()=>{
   console.log("成功渲染");
 }
 );

（2）以插值符号传入外部样式

 let style = {
     width:'200px',
     height:'200px',
     backgroundColor:'lightgreen'
 };
 ReactDOM.render(
   <div>
     <div className="box" style={style}></div>
   </div>,
   document.querySelector("#header"),
   ()=>{
     console.log("成功渲染");
   }
 );

如果不想让唯一父级容器显示，react中有一个Fragment标签，它不会显示在页面中,只是作为一个包裹标签，包裹着子标签及其内容。

let style = {
   width:'200px',
   height:'200px',
   backgroundColor:'lightgreen'
};
let {Fragment} = React;
ReactDOM.render(
  <Fragment>
    <div className="box" style={style}>
        Fragment就是唯一父级/容器
    </div>
  </Fragment>,
  // header是输出内容的目标元素
  document.querySelector("#header"),
  ()=>{
     console.log("succeed");
  }
);

运行结果：

JSX注意点：

 - 可以作为值使用；
 - 不是字符串；
 - 不是html；
 - 可以配合js表达式一起使用
 - 不可以与js语句一起使用
 - 所有的标签名必须小写；
 - 所有的标签必须闭合(单标签也是)

 - class要写做className
 - style接收的是一个对象，不是字符串
 - 每次只能输出一个标签(一个容器)
 - 唯一父级或唯一容器