从零开始学习react-02

第二节 JSX语法

JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件。第02节的HelloWorld程序从本质上能完成所有的工作。只是有一些开发效率问题，比如JavaScript代码与标签混写在一起、缺乏模板支持等。而使用JSX，则可以有效解决这些问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./common/react.js"></script>
    <script src="./common/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>


</head>
<body>
    <div id="reactContainer"></div>


    <script type="text/babel">
        var HelloComponent =React.createClass({
            render:function(){
                return <h1>Hello World</h1>;
            }
        });

        ReactDOM.render(
            <HelloComponent/>,
            document.getElementById('reactContainer')
        )
    </script>
</body>
</html>

jsx好处

可以使用熟悉的语法仿照HTML来定义虚拟DOM。
程序代码更加直观。
于JavaScript之间等价转换，代码更加直观。

JSX中的表达式

JSX是支持表达式的，你只要使用{}括号，就可以使用表达式了。我们把HelloWorld程序改写成使用表达式的。

我们把上边的程序改写成带表达式的形式。

var HelloComponent =React.createClass({
    render:function(){
        return <h1>Hello {this.props.name?this.props.name:'world'}</h1>;
    }
});

ReactDOM.render(
    <HelloComponent name="jspang"/>,
    document.getElementById('reactContainer')
)

需要注意的是表达式不支持if…else这样的语句，但是支持三元运算符和二元运算符。

JSX上的数组输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>进阶JSX语法</title>
</head>
<body>
  <div id="reactContainer"></div>
  <script src="./common/react.js"></script>
  <script src="./common/react-dom.js"></script>
  <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  <script type="text/babel"> //练习使用,不建议项目使用
    let  names = ['狄仁杰','后羿','孙尚香'];
    var HellowComponent = React.createClass({
      render:function () {
        return <div>
            {
              names.map(function(name){
                return <div key={name}>
                    Hello, {name}
                </div>
              })
            }
          </div>
      }
    })
    ReactDOM.render(<HellowComponent/>,document.getElementById('reactContainer'))
  </script>
</body>
</html>

上边的代码，我们使用了ES6的语法maps来进行进行循环，循环时需要注意的是，新版本的React需要使用key，如果没有key虽然会出来效果，但是控制台会包错。key的作用是生成虚拟DOM时，需要使用key来进行标记,DOM更新时进行比较

在数组中可以直接使用JSX语法

  <script type="text/babel"> //练习使用,不建议项目使用
  /*
     直接在数组中写html
  */
    let  arr = [
      <h1 key="1">Hello js</h1>,
      <h1 key="2">Hello react</h1>
    ];

    ReactDOM.render(<div>{arr}</div>,document.getElementById('reactContainer'))
  </script>

JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

总结：通过两节课的我们对JSX有了初步认识，虽然React可以不使用任何其他插件，但是JSX的好处太多，React也鼓励使用，在实际工作中也是百分百使用的，所以以后的课程中我们都会使用JSX。