jsx

Posted 2020-10-05 不了无明

JSX 执行更快，因为它在编译为 javascript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。

1. React JSX 代码可以放在一个独立文件上

   <script type="text/babel" src="_react.js"></script>
   
   _react.js:
   ReactDOM.render(
     <h1>Hello, world!</h1>,
     document.getElementById(‘example‘)
   );

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

   var arr = [
     <h1>标题</h1>,
     <h2>副标题</h2>,
   ];
   ReactDOM.render(
     <div>{arr}</div>,//代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它
     document.getElementById(‘example‘)
   );

3. 添加自定义属性需要使用 data- 前缀，由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。React DOM 使用 className 和 htmlFor 来做对应的属性。
4. React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 

   var myStyle = {
       fontSize: 100,
       color: ‘#FF0000‘
   };
   ReactDOM.render(
       <h1 style = {myStyle}>菜鸟教程</h1>,
       document.getElementById(‘example‘)
   );

5. 表达式写在花括号 {} 中
6. 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代
7. 注释需要写在花括号中{/*注释...*/}.在标签内部的注释需要花括号在标签外的的注释不能使用花括号

   ReactDOM.render(
       /*注释 */
       <h1>{/*注释*/}</h1>,
       document.getElementById(‘example‘)
   );

8. 要渲染 React 组件，只需创建一个大写字母开头的本地变量。

   var MyComponent = React.createClass({/*...*/});
   var myElement = <MyComponent someProperty={true} />;
   ReactDOM.render(myElement, document.getElementById(‘example‘));