ReactJS实战之JSX详解，2024年阿里Java面试题精选

// 调用 render 函数渲染

ReactDOM.render(mydiv, document.getElementById(‘app’))

但如果元素很多，这样写就很不好呢，每次都要创建元素的 API。

毕竟页面上本质都是各种 html 标签，还是直接手写各种标签最简单暴力。

[](

)babel

但是HTML是标记语言。JS文件默认不能写这种HTML标记，打包会失败，使用 babel 来转换这些JS中的标签即可！

这种在JS中，混合写入类似于HTML的语法，叫做JSX。

符合 XML规范的JS。JSX 语法的本质，还是在运行的时候，被转换成了React. createElement形式执行。

引入JSX

====================================================================

• 添加支持

• 插件支持

• 引入依赖

React提供的环境搭建工具演示

配置文件可读性差，因此不考虑使用这种现成方式写项目，跳过。

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

const element =

Hello, world!

;

这种看起来可能有些奇怪的标签语法既不是js 语法也不是 HTML语法，而是能在 js 中使用 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 = (

Hello, {formatName(user)}!

);

ReactDOM.render(

element,

document.getElementById(‘root’)

);

• 在 CodePen 上试试

书写 JSX 的时候一般都会带上换行和缩进，这样可以增强代码的可读性

同样推荐在 JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入 的 bug

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

---

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

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

function getGreeting(user) {

if (user) {

return

Hello, {formatName(user)}!

;

}

return

Hello, Stranger.

;

}

JSX 属性

=====================================================================

“” 定义以字符串为值的属性

---

const element =

;

{} 定义 js 表达式为值的属性

---

const element = ;

切记你使用了{}包裹的 js 表达式时就不要再到外面套引号了。

JSX 会将引号当中的内容识别为字符串而非表达式！

[](

)字符串数组

// 普通字符串数组渲染成js

const arr = [‘1’, ‘2’, ‘3’, ‘4’];

方式一：

// 定义一个空数组

const nameArr = [];

arr.forEach(item=> {

const temp =

{item}

;

nameArr.push(temp);

})

方式二：

{arr.map(item =>

{item}

)}

[](

)key 的处理

React 中需要把 key 添加给 forEach 或 map 或 for 循环直接控制的元素

arr.forEach(item=> {

const temp =

{item}

;

nameArr.push(temp);

})

return (

{arr.map(item =>

{item}

)}

);

JSX 嵌套

=====================================================================

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

JSX 标签同样可以相互嵌套

警告:

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称

如 class 变成了 className

而 tabindex 则对应着 tabIndex

JSX 防注入攻击

========================================================================

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

React DOM 在渲染之前默认会 过滤 所有传入的值 需要zi料+ 绿色徽【vip1024b】

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

JSX 代表 Objects

总结：心得体会

既然选择这个行业，选择了做一个程序员，也就明白只有不断学习，积累实战经验才有资格往上走，拿高薪，为自己，为父母，为以后的家能有一定的经济保障。

学习时间都是自己挤出来的，短时间或许很难看到效果，一旦坚持下来了，必然会有所改变。不如好好想想自己为什么想进入这个行业，给自己内心一个答案。

面试大厂，最重要的就是夯实的基础，不然面试官随便一问你就凉了；其次会问一些技术原理，还会看你对知识掌握的广度，最重要的还是你的思路，这是面试官比较看重的。

最后，上面这些大厂面试真题都是非常好的学习资料，通过这些面试真题能够看看自己对技术知识掌握的大概情况，从而能够给自己定一个学习方向。包括上面分享到的学习指南，你都可以从学习指南里理顺学习路线，避免低效学习。

大厂Java架构核心笔记（适合中高级程序员阅读）：

心得体会

既然选择这个行业，选择了做一个程序员，也就明白只有不断学习，积累实战经验才有资格往上走，拿高薪，为自己，为父母，为以后的家能有一定的经济保障。

学习时间都是自己挤出来的，短时间或许很难看到效果，一旦坚持下来了，必然会有所改变。不如好好想想自己为什么想进入这个行业，给自己内心一个答案。

面试大厂，最重要的就是夯实的基础，不然面试官随便一问你就凉了；其次会问一些技术原理，还会看你对知识掌握的广度，最重要的还是你的思路，这是面试官比较看重的。

最后，上面这些大厂面试真题都是非常好的学习资料，通过这些面试真题能够看看自己对技术知识掌握的大概情况，从而能够给自己定一个学习方向。包括上面分享到的学习指南，你都可以从学习指南里理顺学习路线，避免低效学习。

大厂Java架构核心笔记（适合中高级程序员阅读）：

[外链图片转存中…(img-ahNR5cmu-1710364702651)]