引言：
React.js，由Facebook推出并維護的開源JavaScript庫，以其組件化思想、虛擬DOM技術和聲明式編程風格，成為構建用戶界面的首選工具之一。本文將系統性地介紹React的基礎概念、核心特性，并通過實際案例展示基礎屬性的應用，幫助開發者快速上手React開發。
一、React基礎
1.?組件（Components）
React應用的核心是組件，每個組件代表頁面上的一個獨立部分，負責渲染UI和處理自己的狀態。
2.?JSX
React采用JSX語法，一種JavaScript和HTML的混合體，使得編寫HTML結構變得直觀且高效。
3.?狀態（State）與屬性（Props）
- State：組件內部可變的數據，用于存儲組件的狀態信息。
- Props：父組件向子組件傳遞數據的方式，是只讀的。
4.?生命周期方法
React組件從創建到銷毀會經歷多個階段，每個階段對應不同的生命周期方法，如componentDidMount、render、componentDidUpdate等。
5.?事件處理
React使用合成事件系統，事件處理函數作為props傳遞給組件，并需以特定方式命名（如onClick）。
二、基礎屬性與用法
1.?State示例
Jsx
1class Counter extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = { count: 0 };
5 }
6
7 incrementCount = () => {
8 this.setState(prevState => ({ count: prevState.count + 1 }));
9 };
10
11 render() {
12 return (
13 <div>
14 <p>Count: {this.state.count}</p>
15 <button onClick={this.incrementCount}>Increment</button>
16 </div>
17 );
18 }
19}2.?Props示例
Jsx
1function Welcome(props) {
2 return <h1>Hello, {props.name}</h1>;
3}
4
5ReactDOM.render(<Welcome name="Sara" />, document.getElementById('root'));3.?條件渲染
Jsx
1function Greeting(props) {
2 const isLoggedIn = props.isLoggedIn;
3 return (
4 <div>
5 {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
6 </div>
7 );
8}4.?列表渲染
Jsx
1const numbers = [1, 2, 3, 4, 5];
2const listItems = numbers.map((number) =>
3 <li key={number.toString()}>{number}</li>
4);
5
6ReactDOM.render(
7 <ul>{listItems}</ul>,
8 document.getElementById('numbersList')
9);5.?事件處理
Jsx
1class Toggle extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = { isToggleOn: true };
5
6 // 綁定this
7 this.handleClick = this.handleClick.bind(this);
8 }
9
10 handleClick() {
11 this.setState(state => ({
12 isToggleOn: !state.isToggleOn
13 }));
14 }
15
16 render() {
17 return (
18 <button onClick={this.handleClick}>
19 {this.state.isToggleOn ? 'ON' : 'OFF'}
20 </button>
21 );
22 }
23}三、React Hooks
自React 16.8引入的Hooks，允許在函數組件中使用state和其他React特性，無需編寫類。
1.?useState
Jsx
1import React, { useState } from 'react';
2
3function Example() {
4 const [count, setCount] = useState(0);
5
6 return (
7 <div>
8 <p>You clicked {count} times</p>
9 <button onClick={() => setCount(count + 1)}>
10 Click me
11 </button>
12 </div>
13 );
14}2.?useEffect
用于執行副作用操作（如數據獲取、訂閱或者手動修改DOM），并支持清理操作。
Jsx
1import React, { useState, useEffect } from 'react';
2
3function Example() {
4 const [count, setCount] = useState(0);
5
6 useEffect(() => {
7 document.title = `You clicked ${count} times`;
8 });
9
10 return (
11 <div>
12 <p>You clicked {count} times</p>
13 <button onClick={() => setCount(count + 1)}>
14 Click me
15 </button>
16 </div>
17 );
18}四、總結
React通過組件化和JSX簡化了UI的開發復雜度，其強大的狀態管理和生命周期機制為開發者提供了高度靈活的控制能力。通過學習和掌握上述基礎知識，開發者能夠構建功能豐富、高效且可維護的Web應用。隨著React生態的不斷壯大，如Redux進行狀態管理，React Router進行路由控制，以及Next.js等服務端渲染技術的集成，React已成為現代前端開發不可或缺的一部分。
感謝你的點贊！關注！收藏！
