ReactJS实战之JSX详解

2021-03-03 20:59:14 阅读：258 来源： 互联网

标签：ReactJS return JavaScript React 详解 createElement JSX Hello

创建虚拟DOM元素

什么是虚拟DOM
用Js对象的形式，来表示DOM和DOM之间的嵌套关系。

const mydiv = React. createElement('div', { id: 'mydiv', title: 'div aaa' }，'这是一 个div元素' )

HTML是最优秀的标记语言。在JS文件中，默认不能写这种类似于HTML的标记;否则打包会失败;可以使用babel 来转换这些JS中的标签。

这种在JS中，混合写入类似于HTML的语法，叫做JSX。
符合 XML规范的JS。JSX 语法的本质，还是在运行的时候，被转换成了React. createElement形式执行。

引入JSX

添加支持
插件支持
引入依赖
React提供的环境搭建工具演示
新建test项目

yarn start
可以将配置文件提出来
yarn eject
配置文件可读性差，因此不考虑使用这种现成方式写项目，跳过。

我们来观察一下声明的这个变量：

const element = <h1>Hello, world!</h1>;

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX，一种 JavaScript 的语法扩展。

推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
JSX 用来声明 React 当中的元素。

JSX 的基本使用方法

在 JSX 中使用表达式

可任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里

例如 2 + 2， user.firstName，以及 formatName(user) 都是可以使用的

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

在 CodePen 上试试

书写 JSX 的时候一般都会带上换行和缩进，这样可以增强代码的可读性
同样推荐在 JSX 代码的外面扩上一个小括号，这样可以防止分号自动插入的 bug

JSX 本身其实也是一种表达式

在编译后，JSX 其实会被转化为普通的 JavaScript 对象

这意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 属性

使用引号来定义以字符串为值的属性

const element = <div tabIndex="0"></div>;

使用大括号来定义以 JavaScript 表达式为值的属性

const element = <img src={user.avatarUrl}></img>;

切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了
JSX 会将引号当中的内容识别为字符串而不是表达式

JSX 嵌套

若 JSX 标签是闭合式的，需在结尾处用/>, 就好像 XML/HTML 一样

JSX 标签同样可以相互嵌套

警告:
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名来定义属性的名称，而不是使用 HTML 的属性名称
如 class 变成了 className
而 tabindex 则对应着 tabIndex

JSX 防注入攻击

可放心在 JSX 当中使用用户输入

React DOM 在渲染之前默认会过滤所有传入的值
它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击

JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement()的方法调用

下面两种代码的作用是完全相同的

React.createElement()首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

我们将在下一个章节当中介绍更多有关 React 元素是如何渲染成 DOM 的内容。

Tip:
如果你是在使用本地编辑器编写 JSX 代码的话，推荐你去装一个支持 JSX 高亮的插件，这样更方便之后的开发学习。

JSX 的怪异之处

JSX 偶尔也比较奇怪。针对在使用JSX 构建组件时可能会遇到的常见问题，本节汇总了一些小技巧、提示和策略来供你应对。

单一根节点
React 组件只能渲染一个根节点。想要了解这个限制的原因，我们先来看看render函数的一个返回示例：

return(  
    <h1>Hello World</h1> 
)

它会被转换成一条语句：

return React.createElement("h1",null,"Hello World");

但是，下面的代码却不是合法的：

return (  
<h1>Hello World</h1> 
<h2>Have a nice day</h2> 
)

需要明确的是，这并非JSX 的限制，而是JavaScript 的一个特性：一条返回语句只能返回单个值，而在前面的代码中我们尝试返回两条语句(两次React.createElement 调用)。解决的方法非常简单：就像你在普通JavaScript 中会做的那样，将所有返回值包含到一个根对象中。

return (  
<div> 
<h1>Hello World</h1> 
<h2>Have a nice day</h2> 
</div> 
)

它完全有效，因为它会被转换成：

return React.createElement("div",null,  
React.createElement("h1",null,"Hello World"),  
React.createElement("h2",null," Have a nice day"),  
)

它返回单个值，并且是通过合法的JavaScript 完成的。

条件语句
如果语句不兼容于JSX，看上去像是JSX 的限制所致，实际上却是因为JSX 只是普通的JavaScript
回顾一下JSX 是如何被转换为普通JavaScript
如下JSX

return (  
      <div className="salutation">Hello JSX</div> 
)

会被转换成这样的JavaScript

return (  
    React.createElement("div",{className:"salutation"},"Hello JSX");  
)

然而，如果尝试在JSX 的中间编写if 语句，例如：
<div className={if (condition) { "salutation" }}>Hello JSX</div>

它就会被转换成一个非法的JavaScript 表达式，如图2-1 所示：

有什么解决方法？
尽管并无可能在JSX 中使用“if”语句，但仍有根据条件渲染内容的方法，包括使用三元表达式和将条件赋值给一个变量(空值和未定义的值都会被React 进行处理，JSX在转义时什么都不会输出)。

使用三元表达式

如果你有一个非常简单的表达式，可以使用三元形式：

render() {  
  return (  
    <div className={condition ? "salutation" : ""}> 
      Hello JSX  
    </div> 
  )  
}

这段代码会被转换成一段合法的JavaScript：

React.createElement("div",{className: condition ?"salutation" : ""},  
"Hello JSX");

三元形式还可用来有条件地渲染整个节点：

<div> 
{condition ?  
<span>Hello JSX</span> 
: null}  
</div>

将条件外置

如果三元表达式还不能应付你的要求，解决方法是不要在JSX 的中间使用条件。简单地将条件语句移动到外部(就像你在第2 章中隐藏和显示ContactItem 细节时所采取的方法)。

下面是原先的代码：

1.  render() {  
2.  return (  
3.  <div className={if (condition) { "salutation" }}> 
4.  Hello JSX  
5.  </div> 
6.  )  
7.  }

将条件移动到JSX 的外部，就像：

render() {  
let className;  
if(condition){  
className = "salutation";  
}  
return (  
<div className={className}>Hello JSX</div> 
)  
}

React 知道如何处理未定义的值，如果条件为假，它甚至不会在div 标签中创建class特性。

标签：ReactJS,return,JavaScript,React,详解,createElement,JSX,Hello
来源： https://blog.csdn.net/qq_33589510/article/details/114323103

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9