02react 之 jsx

Posted 2020-10-02 yezixuan

React与ReactDOM是react中核心对象，React为核心功能，ReactDOM提供对DOM的操作，以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲染方式：浏览器渲染（react-dom.js）和服务器渲染（react-dom-server.js）。

所以程序使用react，首先先引入：

var React = require(\'react\');
var ReactDOM = require(\'react-dom\');

ES6(ES2015)

import React from \'react\';
import ReactDOM from \'react-dom\';

React 的最基本方法，用于将element(html片段)，插入指定的 DOM 节点。

ReactDOM.render(element,targetDOM);

1.1.  JSX是什么

 什么是JSX，JS中HTML标签部分就是一个JSX。 <h1>hello react</h1>.

 JSX 是 Facebook 团队提出的一个语法方案，可以在 javascript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法，这种语法方案需要通过 JSXTransformer(已经废弃，目前使用babel) 来进行编译转换成真实可用的 JavaScript 代码。

React 是基于组件的开发思想，React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件中可以有自己的样式（Inline Style）和结构（JSX编写的HTML）。

1.2.  JSX由来

在 React 和 JSX 之前，一个组件如果要包含 HTML 结构将面临如下几个问题：JSX 很好的解决了这些问题

    1. 组件的 HTML 直接写在页面中，那么组件的结构(html模板)和行为（js功能）是分离的；

    2. 组件的 HTML 直接用字符串的形势插入到 JavaScript 代码中，那么就会出现一大段的字符串拼接，开发人员需要很小心的确保字符串拼接时没有因为少了一个符号而导致整个代码无法运行；

    3. 使用 MVC 分层的思想，引入模板引擎，那么该如何引入模板文件的片段呢；

1.3.  JSX是可选的

JSX看似高大上，但是JSX本身是无法直接运行在JavaScript引擎中，因为JavaScript压根中就没有JSX技术。所以想要JSX运行，就编译成JavaScript能够执行的代码。

JSX语法编写:

var React = reqiure(\'react\');
var ReactDOM = reqiure(\'react-dom);
var el = <a href="www.baidu.com">点我</a>
ReactDOM.render(el,document.getElementById(\'app\'));

JavaScript编写：

var React = require(\'react\');
var ReactDOM = require(\'react-dom\');
//React.createElement 来构造组件的 DOM 树。第一个参数是标签名，第二个参数是属性对象，第三个参数是子元素。
var el = React.createElement(\'a\',{href:\'www.baidu.com\'},\'点我\',\'a\');
ReactDOM.render(el,document.getElementById(\'app\'));

以上两种写法，完全等价，因为webpack会使用babel把JSX编译成JavaScript代码。

使用babel index.js 可以查看最终运行的代码。

 

1.4.  JSX与HTML差异

JSX 与 HTML 的差异

 1、渲染HTML标签，声明变量采用 首字母小写

     div / input / button

 2、渲染React组件，声明变量采用 首字母大写

MyButton  MyDataList

React 的 JSX 使用大写和小写字母来区分本地的组件类和 HTML 标签.

3、 class 和 for 这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用 className 和 htmlFor 。

 1.5.  JSX表达式

JSX语法中写Javascript表达式只需要用 {} 即可，可以使用{}表达式动态的插入值。

SX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX

普通取值

var url = "www.baidu.com";
var el = <a href="{url}">点我</a>

三目运算 （不能使用if）

<div className="2>1?\'class2\':\'class1\'"></div>

创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加 data- 前缀。

<div data-custom-attribute=\'foo\'>自定义属性使用data开头</div>

属性延伸

var props = {"name":"username","type":"text"};
var input = <input {...props}  value="value值"/>// 等效于<input name=’username’ type=’text’ value=’

value值

’>

样式属性：JSX把style当成对象来处理，所以style不能直接写成style=’color:red,background-color:yellow’

var styles = {color:\'red\',backgroundColor:\'yellow\'};
var div = <div style={styles}>一个div</div>
var div = <div style={{color:\'red\',backgroundColor:\'yellow\'}}>一个div</div>//注意是两个{{}}，外括号为表达式，内花括号为json对象。

1.6.  JSX注意点

1、使用JSX的JS文件，一般命名为JSX或者JS。

 2、JSX元素必须要用一个tag 包裹起来

var view = <div>第一个</div><div>第二个</div>; //错误的，必须被一个包裹。

var view=<div><div>第一个</div><div>第二个</div></div>//正确。

3、JSX方式创建出来对象，并不是一个HTML中DOM，而是一个虚拟DOM。

React.createElement() 与 document.createElement(); 创建出来的对象，是两种截然不同的对象。

4、React的普通标签的事件名，采用on+事件名，click及为onClick, change为onChange。