react中集成其他框架与JSX Depth，10大前端常用算法

1.对于JSX的加深认识，首先回顾以下在JSX中一个

标签中与其等价的式子是什么

上面部分的代码其实与下面部分的代码是相同的，这从中说明JSX其实就是一个对象，其对象中的第一个放的是组件的名称，第二个是组件的属性(用对象去表示)，第三就是组件之中的内容。这在之前最初介绍JSX的时候就已经说过了。

2.react必须在范围内，这个话的意思是你使用JSX语法，就必须要表述你现在使用的正是JSX语法，否则你写的代码就会报错，因为你所要表述的内容浏览器不认识。因此通常的做法就是在文件的开头去引用React，其作用域就是全局，因此你就可以在全局的范围中去任意的使用JSX语法，例如在下面的例子中，现在全局中去引用React，然后再去使用。

3.使用点符号去表示JSX的类型，其意思就是你现在全局中去引用React，然后再声明一个变量，里面使用对象的方式再添加一个变量，最后再用一个无状态组件去表示要呈现的内容。这样的你在引用时，就使用点符号去表示JSX的类型。

4.用户自定义组件的名称的首字母必须是大写，通常用的是大驼峰式的命名法则。如果使用的是小写，则表示的是内置的组件，然而当你运行程序的时候，内置组件中并没有这个组件，那么程序就会报错。下面通过两个实例来进行说明

在上面的两个例子中，就很好的去说明了刚才所叙述的两点。

5.运行时去选择类型，不能使用一般表达式作为React元素类型。如果您确实想使用一个通用表达式来表示元素的类型，那么只需首先将它分配给一个大写的变量。例如在下面的例子中，就很好的说明了这一点

6.props在JSX中，你可以使用任何的js表达式用{}包裹起来作为props，例如：

在这个时候props.foo的值为10，如果你使用if语句或者循环时，不能直接放在JSX中，此时你可以将这些放在JSX表达式的周围就行。例如在下面的这个例子中，就使用了if语句

7.字符串使用，可以将字符串直接使用在JSX中，例如下面的例子，其作用是等价的。

当你使用字符串的形式后，可以发生转译，因此下面的两种形式也是等价的。

8.props的默认值的true，当你没有给props赋任何值时，其props的值为true，因此下面的两种形式也是等价的

一般来说是不推荐去使用这种形式的，因为在es6中{foo}其等价于{foo:foo}，当你使用上面的这种形式后，会产生混淆。

9.传递属性，如果你的props是一个对象，你又想要通过JSX去传递，你就可以使用…将整个的props对象里面的内容进行传递，因此在下面的两个实例中，是等价的

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】