1. React 是什么？它有哪些主要特點？

React 是由Facebook開發的開源JavaScript庫，用于構建用戶界面（UI），尤其適合開發復雜的單頁應用（SPA）。
主要特點：

• 聲明式編程：只需描述UI應該是什么樣子（如return <div>Hello</div>），React會自動處理DOM更新，無需手動操作DOM。
• 組件化：將UI拆分為獨立、可復用的組件（如按鈕、表單），便于維護和復用。
• 虛擬DOM：React會在內存中維護一個與真實DOM對應的虛擬DOM，通過對比虛擬DOM的差異（Diffing算法），只更新必要的部分，提升性能。
• 單向數據流：數據通過props從父組件流向子組件，避免數據混亂，便于調試。
• 跨平臺：基于React可擴展到移動端（React Native）、桌面端（Electron）等平臺。

2. 什么是JSX？

JSX（JavaScript XML）是React中用于描述UI的語法擴展，允許在JavaScript中直接編寫類似HTML的代碼。
特點：

• 本質是React.createElement()的語法糖，最終會被Babel編譯為JavaScript對象。
• 支持嵌入JavaScript表達式（用{}包裹），如<div>{user.name}</div>。
• 與HTML的區別：標簽閉合（如<img />）、className替代class、htmlFor替代for等。
• 示例：

  const element = <h1>Hello, {name}</h1>; // JSX語法
  // 編譯后等價于：
  const element = React.createElement('h1', null, `Hello, ${name}`);
  

3. 類組件和函數組件有什么區別？

維度	類組件	函數組件
定義方式	基于ES6類，繼承React.Component	普通JavaScript函數或箭頭函數
狀態管理	使用this.state和this.setState	依賴Hooks（如useState）
生命周期	有內置生命周期方法（如componentDidMount）	用useEffect模擬生命周期
this綁定	需要處理this指向問題（如箭頭函數綁定）	無this，更簡潔
代碼風格	較繁瑣，適合復雜邏輯	更簡潔，推薦用于大多數場景
示例	class MyComponent extends React.Component { render() { return <div />; } }	function MyComponent() { return <div />; }

現狀：函數組件+Hooks已成為React主流寫法，類組件逐漸被替代。

4. React中的狀態(state)是什么？如何更新狀態？

state 是組件內部管理的動態數據，當state變化時，組件會重新渲染。

• 特點：私有性（僅組件內部可訪問）、可變性（需通過特定方式更新）。
• 類組件中更新：使用this.setState()，是異步操作，會觸發組件重渲染。

  this.setState({ count: this.state.count + 1 }, () => {// 回調函數中可獲取更新后的stateconsole.log(this.state.count);
  });
  

• 函數組件中更新：使用useState Hook返回的更新函數，同樣是異步的。

  const [count, setCount] = useState(0);
  setCount(prevCount => prevCount + 1); // 推薦使用函數形式，確保依賴前一次狀態
  

5. React中的props是什么？

props（properties的縮寫）是從父組件傳遞到子組件的數據，類似函數參數。

• 特點：只讀性（子組件不能修改props，若需修改，需由父組件更新）、單向傳遞（父→子）。
• 示例：

  // 父組件
  function Parent() {return <Child name="Alice" age={18} />;
  }// 子組件
  function Child(props) {return <div>{props.name}, {props.age}</div>;
  }
  

• 可通過PropTypes或TypeScript定義props類型，增強代碼健壯性。

6. 什么是受控組件和非受控組件？

• 受控組件：表單元素（如input、select）的值由React的state控制，通過onChange事件同步state和表單值。

  function Input() {const [value, setValue] = useState('');return <input value={value} onChange={(e) => setValue(e.target.value)} />;
  }
  

• 非受控組件：表單元素的值由DOM自身管理，通過ref獲取值，類似原生HTML。

  function Input() {const inputRef