阿西河
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 />
本文目录