React学习笔记（一）
井字器游戏学习笔记
React组件
在React中创建一个组件，通常需要包含以下几个部分：
- 导入必要的依赖：通常需要从’react’库中导入React（在React 17之后，如果使用新的JSX转换，可以不导入React，但很多项目仍会导入）以及可能用到的其他Hook或组件。
- 组件函数：定义一个函数（函数组件）或类（类组件）来创建组件。现在函数组件和Hooks是主流。
- 状态和逻辑：在组件内部，使用State Hook（如useState）或其他Hooks（如useEffect）来管理状态和副作用。
- 事件处理函数：定义处理用户交互的函数。
- 渲染内容：返回JSX，描述组件的UI。
- 样式：可以引入CSS文件，或者使用CSS-in-JS等方式为组件添加样式。
- 导出组件：使用export导出组件，以便在其他地方使用
import './App.css';
import { useState } from 'react';
//定义组件函数
function App() {//有历史记录const [xIsNext, setXIsNext] = useState(true);const [history, setHistory] = useState([Array(9).fill(null)]);const currentSquares = history[history.length - 1];const [currentMove, setCurrentMove] = useState(0);function handlePlay(nextSquares) {setHistory([...history, nextSquares]);setXIsNext(!xIsNext);}function jumpTo(nextMove) {setCurrentMove(nextMove);setXIsNext(nextMove % 2 === 0);setHistory(history.slice(0, nextMove + 1));}//在React组件内部使用JavaScript的map函数来生成一个列表（数组）的React元素。const moves = history.map((squares, move) => {let description;if (move > 0) {description = 'Go to move #' + move;} else {description = 'Go to game start';}return (<li key={move}><button onClick={() => jumpTo(move)}>{description}</button></li>);});return (<div className="game"><div className="game-board"><Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} /></div><div className="game-info"><ol>{moves}</ol></div></div>);
}
export default App;
思考
- React的组件好像一个函数。
- React组件本质上就是一个函数（或类），而Vue的组件则是一个对象。
- 在React中，组件通常是一个函数，它接收一个props对象作为参数，并返回一个React元素（JSX）。
- React的设计理念是“函数式”，组件被视作一个函数，它接收props并返回UI。状态可以通过useState等Hook在函数内部管理。Vue的设计理念是“响应式”，组件实例被创建时，会将data、computed、methods等选项包装成一个响应式系统，模板则被编译成渲染函数。
- 在React组件内部使用JavaScript的map函数来生成一个列表（数组）的React元素。
这部分内容是javaScript代码，一个 数组的 map 方法调用，它返回一个 React 元素数组。 - JSX 是JavaScript XML 的缩写，它允许在 JavaScript 代码中编写类似 HTML 的代码。
- 在React中，组件接收props参数时使用花括号（{}）
- 为了进行“解构赋值”（Destructuring Assignment），允许从数组或对象中提取数据，并赋值给变量。实际上是从props对象中提取特定的属性，这样在组件内部就可以直接使用这些属性名，而不需要每次都通过props.属性名来访问。