React jsx文件介紹與使用方式
顯而易見的，使用jsx的前提是對(duì)于js的語(yǔ)法和使用有一定的了解。
1. 相通點(diǎn)
1）import引入方式
import React, { useState, useEffect, useRef } from 'react';2）語(yǔ)法
聲明、賦值、函數(shù)及ES6語(yǔ)法通用。
2. 不同處：（先jsx后js）
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);直白點(diǎn)，我們可以在jsx里面直接編輯html的結(jié)構(gòu)，并且不必加入繁瑣的啰嗦的多重引號(hào)，只需一對(duì)（）即可。
上述代碼如果看著陌生，那么你可以參照下面的js寫法進(jìn)行對(duì)照學(xué)習(xí)：
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);基于其書寫方式，我們自然可以想象的到在html結(jié)構(gòu)內(nèi)使用變量賦值，此時(shí)你需要根據(jù)react的要求書寫變量（是Class類實(shí)現(xiàn)或hook實(shí)現(xiàn)的數(shù)據(jù)綁定；前者需要帶著this，后者可以直接書寫變量名）。
【露一手】
實(shí)際上，jsx幫助我們?cè)诖a結(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í)際上，這個(gè)方式并不會(huì)導(dǎo)致更多的錯(cuò)誤，而是更快地學(xué)習(xí)到React下的解決辦法；
承上，舉例說明：
v-for是我們?cè)趘ue當(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是一個(gè) [ ] 數(shù)組對(duì)象，通過Array變量的map操作，ES6的箭頭函數(shù)
我們可以充分地相信，jsx是一項(xiàng)改變前端書寫模式的”技術(shù)“。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在React函數(shù)式組件中，我們可以通過useState()來創(chuàng)建state，這種state創(chuàng)建方式會(huì)給我們返回兩個(gè)東西state和setState()。2023-04-04
本文主要介紹了React18新增特性released的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
react組件中的constructor和super知識(shí)點(diǎn)整理
這篇文章主要介紹了react組件中的constructor和super知識(shí)點(diǎn)整理,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
詳解在React項(xiàng)目中安裝并使用Less（用法總結(jié)）
這篇文章主要介紹了詳解在React項(xiàng)目中安裝并使用Less（用法總結(jié)），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
詳解React Angular Vue三大前端技術(shù)
當(dāng)前世界中，技術(shù)發(fā)展非常迅速并且變化迅速，開發(fā)者需要更多的開發(fā)工具來解決不同的問題。本文就對(duì)于當(dāng)下主流的前端開發(fā)技術(shù)React、Vue、Angular這三個(gè)框架做個(gè)相對(duì)詳盡的探究，目的是為了解開這些前端技術(shù)的面紗，看看各自的廬山真面目。2021-05-05
在使用React搭建用戶界面時(shí),組件可以分為兩類：受控組件和費(fèi)受控組件這兩種組件在數(shù)據(jù)處理方式上有著顯著的差異,理解它們的區(qū)別對(duì)于構(gòu)建高效和可控的React應(yīng)用至關(guān)重要,本文將深入探討這兩種組件的定義、特點(diǎn)以及使用場(chǎng)景,并通過示例代碼幫助你更加清晰地理解它們2025-01-01
解決react-connect中使用forwardRef遇到的問題
這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了React?中在?map()?中使用條件跳出map的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
react.js CMS 刪除功能的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猺eact.js CMS 刪除功能的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04