Skip to main content

Close to JSX

const element = <h2>Hello World</h2>;

如你所见，这即像 JavaScript 又像 HTML 的家伙就是 JSX🙄

What is JSX#

JSX is a syntax extension to JavaScript,it comes with the full power of JavaScript.

Why JSX#

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合， 因此并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

Use JSX#

嵌入变量#

  • 情况一：当变量是 Number、String、Array 类型时，可以直接显示
  • 情况二：当变量是 null、undefined、Boolean 类型时，内容为空； 如果希望可以显示 null、undefined、Boolean，那么需要转成字符串； 转换的方式有很多，比如 toString 方法、和空字符串拼接，String(变量)等方式；
  • 情况三：对象类型不能作为子元素（not valid as a React child）

绑定属性#

在 JSX 中使用内联样式

连接符改用驼峰
<div style={{ fontSize: "30px", color: "red", backgroundColor: "blue" }}>  我是文本</div>

监听事件#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

之所以要通过bind 显示绑定 this，是因为 btnClick 函数并不是我们主动调用的，当 button 被点击 ，React 内部调用了 btnClick 函数； 而它内部调用时，并不知道要如何绑定正确的 this.

参数传递#

被调用函数用不到 this，那么直接传入函数就可以获取到 event 对象；

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

有更多参数时，我们最好的方式就是传入一个箭头函数，返回主动执行的事件函数，并且传入相关的其他参数；

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

本质#

JSX 通过 Babel 解析成 JavaScript 代码，揭露其本质是 React.createElement(component, props, ...children)函数。

<div className="App">  <header className="header">    <h1 title="标题">我是网站标题</h1>  </header>  <section className="context">    <p>文本</p>    <p>脚本</p>  </section>  <footer className="header">    <div title="页脚">我是网站页脚</div>  </footer></div>
通过Babel解析后的JSX
/*#__PURE__*/React.createElement(  "div",  {    className: "App",  },  /*#__PURE__*/ React.createElement(    "header",    {      className: "header",    },    /*#__PURE__*/ React.createElement(      "h1",      {        title: "\u6807\u9898",      },      "\u6211\u662F\u7F51\u7AD9\u6807\u9898"    )  ),  /*#__PURE__*/ React.createElement(    "section",    {      className: "context",    },    /*#__PURE__*/ React.createElement("p", null, "\u6587\u672C"),    /*#__PURE__*/ React.createElement("p", null, "\u811A\u672C")  ),  /*#__PURE__*/ React.createElement(    "footer",    {      className: "header",    },    /*#__PURE__*/ React.createElement(      "div",      {        title: "\u9875\u811A",      },      "\u6211\u662F\u7F51\u7AD9\u9875\u811A"    )  ));