React中的不可变性及JSX简介 (精读React官方文档—02)

简介: React中的不可变性及JSX简介 (精读React官方文档—02)

这是我参与更文挑战的第15天,活动详情查看:更文挑战

为什么不可变性在React中非常重要?

  • 不可变性指的是不直接修改数据,而是使用新的数据替换旧的数据。
  • 不可变性带来的优势:
  1. 撤销和回退操作在开发中是很常见的,不直接在数据上进行修改,可以帮助我们更好的回溯数据。
  2. 更容易跟踪数据的改变。
  3. 方便确定React重新渲染的时机。

通过slice函数返回数组的副本

  • 这个方法是我们必须掌握的。
const arr = [1,2,3,4];
arr.slice()  // [1,2,3,4]
console.log(arr === arr.slice()); //false
复制代码

JSX简介

const element = <h1>Hello, world!</h1>;
复制代码

解读

  • JSX是JavaScript的语法拓展。
  • JSX可以生成React元素。

为什么使用JSX?

官方描述:React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式,而是通过将二者共同存放在称之为“组件”的松散耦合单元之中,来实现关注点分离。在 JavaScript 代码中将 JSX 和 UI 放在一起时,会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

解读

  • 我们首先要搞懂一个概念耦合是什么?答:耦合表示两个子系统(或类)之间的关联程度。也就是React认为渲染的逻辑和其他UI逻辑的广联程度比较大,在JS中将JSX和UI放在一起会帮助我们显示更多的错误和警告。

JSX也是一个表达式

  • 可以在if或for语句中使用JSX,并将JSX进行返回,赋值给变量,将JSX当做参数进行出传递,都是可以的。
  • 编译后,JSX表达式会被转换为普通的JavaScript函数调用。

JSX特定属性

  1. 属性值为字面量的情况可以通过引号的形式进行引入。
const element = <div tabIndex="0"></div>;
复制代码
  1. 属性值为JS表达式的时候,需要通过大括号来进行引入。
const element = <img src={user.avatarUrl}></img>;
复制代码

注意事项:

JSX中使用小驼峰命名来对属性进行命名,例如:JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex。

使用JSX指定子元素

  • 单标签的形式
const element = <img src={user.avatarUrl} />;
复制代码
  • JSX标签中包含很多元素的情形。
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
复制代码

JSX防止注入攻击

官方描述:React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本)攻击。

解读React底层已经帮我们做好了,我们可以直接用了。

JSX表示对象

  • Babel不仅有将ES6转为ES5的功能,同时还可以将JSX语法转译为React.createElement()这个函数调用。下面两种代码是等效的。
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
复制代码
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
复制代码
  • React.createElement()实际上创建了这样一个对象。
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
复制代码

解读通俗的说,Babel会将JSX语法转换为JS对象的形式,React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。


相关文章
|
2月前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
46 0
|
16天前
|
JavaScript 前端开发
react18【系列实用教程】JSX (2024最新版)
react18【系列实用教程】JSX (2024最新版)
20 1
|
16天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
21 0
|
2月前
|
XML 前端开发 JavaScript
react中JSX的详解
react中JSX的详解
31 2
|
2月前
|
前端开发 JavaScript 安全
React中的JSX:语法与原理深入解析
【4月更文挑战第25天】本文深入解析React中的JSX,一种JavaScript语法扩展,使代码更直观。JSX让开发者以HTML样式描述组件UI,但最终编译成JavaScript。通过Babel转换,JSX标签转为React.createElement()调用,创建虚拟DOM。JSX的优势在于直观性、类型安全、代码复用和工具支持,助力高效开发React组件,适应不断发展的Web应用需求。
|
2月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined
130 0
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
59 0
|
2月前
|
前端开发 JavaScript 安全
react为什么要使用JSX
react为什么要使用JSX
53 1
|
2月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
33 0
|
2月前
|
JSON 前端开发 JavaScript
React源码解析-JSX
React源码解析-JSX
77 1