React学习：JSX

什么是JSX？

（1）JSX 是 JavaScript 的一种扩展语法。它具有 JavaScript 的全部能力。
（2）JSX 可以生成 React “元素”。
（3）JSX 也是一个表达式。特别在编译之后，JSX 表达式就变成了常规的 JavaScript 对象。

从本质上讲，JSX 只是为 React.createElement(component, props, …children) 函数提供的语法糖。

JSX长什么样？

const element = <h1>Hello, bty</h1>;

是不很像js和html的结合产物。

---

1、JSX 中嵌入表达式

要想在JSX中嵌入js表达式，就把js表达式放在 花括号 “{}” 里即可。

这里用函数作为表达式举例。
(1)无参数

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

<script type="text/babel">
	   function myfun(){
		  //return 带不带括号都可
	     return (<span>bty</span>); 
	     
	     //或者： return <span>bty</span>;
	     //或者： return 'bty'; 
	     //或者： return ('bty');
	     //报错： return bty; 
	   }
	   const element = (
	     <h1>hello,{myfun()}</h1>
	   );
	   ReactDOM.render(
	     element,
	     document.getElementById('root')  
	   );
 </script> 

注意：上面myfun函数的return值，只要带html标签(eg:上面用的< span>)实质就是一个JSX。

输出：hello,bty

(2)有参数

<div id="root"></div>
    <script type="text/babel">
      function myfun(user){
	      //return 带不带括号都可
        return (<span>{user.name}! my age：{user.age}</span>); 
        //或者： return <span>{user.name}! my age：{user.age}</span>;
        //或者： return user.name + '! my age：' + user.age; 
        //或者： return (user.name + '! my age：' + user.age); 
      }

      //const user必须在const element之前，否则const element会读不到user对象
      const user = {
        name:'bty',
        age:'12'
      };
	 
	 //element里拆成多行，便于阅读
      const element = (
        <h1>
	        hello,{myfun(user)}
	    </h1>
      );
      
      ReactDOM.render(
        element,
        document.getElementById('root')  
      );
    </script> 

注意：上面myfun函数的return值，只要带html标签(eg:上面用的< span>)实质就是一个JSX。

输出：hello,bty! my age：12

---

2、JSX 也是一个表达式

编译之后，JSX 表达式就变成了常规的 JavaScript 对象
【说白了就是：JSX编译后就成了对象，然后就能做对象能做的事】
这意味着你可以在 if 语句或者是 for 循环中使用 JSX，用它给变量赋值，当做参数接收，或者作为函数的返回值。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

---

3、用 JSX 指定属性值

您可以使用双引号来指定字符串作为属性值：

const element = <div tabIndex="0"></div>;

您也可以用花括号嵌入一个 JavaScript 表达式作为属性值:

const element = <img src={user.avatarUrl}></img>;

在属性中嵌入 JavaScript 表达式时，不要使用引号来包裹大括号。否则，JSX 将该属性视为字符串而不是表达式。
对于字符串值你应该使用引号，对于表达式你应该使用大括号，但两者不能同时用于同一属性。

---

4、用 JSX 指定子元素

如果是空标签，您应该像 XML 一样，使用 />立即闭合它：

const element = <img src={user.avatarUrl} />;

JSX 标签可能包含子元素：这样还方便阅读

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

---

5、命名方式

比起 HTML ， JSX 更接近于 JavaScript ， 所以 React DOM 使用驼峰(camelCase)属性命名约定, 而不是HTML属性名称。

例如，classname 在JSX中变为className，tabindex 变为 tabIndex。

---

6、JSX 防止注入攻击

在JSX中嵌入用户输入是安全的

const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = <h1>{title}</h1>;

默认情况下， 在渲染之前, React DOM 会格式化JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

---

7、JSX 表示对象

下面的两个例子是是完全相同的：

//element就是React元素
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

//Babel 将JSX编译成 React.createElement() 调用。
//element就是React元素
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

---

React.createElement() 会执行一些检查来帮你编写没有bug的代码，但基本上它会创建一个如下对象：

// 注意: 这是简化的结构
//element就是React元素
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这些对象被称作“React元素”。你可以把他们想象成为你想在屏幕上显示内容的一种描述。
React会读取这些对象，用他们来构建DOM，并且保持它们的不断更新。

---

注意：Booleans, Null, 和 Undefined 被忽略

false，null，undefined，和 true 都是有效的 children(子元素) 。但是并不会被渲染，下面的JSX表达式渲染效果是相同的：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

如果在输出中想要渲染 false ，true，null 或者 undefined ，你必须先将其转化为字符串:

eg:

<div>
  {String(null)},{String(true)},{String(undefined)}
</div>

输出：null,true,undefined

若改为

<div>
  {String(null),String(true),String(undefined)}
</div>

则输出：undefined

---

小结：写react其实就是在写js

下面分别是在js和react中插入一个dom节点的例子：

• JS

const node = document.createElement("P"),
	  textnode = document.createTextNode('hello word');
	  
node.appendChild(textnode);
document.getElementById('root').appendChild(node);

• React

const htmlStr = <p>hello word</p>;
ReactDOM.render(htmlStr, document.getElementById('root'));

其实写react本质就是在写js，只是js插入dom节点时比较繁琐，而react的则化繁为简，仅用一句话（起名为JSX）

就完成了js下面三句的功能

当然，其实上面react的那一句话最终还是会编译转化为下面js的三句。