React JSX 特点
   1 分钟阅读

知识点:

  • JSX 的本质
  • 如何使用 JSX
  • JSX 优点

一、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 />