React jsx文件介绍与使用方式

更新时间：2024年03月13日 08:50:43 作者：在听风吟

这篇文章主要介绍了React jsx文件介绍与使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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组件useReducer的讲解与使用
在React函数式组件中，我们可以通过useState()来创建state，这种state创建方式会给我们返回两个东西state和setState()。
2023-04-04
React18新增特性released的使用
本文主要介绍了React18新增特性released的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
react组件中的constructor和super知识点整理
这篇文章主要介绍了react组件中的constructor和super知识点整理,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-08-08
详解在React项目中安装并使用Less（用法总结）
这篇文章主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
详解React Angular Vue三大前端技术
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。
2021-05-05
React受控组件和非受控组件对比详解
在使用React搭建用户界面时,组件可以分为两类：受控组件和费受控组件这两种组件在数据处理方式上有着显著的差异,理解它们的区别对于构建高效和可控的React应用至关重要,本文将深入探讨这两种组件的定义、特点以及使用场景,并通过示例代码帮助你更加清晰地理解它们
2025-01-01
解决react-connect中使用forwardRef遇到的问题
这篇文章主要介绍了解决react-connect中使用forwardRef遇到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
从零开始搭建webpack+react开发环境的详细步骤
这篇文章主要介绍了从零开始搭建webpack+react开发环境的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
React 中在 map() 中使用条件跳出map的方法
这篇文章主要介绍了React 中在 map() 中使用条件跳出map的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
react.js CMS 删除功能的实现方法
下面小编就为大家带来一篇react.js CMS 删除功能的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04

React jsx文件介绍与使用方式

目录

1. 相通点

2. 不同处：（先jsx后js）

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具