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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了