React——JSX学习

React JSX

React 使用 JSX 来替代常规的 JavaScript。它允许HTML语言直接写在JS语言中，不用加任何引号，这就是JSX，允许HTML和JS 混写。它有以下优点：

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

const element = <h1>Hello, world!</h1>;

JSX 是在 JavaScript 内部实现的。我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。

环境配置

非模块化环境

• babel-standalone
  执行时编译，速度比较慢；只适用于开发测试环境

模块化环境

• 结合webpack配置babel响应的工具完成预编译
• 浏览器执行的式预编译结果
• Babel REPL赋值查看编译结果（适用于在线测试）

基本语法规则

• 必须只能有一个根节点
• 多标签写到一个括号中，防止JS自动分号不往后执行
• 遇到HTML标签就用HTML规则解析（单标签不能省略结束标签）
• 遇到代码块就用JS规则解析
• JSX允许直接在模板中插入一个JS变量（如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中）
• 单标签必须结束

JSX注释：

  {/*      单行注释       */}
  
 {/*
   *多行注释
   *多行注释
   */}

  {
   //不推荐使用------------------
   }

使用

1.JSX中绑定 JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
{/*输出2*/}

2.JS语法中使用JSX标签

function getGreeting (user) {
     if (user) {
     return <h1>hello {user.name}</h1>
   }
      return <h1>Hello Stranger</h1>
    }
    
    const element = getGreeting(null)

3.JSX属性绑定

    // jsx 中本质还是 JavaScript
    // class 在 JavaScript 中是一个关键字
    // 所以在这里写 class 的时候要改为 className
    const element = (
    
    //JSX声明子节点时必须有且只有一个根节点；子节点可以包含子节点
    
      <div className="box" title={user.name}>
        <div>
          <label htmlFor="name">用户名</label>
          {/* jsx 单标签必须结束 */}
          <input type="text" id="name" />
        </div>
        <div>
          <input type="checkbox" defaultChecked />
        </div>
        <div>
          <input type="text" defaultValue="hello" />
        </div>
      </div>
    )

    
    ReactDOM.render(
      element,
      document.getElementById('app')
    )

4.三元运算
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>

//输出True!

列表渲染

JSX 允许在模板中插入数组，数组会自动展开所有成员

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="app"></div>
    <script type="text/babel">
      const fruits=[
          <li key="1"></li>,
          <li key="2"></li>
             ];
              const todos=[
          {
               id:1,
               title:'吃饭'
             },
          {
               id:2,
               title:'吃饭'
             },
          {
               id:3,
               title:'吃饭'
             }];
   /*
    *遍历
    * const todoLis=[];
    * todos.forEach(item=>{
    *  todoLis.push(<li key={item.id}>{item.title}</li>)
    *  });
    */
const todoLis=todos.map(item=>{
  return   <li key={item.id}>{item.title}</li>;
});
       const element=(
         <div>
{/*在JSX中，绑定数组成员会直接把成员渲染到这里*/}
           <ul>{fruits)</ul>

{/*直接绑定一个数据*/}
          <ul>{todoLis)</ul>

   {/*直接在标签中刘表渲染*/}
          <ul>{
                todos.map(item={
                      return   <li key={item.id}>{item.title}</li>;
              });
           }            
         </ul>
         </div>
      );
     ReactDOM.render(element,document.getElementById('app'));