一、React JSX

1.1 JSX簡介

JSX是全稱是（JavaScript XML）按照React 官方的解釋，JSX 是一個(gè) JavaScript 的語法擴(kuò)展，類似于模板語法，或者說是一個(gè)類似于 XML 的 ECMAScript 語法擴(kuò)展，并且具備 JavaScript 的全部功能。

例如：

const element = <h1>Hello, world!</h1>;

或者：

function App(){
	return (
		<p>Hello React!</p>
	)
}

可以看到，定義的element和函數(shù)的返回值既不是字符串，也不是變量，而是html元素。

JSX 會(huì)被編譯為 React.createElement()， React.createElement() 將返回一個(gè)叫作“React Element”的 JS 對象。

JSX與React.createElement()相比，在實(shí)際功能效果一致的前提下，JSX 代碼層次分明、嵌套關(guān)系清晰；而 React.createElement 代碼則給人一種非?；靵y的“雜糅感”，這樣的代碼不僅讀起來不友好，寫起來也費(fèi)勁。

JSX 語法糖允許我們開發(fā)人員像寫 HTML 一樣來寫我們的 JS 代碼，也就是在js中寫html代碼，在降低學(xué)習(xí)成本的同時(shí)還提升了我們的研發(fā)效率和研發(fā)體驗(yàn)。

1.2 JSX表達(dá)式

React JSX使用的就是JavaScript語法，那么自然也 可以使用JavaScript表達(dá)式。但是，在React JSX中使用JavaScript表達(dá)式要使用大括號(hào)"{ }"括起來。

例如：

ReactDOM.render(
    <p>Hello React! {alert('Hello!')}</p>,
    document.getElementById('app')
);

React JSX是支持嵌入表達(dá)式的，什么意思呢？簡單的來講，我們可以在JSX中引用JSX外定義的變量。

例如：

const name = "yancy";
ReactDOM.render(
	<p>Hello React! {alert(`Hello ${name}!`)}</p>,
	document.getElementById('app')
);

1.3 JSX條件表達(dá)式

React JSX中的JavaScript表達(dá)式時(shí)無法使用if條件語句的，React也沒有提供類似vue的v-if的指令來實(shí)現(xiàn)條件判斷邏輯。

我們可以使用三元表達(dá)式來實(shí)現(xiàn)條件表達(dá)式。

ReactDOM.render(
	<p>1 === 1 ? { 1 === 1 ? "true" : "false"}</p>,
	document.getElementById('app')
);

我們還可以通過在jsx中調(diào)用函數(shù)表達(dá)式來實(shí)現(xiàn)邏輯判斷的目的，調(diào)用的函數(shù)可以返回一個(gè)jsx，因?yàn)椋琷sx可以作為參數(shù)傳遞并且嵌套在另一個(gè)jsx中。

1.4 JSX循環(huán)表達(dá)式

在jsx中不能直接使用for表達(dá)式，可以使用map方法來實(shí)現(xiàn)數(shù)組的遍歷。

const hobby = ["sing","jump","rap","basketball"];
ReactDOM.render(
	(<ul>
	    {hobby.map(i => <li>{ i }</li>)}
	</ul>),
	document.getElementById('app')
);

1.5 JSX樣式表達(dá)式

react語法不支持內(nèi)聯(lián)形式的CSS樣式，因此可以使用JSX樣式表達(dá)式來實(shí)現(xiàn)頁面樣式。

ReactDOM.render(
    <p style={{fontSize: 1.2+'rem',color: "red"}}>Hello React!</p>,
    document.getElementById('app')
);

可以看到style屬性綁定的其實(shí)是一個(gè)js對象，請和css的樣式表區(qū)分，如果我們將這個(gè)對象直接提取出來，那么就比較明了了。

const p_style = { fontSize: 1.2 + "rem", color: "red" };
ReactDOM.render(
  <p style={p_style}>Hello React!</p>,
  document.getElementById("app")
);

效果是一樣的。

1.6 JSX注釋表達(dá)式

注釋內(nèi)容需要寫在大括號(hào)“{}”中，負(fù)責(zé)注釋的內(nèi)容會(huì)直接在頁面上展示出來。

二、React組件

組件化開發(fā)是react的重要思想之一，組件就是UI切分成一些獨(dú)立的、可復(fù)用的部件，例如頭部、底部、一個(gè)彈窗組件等。React組件通過props可以接收任意的輸入值，因此props也可以理解外參數(shù)的概念。

React組件有兩種形式：類組件和函數(shù)組件。

2.1 類組件

class HelloComponent extends React.Component {
  render() {
    return <p>Hello React!</p>;
  }
}
ReactDOM.render(<HelloComponent />, document.getElementById("app"));

React v16.8 之前的版本只支持類組件，所以很多以前項(xiàng)目是使用類組件寫的，但是現(xiàn)在新項(xiàng)目幾乎都是使用函數(shù)組件了，所以這里簡單地提一下類組件。

2.2 函數(shù)組件

function Hello() {
  return <p>Hello React!</p>;
}
ReactDOM.render(
  <div>
    <Hello />
  </div>,
  document.getElementById("app")
);

注意組件名第一個(gè)字母必須大寫！

2.3 React Props

組件需要被復(fù)用，那么可以通過接收不同的參數(shù)來實(shí)現(xiàn)復(fù)用。

例如：

function MyDialog(props) {
  return (
    <dialog open>
      <p>Hello {props.name}</p>
    </dialog>
  );
}
ReactDOM.render(
  <div>
    <MyDialog name="yancy" />
  </div>,
  document.getElementById("app")
);

可以看到，props其實(shí)就是包含了組件標(biāo)簽的屬性。

雖然React Props很好用，但是React規(guī)定Props是不能被修改的，也就是說Props是只讀的參數(shù)，我們不能在組件中試圖修改prop的內(nèi)容。

到此這篇關(guān)于React詳細(xì)講解JSX和組件的使用的文章就介紹到這了,更多相關(guān)React JSX和組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論