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语法。有三种方法可以表达条件:
-
Using ternary operator
-
Using if/else outside of JSX
-
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