React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React jsx文件介绍与使用

React jsx文件介绍与使用方式

作者:在听风吟

这篇文章主要介绍了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是一项改变前端书写模式的”技术“。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文