React JSX 特点
🌙
手机阅读
本文目录结构
知识点:
- JSX 的本质
- 如何使用 JSX
- JSX 优点
一、JSX 的本质:动态创建组件的语法糖
JSX 在 JS 代码中直接写 HTML 标记
const name = "zhu";
const ele = <h1>HelLo,{name}</h1>;
JSX 并不是模板语言,而是一种语法糖;写更简洁的代码,做繁琐的事情;
上面的代码,本质是这样的
const name = "zhu";
const ele = React.createElement(
'h1', //标记类型
null, //属性
'Hello,', //chilren,以后都是chilren
name //chilren
);
复杂的组件转换
下面是一个评论组件的 JSX 写法;
class CommentBox extends React.Component {
render (){
return (
<div className="comments">
<h1>Comments ({this.state.items.length})</h1>
<CommentList data={this.state.items}/>
<CommentForm />
</div>
);
}
}
ReactDOM.render(<CommentBox topicOd="1"/>,mountNode);
转换为 JS 的写法如下
class CommentBox extends React.Component {
render (){
return React.createElement(
'div',
{className:"comments"},
React.createElement(
'h1',
null,
'Comments('
this.state.items.length,
')'
),
React.createElement(CommentList,{data:this.state.items}),
React.createElement(CommentForm,null),
)
}
}
ReactDOM.render(React.createElement(CommentBox,{topicOd:"1"}),mountNode);
二、如何使用 JSX
-
JSX 本身就是表达式
const element = <h1>Hello,world</h1>;
-
在属性中使用表达式
<MyCompoent foo={1+2+3+4} />;
-
延展属性
const props = {firstName:'Ben',lastName:'Hector'}; const greeting = <Greeting {...props}/>;
-
表达式作为子元素
const element = <li>{props.message}</li>
三、JSX 优点
JSX 优点
- 创建方式,非常直观
- 代码创建灵活
- 无需学习新的模板语言
约定:自定义组件以大写子母开头
- React 认为小写的 tag 是原生的 DOM 节点;比如
div
; - 大写子母开头为自定义组件;
- JSX 标记可以直接使用属性的语法,这种方式不需要遵守大写子母开头的约定;例如
<menu.item />