快捷導(dǎo)航

React jsx文件介紹與使用方式

更新時間：2024年03月13日 08:50:43 作者：在聽風(fēng)吟

這篇文章主要介紹了React jsx文件介紹與使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1. 相通點(diǎn)

1）import引入方式

import React, { useState, useEffect, useRef } from 'react';

2）語法

聲明、賦值、函數(shù)及ES6語法通用。

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

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

直白點(diǎn)，我們可以在jsx里面直接編輯html的結(jié)構(gòu)，并且不必加入繁瑣的啰嗦的多重引號，只需一對（）即可。

上述代碼如果看著陌生，那么你可以參照下面的js寫法進(jìn)行對照學(xué)習(xí)：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

基于其書寫方式，我們自然可以想象的到在html結(jié)構(gòu)內(nèi)使用變量賦值，此時你需要根據(jù)react的要求書寫變量（是Class類實(shí)現(xiàn)或hook實(shí)現(xiàn)的數(shù)據(jù)綁定；前者需要帶著this，后者可以直接書寫變量名）。

【露一手】

實(shí)際上，jsx幫助我們在代碼結(jié)構(gòu)上更易讀，組件化的結(jié)果是jsx的貢獻(xiàn)之一，在拿到react項(xiàng)目中的代碼后，不必費(fèi)力地閱讀，打開jsx，找到render（class方式）或者function中的return（hook式），其中的DOM和綁定的數(shù)據(jù)方法一目了然，也就有了如下的組件寫法：

{isDisplayDetail && <Enter options={options} goBack={handleBack} />}

（新的內(nèi)容）

本人是從Vue崗位后轉(zhuǎn)到React崗位上，所以在實(shí)際工作環(huán)境中遇到的問題，常常先思考Vue下的實(shí)現(xiàn)，然后通過閱讀React的文檔進(jìn)行”轉(zhuǎn)譯“，實(shí)際上，這個方式并不會導(dǎo)致更多的錯誤，而是更快地學(xué)習(xí)到React下的解決辦法；

承上，舉例說明：

v-for是我們在vue當(dāng)中最常用的指令之一了，在react中如何實(shí)現(xiàn)呢？

{
      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是一個 [ ] 數(shù)組對象，通過Array變量的map操作，ES6的箭頭函數(shù)

我們可以充分地相信，jsx是一項(xiàng)改變前端書寫模式的”技術(shù)“。