React jsx文件介绍与使用方式
显而易见的，使用jsx的前提是对于js的语法和使用有一定的了解。
1. 相通点
1）import引入方式
import React, { useState, useEffect, useRef } from 'react';2）语法
声明、赋值、函数及ES6语法通用。
2. 不同处：（先jsx后js）
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);直白点，我们可以在jsx里面直接编辑html的结构，并且不必加入繁琐的啰嗦的多重引号，只需一对（）即可。
上述代码如果看着陌生，那么你可以参照下面的js写法进行对照学习：
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);基于其书写方式，我们自然可以想象的到在html结构内使用变量赋值，此时你需要根据react的要求书写变量（是Class类实现或hook实现的数据绑定；前者需要带着this，后者可以直接书写变量名）。
【露一手】
实际上，jsx帮助我们在代码结构上更易读，组件化的结果是jsx的贡献之一，在拿到react项目中的代码后，不必费力地阅读，打开jsx，找到render（class方式）或者function中的return（hook式），其中的DOM和绑定的数据方法一目了然，也就有了如下的组件写法：
{isDisplayDetail && <Enter options={options} goBack={handleBack} />}（新的内容）
本人是从Vue岗位后转到React岗位上，所以在实际工作环境中遇到的问题，常常先思考Vue下的实现，然后通过阅读React的文档进行”转译“，实际上，这个方式并不会导致更多的错误，而是更快地学习到React下的解决办法；
承上，举例说明：
v-for是我们在vue当中最常用的指令之一了，在react中如何实现呢？
{
BoxList.map(item => (
<div key={item.id} onClick={handleCheck} className={style.item} data-id={item.id}>
<img src={item.isActive ? selectImg : unSelectImg} />
<p>{item.name}</p>
</div>
))
}BoxList是一个 [ ] 数组对象，通过Array变量的map操作，ES6的箭头函数
我们可以充分地相信，jsx是一项改变前端书写模式的”技术“。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了react项目引入scss的方法,本文给大家介绍了React pwa的配置方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了react脚手架构建运行时报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
React中state为组件内部可变数据,通过setState更新；props为外部传入的不可变参数,两者均可触发渲染,但state由组件维护,props由父组件控制,列表需用key优化性能,dangerouslySetInnerHTML用于内联HTML2025-07-07
这篇文章主要介绍了关于react中列表渲染的局部刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
解决React报错JSX element type does not have any construct
这篇文章主要为大家介绍了解决React报错JSX element type does not have any construct or call signatures，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React中的useEffect(副作用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家详细介绍了react实现消息显示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
React中使用ResizeObserver来观察元素size变化的方法
在 React 中使用 ResizeObserver 来观察元素的大小变化,可以通过创建一个自定义 Hook 来封装 ResizeObserver 的逻辑,并在组件中使用这个 Hook,以下是一个完整的示例,展示了如何在 React 中使用 ResizeObserver 来观察元素的大小变化,需要的朋友可以参考下2024-12-12
React hook 'useState' is calle
这篇文章主要为大家介绍了React hook 'useState' is called conditionally报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
Hook是React16.8的新增特性,它可以让你在不编写class的情况下使用state以及其他的React特性,本文中讲解的useState就是React中的其中一个Hook,这篇文章主要给大家介绍了关于React中useState理解和使用的相关资料,需要的朋友可以参考下2024-03-03
最新评论