知识点:
一、JSX 的本质:动态创建组件的语法糖
JSX 在 JS 代码中直接写 HTML 标记
1
2
|
const name = "zhu";
const ele = <h1>HelLo,{name}</h1>;
|
JSX 并不是模板语言,而是一种语法糖;写更简洁的代码,做繁琐的事情;
上面的代码,本质是这样的
1
2
3
4
5
6
7
|
const name = "zhu";
const ele = React.createElement(
'h1', //标记类型
null, //属性
'Hello,', //chilren,以后都是chilren
name //chilren
);
|
复杂的组件转换
下面是一个评论组件的 JSX 写法;
1
2
3
4
5
6
7
8
9
10
11
12
|
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 的写法如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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 本身就是表达式
1
|
const element = <h1>Hello,world</h1>;
|
-
在属性中使用表达式
1
|
<MyCompoent foo={1+2+3+4} />;
|
-
延展属性
1
2
|
const props = {firstName:'Ben',lastName:'Hector'};
const greeting = <Greeting {...props}/>;
|
-
表达式作为子元素
1
|
const element = <li>{props.message}</li>
|
三、JSX 优点
JSX 优点
- 创建方式,非常直观
- 代码创建灵活
- 无需学习新的模板语言
约定:自定义组件以大写子母开头
- React 认为小写的 tag 是原生的 DOM 节点;比如
div
;
- 大写子母开头为自定义组件;
- JSX 标记可以直接使用属性的语法,这种方式不需要遵守大写子母开头的约定;例如
<menu.item />