React的JSX语法

React的JSX语法

1. 概念

   • HTML语言直接写在JavaScript语言中，不加任何引号，这就是JSX语法。它允许HTML和JavaScript混写

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

   • 它是一个JavaScript的语法扩展。建议在 React 中配合使用 JSX，JSX 可以很好地描述UI应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能

   • React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中

2. 环境配置

   • 非模块化环境：babel-standalone，执行时编译，速度比较慢，只适用于开发环境测试
   • 模块化环境：结合webpack配置babel响应的工具完成预编译，浏览器执行的是预编译的结果
   • babel REPL 环境

3. 基本语法规则

   • 换行或者多标签，推荐加括号，避免JavaScript自动分号不往后执行的问题

     <div ></div>
     <script src="node_modules/@babel/standalone/babel.js"></script>
     <script src="node_modules/react/umd/react.development.js"></script>
     <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
     <script type="text/babel">
         function getEl() {
             return (
                 <div>
                     <h1>hello world</h1>
                     <p>hello react</p>
                 </div>
             )
         }
         ReactDOM.render(getEl(),document.getElementById('app'))
     </script>
     

   • 单标签必须以 /> 结束

     <script src="node_modules/@babel/standalone/babel.js"></script>
     <script src="node_modules/react/umd/react.development.js"></script>
     <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
     <script type="text/babel">
         function getEl() {
             return (
                 <div>
                     <b />hello react
                 </div>
             )
         }
         ReactDOM.render(getEl(),document.getElementById('app'))
     </script>
     

   • 在JSX中嵌入JavaScript表达式：遇到<按html解析，遇到 { 按JavaScript解析

     <div ></div>
     <script src="node_modules/@babel/standalone/babel.js"></script>
     <script src="node_modules/react/umd/react.development.js"></script>
     <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
     <script type="text/babel">
         const user ={
             name:'eric',
             age:18,
             gender:0
         }
         const element = (
             <div>
                 <h3>姓名：{user.name}</h3>
                 <h3>年龄：{user.age}</h3>
                 <h3>性别：{user.gender}</h3>
                 <h3>三元表达式：{user.gender === 0 ? '男': '女'}</h3>
                 <h3>数字相加：{ 1 + 1}</h3>
                 <h3>字符串拼接：{'hello' + 'world'}</h3>
                 <h3>es6字符串拼接：{`hello' ${user.name}`}</h3>
             </div>
         )
         ReactDOM.render(element,document.getElementById('app'))
     </script>
     

   • 注释：推荐单行注释

     <div ></div>
     <script src="node_modules/@babel/standalone/babel.js"></script>
     <script src="node_modules/react/umd/react.development.js"></script>
     <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
     <script type="text/babel">
         const element = (
             <div>
                 <h3>hello</h3>
                 {
                     //注释1
                     //注释2
                 }
                 <h3>hello</h3>
                 {/*注释3*/}
                 <h3>hello</h3>
                 {
                     /*注释4*/
                     /*注释5*/
                 }
             </div>
         )
         ReactDOM.render(element,document.getElementById('app'))
     </script>
     

   • 在JavaScript中嵌入JSX：在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。

     也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX

     <div ></div>
     <script src="node_modules/@babel/standalone/babel.js"></script>
     <script src="node_modules/react/umd/react.development.js"></script>
     <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
     <script type="text/babel">
         const user ={
             name:'eric',
         }
         function getHi(user) {
             if (user) {
                 return <h1>hello {user.name}</h1>
             }
             return <h1>hello world</h1>
         }
         const element = getHi(user)
         //const element = getHi()
         ReactDOM.render(element,document.getElementById('app'))
     </script>
     

   • JSX中特定属性

     //可以通过使用引号，来将属性值指定为字符串字面量
     const element = <div tabIndex="0"></div>;
     //也可以使用大括号，来在属性值中插入一个 JavaScript 表达式:在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号
     const element = <img src={user.avatarUrl}></img>;
     //因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定
     const element = (
         <div className="box">
             <laber htmlFor="name">姓名</laber>
             <input type='text'  />
         </div>
     )
     

   • JSX 防止注入攻击：React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击

     const title = response.potentiallyMaliciousInput;
     // 直接使用是安全的：
     const element = <h1>{title}</h1>;
     

   • JSX 表示对象：“React 元素”描述了你希望在屏幕上看到的内容，React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新

     //方式1
     const element = (
       <h1 className="greeting">
         Hello, world!
       </h1>
     );
     
     //方式2
     const element = React.createElement(
       'h1',
       {className: 'greeting'},
       'Hello, world!'
     );
     
     //React.createElement() 的处理（这是简化过的结构）：变为 “React 元素”
     const element = {
       type: 'h1',
       props: {
         className: 'greeting',
         children: 'Hello, world!'
       }
     };