昨天我們回顧了 Vue 基礎語法，今天我們來繼續回顧下 React 的基礎語法。
React 是一個用於構建使用者介面的開源 JavaScript 庫，由 Facebook 維護。它以元件化和聲明式編程範式而聞名，廣泛用於建立互動式、可復用的UI元件。
React 允許開發者使用名為 JSX 的語法擴充套件來建立虛擬 DOM，它透過比較前後兩次渲染的虛擬 DOM 來決定如何高效地更新 UI。React 的套用元件化特性使其成為構建大型套用的有力工具。
React 的基礎語法
1）JSX
：React 使用 JSX 語法，它類似於 HTML，但編譯成 JavaScript。
2）元件
：React 套用由多個獨立、可復用的元件構成，每個元件管理自己的狀態。
3）狀態(State)和內容(Pro
ps)
：元件有狀態和內容，狀態是元件內部的、可以變化的數據，內容是從父元件傳遞給子元件的數據。
4）生命周期
：React 元件有生命周期，包括掛載、更新和解除安裝等階段。
下面是 React 的基礎語法範例程式碼：
importReactfrom'react';
// 功能性元件
constMessage = () => {
return <h1>Hello, React!</h1>;
};
// 類元件
classClockextendsReact.Component {
constructor(props) {
super(props);
this.state = { date: newDate() };
}
// 元件生命周期方法
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: newDate()
});
}
render() {
return (
<p>
React Clock: {this.state.date.toLocaleTimeString()}
</p>
);
}
}
// 元件渲染
ReactDOM.render(
<div>
<Message />
<Clock />
</div>,
document.getElementById('root')
);
在上述程式碼中，我們首先定義了一個簡單的功能性元件 Message，它返回一個帶有文本的 h1 元素。然後，我們定義了一個類元件 Clock，它有一個計時器，每秒更新時間。我們使用 ReactDOM.render 方法將這些元件渲染到HTML文件中的一個元素上。
React 提供了一種高效且靈活的方法來構建使用者介面，它的元件化和聲明式編程範式極大地提高了開發效率。
今天的程式碼大賞就到這裏。希望透過這篇文章，你能夠對 React 的基礎語法 有一個更深入的理解。
完整程式碼片段 來源於程式碼小抄，歡迎點選進入小程式閱讀！
線上存取：https://www.codecopy.cn/post/uoqbyb
在程式碼小抄可以看到更多優質程式碼，也歡迎大家積極分享，可能會獲得我們官方的小禮品 🎁~
往期推薦
