思考一下这样的变量声明：
const element = <h1>Hello, world!</h1>;
上面这个好玩的标记语法既不是字符串也不是html，它被称之为JSX，是一种对javascript的扩展。我们建议你使用它来描绘界面上的UI组件。JSX或许会使你想起模版语言，但是它却拥有javascript的强大的力量。
用JSX写出的这种声明被称之为“elements”，我们将会在下一个章节将它渲染到DOM树上，接下来，你将会了解到JSX怎么使用，明白它具有梦幻般的魔力的原因😊😊。
1。JSX中可以嵌入javascript
你可以将任何javascript代码用大括号{}包起来嵌入到JSX里面，举个例子：2+2，user.name，和formatName(user)都是OK的。
<code>
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
</code>
在CodePen上试试吧
上面的代码将它分为多行来写只是为了更清晰的阅读，这并不是强制的，所以在实际写代码中符合规则就行，但是我们仍要建议你用小括号()把JSX包起来，因为要是不这么做的话可能会有暗坑。
2。JSX可以被看作一般的javascript变量
在解释器解析用JSX写的代码后，会把它完全转换成javascript代码，这就意味着你可以在JSX里面用if判断语句，for循环语句，将其指定为变量，参数，或者返回值等等。
<code>
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
</code>
3。可以指定JSX的参数
参数可以用字符串形式指定：
const element = <div tabIndex="0"></div>;
也可以用javascript表达式指定：
const element = <img src={user.avatarUrl}></img>;
4。指定JSX的孩子节点
如果这个JSX没有孩子的话，直接用/>结束：
const element = <img src={user.avatarUrl} />;
如果这个JSX包含孩子的话：
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
警告：
因为JSX更接近于javascripte而不是html，所以ReactDom标签的参数名用驼峰命名法命名而不是html标签的命名发，比如：html里面的class变成了className，tabindex变成了tabIndex。
5。JSX可以防止注入攻击
在JSX插入用户输入的值是非常安全的：
const title = response.potentiallyMaliciousInput; // 这样是安全的: const element = <h1>{title}</h1>;
在默认状态下，ReactDom会忽略所以插入JSX的值直到渲染它们之前。因此这种机制确保了你不会注入任何在你书写应用时不确定的值。所以东西都会被转换成字符串直到它们被渲染。它确保了XSS攻击。
6。JSX实际上就是Javascript中的对象
Babel解释JSX的时候会调用React.createElement()这个函数。下面的这两个例子是一样的：
one：
const element = ( <h1 className="greeting"> Hello, world! </h1> );
two:
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
React.createElement()会对你写的代码进行一些检测以便于你的代码不出bug，但实际上还是将JSX转换成了一个对象，向下面这样：
const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };
这个对象就被称为React elements。你可以把它描述为你想在屏幕上显示的元素。React用这些元素来构建DOM树并且保证它们可以实时更新。我们将会在下一个章节将这些element渲染到DOM树上😊😊😊。
网友评论