阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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