浅谈React的JSX语法（一）

痛定思痛。 2022-06-17 12:46 224阅读 0赞

最好的解决方案是：通过JavaScript直接生成模板，然后去构建用户界面。

为了使其变得更简单，有一个非常简单、可选的类似HTML的语法 ，通过函数调用即可生成模板的编译器，称为JSX。

1、为什么用JSX？

不需要为了React使用JSX，可以直接使用JavaScript，但建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。

2、没有 JSX 的 React：

①　可以使用React.createElement()方法（请见：[http://blog.csdn.net/zhouziyu2011/article/details/70493185][http_blog.csdn.net_zhouziyu2011_article_details_70493185]）；

②　可以使用React.createFactory()方法（工厂方法）（请见：[http://blog.csdn.net/zhouziyu2011/article/details/70792179][http_blog.csdn.net_zhouziyu2011_article_details_70792179]）；

③　可以使用React.DOM.\*（React为HTML标签提供的内置工厂方法）（请见：[http://blog.csdn.net/zhouziyu2011/article/details/70792179][http_blog.csdn.net_zhouziyu2011_article_details_70792179]）。

JSX 是一个看起来很像XML的JavaScript语法扩展。

3、JSX的特点：

①　JSX 不是必须用的，可以直接使用JavaScript；

②　JSX 非常小；

③　JSX 类似于HTML，但不完全一样，如HTML对大小写不敏感，JSX对大小写敏感；HTML中不强制要求标签闭合，但JSX要求标签一定要闭合；JSX的组件要以大写字母开头，以便与HTML标签区分。

4、HTML标签 VS React组件

在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以\{ 开头）就用JavaScript规则解析。

React可以渲染HTML标签或React组件类：要渲染HTML标签，只需在JSX里使用小写字母的标签名；要渲染React组件，只需创建一个大写字母开头的本地变量。即，JSX 使用大、小写来区分React组件类和HTML标签。

注意：由于JSX就是JavaScript，class 和 for 等标识符不建议作为属性名，因此React DOM 使用 className 和 htmlFor作为相应的属性名。

5、JSX与原生JavaScript：

JSX形式的语法会编译成原生JavaScript的形式：

JSX形式的语法中的元素、属性和子节点被转换成 原生JavaScript中的React.createElement ()的参数：

①　JSX：

React.createElement('a', {href: 'https://www.baidu.com'}, 'Hello React!')

②　原生JavaScript：

<a href="https://www.baidu.com">Hello React!</a>

React.createClass创建组件类时，可以通过displayName属性定义组件类的显示名称，但这是可选的，当显示名称没有定义时，JSX 会根据变量赋值来推断组件类的显示名称，即为组件类赋值的变量名称，因此，一般不显式设置displayName属性。

①　JSX：

var Box = React.createClass({
    	...
    });

②　原生JavaScript：

var Box = React.createClass({
    	displayName: "Box",
    	...
    });

6、命名组件

如果构建一个有很多子组件的组件，如表单，最终可能会得到许多的变量声明。

因此，命名组件支持单一的组件，其他子组件作为其属性。

①　JSX：

var FormBox = React.createClass({ ... });
    FormBox.Label = React.createClass({ ... });
    FormBox.Input = React.createClass({ ... });
    FormBox.Button = React.createClass({ ... });

②　原生JavaScript：

var FormBox = (
    	React.createElement(FormBox, null,
        	React.createElement(FormBox.Label, null,
    			React.createElement(FormBox.Input, null),
    			React.createElement(Form.Button, null)
        	)
      	)
    );

注意：命名组件仅在 v0.11 及以上可用。

7、JavaScript表达式

JSX遇到大括号就当作JavaScript表达式来看待。

①　属性表达式：

要使用JavaScript表达式作为属性值，只需把表达式用一对大括号\{\}包起来，不要用引号""。

ReactDOM.render(  
        	<TimeBox time={new Date().getHours() > 12 ? new Date().getHours() - 12 + "PM": new Date().getHours() + "AM"} />, 
        	document.getElementById('timeBox')  
    );

②　Boolean属性：

省略一个属性的值会导致JSX将其当作 true，要传值 false必须使用属性表达式。这常出现于HTML表单元素中，如disabled, required, checked 和 readOnly等属性。

eg1：

ReactDOM.render(  
        	<input type="button" value="submit" disabled />,  
        	document.getElementById('timeBox')  
    );

等价于：

ReactDOM.render(  
        	<input type="button" value="submit" disabled="true" />,  
        	document.getElementById('timeBox')  
    );

也等价于：

ReactDOM.render(  
        	<input type="button" value="submit" disabled={true} />,  
        	document.getElementById('timeBox')  
    );

eg2：

ReactDOM.render(  
        	<input type="button" value="submit"/>,  
        	document.getElementById('timeBox')  
    );

等价于：

ReactDOM.render(  
        	<input type="button" value="submit" disabled="false" />,  
        	document.getElementById('timeBox')  
    );

也等价于：

ReactDOM.render(  
        	<input type="button" value="submit" disabled={false} />,  
        	document.getElementById('timeBox')  
    );

③　子节点表达式：

同样地，JavaScript 表达式可用于描述子结点：

8、注释

当要在一个标签的子节点块添加注释时，要用 \{\} 包围要注释的部分。

[http_blog.csdn.net_zhouziyu2011_article_details_70493185]: http://blog.csdn.net/zhouziyu2011/article/details/70493185
[http_blog.csdn.net_zhouziyu2011_article_details_70792179]: http://blog.csdn.net/zhouziyu2011/article/details/70792179