JSX语法基础(一)

JSX 语法

说明: jsx语法html代码和js代码可以混写而不需要加引号,可以这样做的原因是React和到jsx代码后会进行编译,使代码正确运行.当然jsx也是有它自己本身的规则:
js代码需要用{}括起来
React编译规则: 遇到<开头就看作是html,遇到{开头则视为js

<!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="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

<script type="text/babel">
    const person = {
        name: 'huruqing',
        age: 108
    }; 
    const element = 
        <h1>
            <p>姓名: {person.name}</p>
            <p>年龄: {person.age}岁</p>
        </h1>;

        ReactDOM.render( 
            element, 
            document.getElementById('root')
        );
</script>

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。
使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器。例子：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Hello React!</title>
      <script src="vendor-js/react.js"></script>
      <script src="vendor-js/react-dom.js"></script>
      <script src="vendor-js/babel-core/browser.min.js"></script>
    </head>
    <body>
      <div id="example"></div>
      <script type="text/babel">
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
      </script>
    </body>
  </html>

其中<h1>Hello,world</h1>就是使用到了jsx语法。HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。如果转化成纯JavaScript 的话，就是:

<script type="text/javascript">
      ReactDOM.render(
        React.DOM.h1(null,'hello,world!'),
        document.getElementById('example')
      );
    </script>

<script> 标签的 type 属性为 text/babel，这是React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方，都要加上 type="text/babel"。
一共用了三个库： react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能， browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。
ReactDOM.render 是 React 的最基本方法，将模板转为HTML语言，并插入指定的 DOM 节点。
JSX基本语法规则：
JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

var arr = [
 <h1>Hello world!</h1>,
 <h2>React is awesome</h2>,
];
ReactDOM.render(
 <div>{arr}</div>,
 document.getElementById('example')
);

这个就是一个简单的html与js混用的例子。arr变量中存在html元素，div中又使用了arr这个js变量。转化成纯javascript的话：

var h1=React.DOM.h1(null,'Hello world!');
var h2=React.DOM.h1(null,'React is awesome');
var div=React.DOM.div(null,h1,h2);
ReactDOM.render(
 div,
 document.getElementById('example')
);

React组件
我们使用jsx来将代码封装成React组件，然后像插入普通 HTML 标签一样，在其他地方插入这个组件。使用React.createClass用于生成一个组件。

var MyComponent=React.createClass({
  render: function() {
   return <h1>Hello world!</h1>;
 }
});
ReactDOM.render(
 <MyComponent />,
 document.getElementById('example')
);

上面代码中，变量 MyComponent就是一个组件类。模板插入 <MyComponent /> 时，会自动生成 MyComponent 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

在react中通常约定组件类的第一个字母必须大写，html标签都是小写。

//要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.getElementById('example'));
//要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/.../});
var myElement = <MyComponent  />;
React.render(myElement, document.getElementById('example'));
* 还有一个注意点：组件类只能包含一个顶层标签，否则会报错。
//var myDivElement =<h1>你好</h1><h1>hello</h1>;
//上述写法是会报错的，要写成只有一个顶层标签：
var myDivElement =<div><h1>你好</h1><h1>hello</h1></div>;

一个动态组件实例：

var MyComponent=React.createClass({
  getInitialState: function() {
       return {clickNum: 0};
  },
  handleClick:function(){
    var num=this.state.clickNum;
    num++;
    this.setState({clickNum:num});
  },
  render: function() {
   return (
      <div>
        <h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>
        <h2 style={{color:'red'}}>点击{this.props.name}次数：{this.state.clickNum}</h2>
      </div>
    );
 }
});
ReactDOM.render(
  <div>
     <MyComponent name="张三" />
     <hr/>
     <MyComponent name="李四" />
  </div>,
 document.getElementById('example')
);

上面代码中定义的MyComponent组件包含属性，状态和事件，是一个简单的比较完整的组件。使用props通过父组件进行传递值，使用state定义组件自己的状态，组件支持的大部分的DOM操作事件。

关于属性props：
class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
直接在标签上使用style属性时，要写成style={{}}是两个大括号，外层大括号是告知jsx这里是js语法，和真实DOM不同的是，属性值不能是字符串而必须为对象，需要注意的是属性名同样需要驼峰命名法。即margin-top要写成marginTop。
this.props.children 不要children作为把对象的属性名。因为this.props.children获取的该标签下的所有子标签。this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。官方建议使用React.Children.map来遍历子节点，而不用担心数据类型

关于状态state：
组件免不了要与用户互动，React 将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。
getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。