[JavaScript知识库]React学习（1）- JSX

React学习（2）- React组件

React学习（3）- 组件交互

什么是JSX？

先看这段既像JavaScript又像HTML的代码，这段代码等号后面的这部分<h1>Hello, world!</h1>就叫JSX。

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

简单来说，用了JSX 就可以在JavaScript文件里写HTML代码了，而且在JSX里可以调用JavaScript里的参数。

具体定义可以参考：Introducing JSX – React

嵌套JSX元素

在JSX中，为了使代码能够被编译，JSX表达式必须正好有一个最外层元素

比如下面这段代码，就不可行，因为有两个同级的<p>

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

需要加一个最外层元素：(不一定必须是<div></div>，也可以是其他的)

const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

渲染JSX

JSX是JavaScript的一个语法扩展，它被用来创建DOM元素，然后在React DOM中呈现。

渲染一个JSX表达式意味着使其出现在屏幕上。`ReactDOM.render()`是渲染JSX的最常用方法。它接受一个JSX表达式，创建一个相应的DOM节点树，并将该树添加到DOM中。这是使JSX表达式出现在屏幕上的方法。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

ReactDOM.render的第一个参数是要被编译和渲染的JSX表达式，第二个参数是我们想把它附加到的HTML元素。

<main id="app">
  <h1>Render me!</h1>
</main>

多行JSX表达式

当有多行JSX表达式的时候，需要使用括号（）

const myList = (
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
);

JSX属性

和HTML一样，也可以在JSX中添加属性。

const example = <h1 id="example">JSX Attributes</h1>;

也可以用嵌入的JavaScript设置JSX属性值

const introClass = "introduction";
const introParagraph = <p className={introClass}>Hello world</p>;

在JSX中嵌入JavaScript

嵌入的JavaScript表达式必须用大括号包裹起来

JSX标签之间的任何文本将被作为文本内容阅读，而不是作为JavaScript。为了使文本作为JavaScript被阅读，代码必须嵌入大括号{ }之间。

当用大括号{}包裹起1010时，相当于告诉编译器这是一个JavaScript表达式，所以会执行10*10的计算，下面这段代码会被渲染成 <h1>100</h1>。

let expr = <h1>{10 * 10}</h1>;
// 会被渲染成 <h1>100</h1>


<p>{ Math.random() }</p>
// 上面的JSX将被呈现为这样： 
<p>0.88</p>

虚拟DOM

React使用Virtual DOM，它可以被认为是DOM的一个蓝图。

ReactDOM.render()的一个特殊之处在于，它只更新发生变化的DOM元素。这意味着，如果你连续两次渲染完全相同的东西，第二次渲染将不做任何事情。

当React元素发生任何变化时，虚拟DOM会被更新。虚拟DOM找到它和DOM之间的差异，并只重新呈现DOM中改变的元素。这使得虚拟DOM比更新整个DOM更快、更有效。

const hello = <h1>Hello world</h1>;
 
// 这将在屏幕上添加 "Hello world":
 
ReactDOM.render(hello, document.getElementById('app'));
 
// 这不会起任何作用:
 
ReactDOM.render(hello, document.getElementById('app'));

JSX className

在JSX中要用className代替class

这是因为JSX要被翻译成JavaScript，而class在JavaScript已经被占用了。

<h1 class="big">Hey</h1> //HTML
<h1 className="big">Hey</h1> //JSX

JSX && 条件语句

在JSX中，&&通常用于根据一个布尔条件来渲染一个元素。

如果&&左边的表达式评估为true，那么&&右边的JSX将被渲染。然而，如果第一个表达式为false，那么&&右边的JSX将被忽略，不会被呈现。

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

JSX条件式

JSX不支持嵌入式JavaScript中的if/else语法。有三种方法可以表达条件：

1. Using ternary operator

2. Using if/else outside of JSX

3. Using && operator.?

//方法1：Using ternary operator 
const headline = (
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);
 
// 方法2：Using if/else outside of JSX 
let text;
 
if (age >= drinkingAge) { text = 'Buy Drink' }
else { text = 'Do Teen Stuff' }
 
const headline = <h1>{ text }</h1>
 
// 方法3：Using && operator. Renders as empty div if length is 0
const unreadMessages = [ 'hello?', 'remember me!'];
 
const update = (
  <div>
    {unreadMessages.length > 0 &&
      <h1>
        You have {unreadMessages.length} unread messages.
      </h1>
    }
  </div>
);

JSX元素事件监听器

JSX元素可以有event listeners，就像HTML元素可以一样。在React中编程意味着不断要和event listener打交道。

// Basic example
const handleClick = () => alert("Hello world!");
 
const button = <button onClick={handleClick}>Click here</button>;
 
// Example with event parameter
const handleMouseOver = (event) => event.target.style.color = 'purple';
 
const button2 = <div onMouseOver={handleMouseOver}>Drag here to change color</div>;

JSX .map()方法

数组方法map()在React中经常出现。养成与JSX一起使用它的习惯是很好的。

如果你想从一个给定的数组中创建一个JJSX元素的列表，那么就用map()方法覆盖数组中的每个元素，为每个元素返回一个列表项。

const strings = ['Home', 'Shop', 'About Me'];
 
const listItems = strings.map(string => <li>{string}</li>);
 
<ul>{listItems}</ul>

JSX空元素语法

在JSX中，像<p></p>, <div></div>这样的元素不需要加斜线，而像<br><img>这样的空元素必须在其标签的末尾用斜线关闭：

<br />
<img src="example_url" />

JSX key属性

在JSX元素的列表中，key属性被用来唯一地识别各个元素。它像其他属性一样被声明。

key可以帮助提高性能，因为它们允许React跟踪单个列表项目是否应该被渲染，或者单个项目的顺序是否重要。

<ul>
  <li key="key1">One</li>
  <li key="key2">Two</li>
  <li key="key3">Three</li>
  <li key="key4">Four</li>
</ul>

参考：CodeCademy