React jsx文件介紹與使用方式
顯而易見的，使用jsx的前提是對于js的語法和使用有一定的了解。
1. 相通點
1）import引入方式
import React, { useState, useEffect, useRef } from 'react';2）語法
聲明、賦值、函數(shù)及ES6語法通用。
2. 不同處：（先jsx后js）
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);直白點，我們可以在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類實現(xiàn)或hook實現(xiàn)的數(shù)據(jù)綁定；前者需要帶著this，后者可以直接書寫變量名）。
【露一手】
實際上，jsx幫助我們在代碼結(jié)構(gòu)上更易讀，組件化的結(jié)果是jsx的貢獻(xiàn)之一，在拿到react項目中的代碼后，不必費力地閱讀，打開jsx，找到render（class方式）或者function中的return（hook式），其中的DOM和綁定的數(shù)據(jù)方法一目了然，也就有了如下的組件寫法：
{isDisplayDetail && <Enter options={options} goBack={handleBack} />}（新的內(nèi)容）
本人是從Vue崗位后轉(zhuǎn)到React崗位上，所以在實際工作環(huán)境中遇到的問題，常常先思考Vue下的實現(xiàn)，然后通過閱讀React的文檔進(jìn)行”轉(zhuǎn)譯“，實際上，這個方式并不會導(dǎo)致更多的錯誤，而是更快地學(xué)習(xí)到React下的解決辦法；
承上，舉例說明：
v-for是我們在vue當(dāng)中最常用的指令之一了，在react中如何實現(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是一項改變前端書寫模式的”技術(shù)“。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react項目引入scss的方法,本文給大家介紹了React pwa的配置方法，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
react腳手架構(gòu)建運(yùn)行時報錯問題及解決
這篇文章主要介紹了react腳手架構(gòu)建運(yùn)行時報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React組件的數(shù)據(jù)掛載實現(xiàn)方式
React中state為組件內(nèi)部可變數(shù)據(jù),通過setState更新；props為外部傳入的不可變參數(shù),兩者均可觸發(fā)渲染,但state由組件維護(hù),props由父組件控制,列表需用key優(yōu)化性能,dangerouslySetInnerHTML用于內(nèi)聯(lián)HTML2025-07-07
這篇文章主要介紹了關(guān)于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，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React中的useEffect(副作用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)消息顯示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React中使用ResizeObserver來觀察元素size變化的方法
在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個 Hook,以下是一個完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下2024-12-12
React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Hook是React16.8的新增特性,它可以讓你在不編寫class的情況下使用state以及其他的React特性,本文中講解的useState就是React中的其中一個Hook,這篇文章主要給大家介紹了關(guān)于React中useState理解和使用的相關(guān)資料,需要的朋友可以參考下2024-03-03