React 基础 - JSX ｜ 8月更文挑战

jsx是什么以及如何理解jsx？

jsx转js对象的babel转换器

官方：

• jsx是JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。JSX 可能会让你想起某种模板语言，但是它具有    JavaScrip 的全部能力。
• JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。

理解：

• 前端在浏览器可以解析识别的内容是html，css，js。jsx不管是一个什么样的jsx对象，最终都还是需要渲染成html结构。
• react也称之为声明式UI编程，前端开发人员习惯UI的书写存在html的风格。这也是因为更好的推广，如果没有jsx的语法，书写标签还需要调用方法去生成，估计会夭折。
• 具有javascript的全部能力，在于react中会将jsx语法最终转译成js对象。这是react语法的词法分析。React.createElement
• react内部为虚拟dom机制，jsx对象是一种折中的处理方式，既对开发使用者有好，也可以通过babel进行转换成js对象。

jsx的好处是什么？

react编译执行上

• JSX 执行更快[执行的并不快，react的虚拟dom速度快而已]，因为它在编译为 JavaScript 代码后进行了优化
• JSX 是类型安全的，在编译过程中就能发现错误
• 抽象了 React Element 的创建过程；
• 使用 JSX 编写模板更简单快速

开发人员使用上

• 允许使用熟悉的语法来定义 HTML 元素树；
• 提供更加语义化且移动的标签；
• 程序结构更容易被直观化；
• 可以随时掌控 HTML 标签以及生成这些标签的代码；
• 是原生的 JavaScript。

使用jsx语法的注意点是什么？

• 渲染HTML标签，声明变量采用首字母小写
• 标签的属性class和for，需要写成className和htmlFor。tabindex 则变为 tabIndex。因为两个属性是JavaScript的保留字和关键字
• JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析
• 表达式用{}包起来，不要加引号，加引号就会被当成字符串
• style属性： style={{color:'red'}}
• React默认会进行HTML的转义，避免XSS攻击，如果要不转义 dangerouslySetInnerHTML={{__html: content}}
• 标签必须要闭合
• 自定义属性

自定义属性

除了标签特有的属性外，我们也可以自定义一些属性。但这些自定义属性在真正的页面渲染后，是否会显示在页面上由如下规则决定：

• 凡是以 data- 开头的自定义属性，在页面渲染后均可以显示在页面上。
• 非 data- 开头的自定义属性，页面渲染后则不显示。

元素是什么？

元素是构成 React 应用的最小砖块。React 元素其实就是一个简单JavaScript对象，一个React 元素和界面上的一部分DOM对应，描述了这部分DOM的结构及渲染效果。

React 内部会自动根据React 元素，渲染出最终的页面DOM。更确切地说，React元素描述的是React虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。

创建元素的几种方式

• jsx
• react.createElement
• react.cloneElement

元素和组件的关系？

React组件最核心的作用是返回React元素。React组件负责调用React.createElement()，返回React元素，供React内部将其渲染成最终的页面DOM。

元素的渲染过程？

渲染粗略过程：React元素描述的是 虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。 渲染详细过程：React 渲染过程

• （1）先调用React.createElement()编译成上面的js对象(即虚拟DOM节点)
• （2）然后再调用 ReactDOMComponent( vdom ).mountComponent()将虚拟DOM变成真实的DOM
• （3）最后用 appendChild( domNode )插入DOM树，显示出来。

我们要渲染一个 React 元素到一个 root DOM 节点，需要把它们传递给 ReactDOM.render() 方法

jSX转换JS

html元素

<div></div>

React.createElement("div", null);

html元素包含子文本

<div>span</div>

React.createElement("div", null, "span");

html元素包含属性

<div id="id" key="key1" style={{display: 'none'}} ref="123">span</div>

React.createElement("div", {
  id: "id",
  key: "key1",
  style: {
    display: 'none'
  },
  ref: "123"
}, "span");

html元素包含子元素

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

React.createElement(
  "div", 
  {
    id: "id",
    key: "key1",
    style: {
      display: 'none'
    },
    ref: "123"
  }, 
  React.createElement("span", null, "1"),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

html元素包含组件元素

function Component () {
  return <div>component</div>
}

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <Component key="key2" name="rodchen" />
  <span>2</span>
  <span>3</span>
</div>

function Component() {
  return /*#__PURE__*/React.createElement("div", null, "component");
}

/*#__PURE__*/
React.createElement(
  "div", 
  {
    id: "id",
    key: "key1",
    style: {
      display: 'none'
    },
    ref: "123"
  },

  React.createElement(Component, {
    key: "key2",
    name: "rodchen"
  }),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

html元素包含组件元素包含children

function Component (props) {
  return <div>{props.children}</div>
}

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <Component key="key2" name="rodchen"><span>children</span></Component>
  <span>2</span>
  <span>3</span>
</div>

function Component() {
  return /*#__PURE__*/React.createElement("div", null, "component");
}

/*#__PURE__*/
React.createElement(
  "div", 
  {
    id: "id",
    key: "key1",
    style: {
      display: 'none'
    },
    ref: "123"
  },

  React.createElement(
    Component, 
    {
      key: "key2",
      name: "rodchen"
    },
    React.createElement("span", null, "children")
  ),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

假如我们将组件名称修改成小写字母

大写组件名称

function Component () {
  return <div></div>
}

<div>
  <Component />
</div>

function Component() {
  return /*#__PURE__*/React.createElement("div", null);
}

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement(Component, null));

小写组件名称

function component () {
  return <div></div>
}

<div>
  <component />
</div>

function component() {
  return /*#__PURE__*/React.createElement("div", null);
}

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement("component", null));

为什么组件名称需要大写，因为小写的话，createElement会将组件当成html元素解析的。