React.js 已成為現代 Web 開發中建立動態和高效能 Web 應用程式的基石。這份全面的備忘單將涵蓋您掌握 React.js 所需了解的所有內容，包括實際範例、程式碼片段以及所有功能的詳細說明。我們的目標是提供您可以隨時參考的深入指南。
React.js，通常簡稱為 React，是一個開源 JavaScript 函式庫，用於建立使用者介面，特別是對於需要快速、互動式使用者體驗的單頁應用程式。 React 由 Facebook 開發，允許開發人員創建大型 Web 應用程序，這些應用程式可以有效地更新和渲染以回應資料變更。
React 的核心概念是元件，它是一個獨立的模組，用來呈現一些輸出。元件可以獨立嵌套、管理和處理，使開發過程高效且可維護。
在開始使用React之前，您需要設定開發環境。方法如下：
從官網下載並安裝Node.js。
透過運行驗證安裝：
node -v npm -v
安裝 Create React App：Create React App 是學習 React 的舒適環境，也是在 React 中啟動新的單頁應用程式的好方法。
npm install -g create-react-app
環境設定完成後，您就可以建立新的 React 應用程式。
建立一個新項目：
npx create-react-app my-app cd my-app npm start
此指令建立一個具有指定名稱（my-app）的新目錄，設定一個新的 React 項目，並啟動開發伺服器。您可以開啟瀏覽器並造訪 http://localhost:3000 來查看新的 React 應用程式。
元件是任何 React 應用程式的建構塊。它們讓您可以將 UI 分成獨立的、可重複使用的部分。
函數式元件是接受 props 作為參數並傳回 React 元素的 JavaScript 函數。它們比類別元件更簡單、更容易編寫。
import React from 'react';
const Welcome = ({ name }) => {
return <h1>Welcome, {name}!</h1>;
};
export default Welcome;
類別元件是擴展 React.Component 的 ES6 類，並具有傳回 React 元素的 render 方法。
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Welcome, {this.props.name}!</h1>;
}
}
export default Welcome;
狀態管理：函數式元件使用鉤子（useState、useEffect等）進行狀態管理，而類別元件則使用this.state和生命週期方法。
生命週期方法：類別元件具有生命週期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。功能組件使用 useEffect 鉤子來處理副作用。
簡單性：函數式元件更簡單、更簡潔，使它們更易於閱讀和維護。
JSX 是一種語法擴展，可讓您直接在 JavaScript 中編寫 HTML。它產生 React“元素”。
JSX 看起來像 HTML，但被轉換為 JavaScript。
const element = <h1>Hello, world!</h1>;
您可以透過將任何 JavaScript 表達式括在大括號中來將其嵌入到 JSX 中。
const name = 'John';
const element = <h1>Hello, {name}!</h1>;
JSX 允許您使用類似 HTML 語法的屬性。
const element = <img src={user.avatarUrl} alt={user.name} />;
State 是一個內建對象，用於儲存屬於組件的屬性值。當狀態物件發生變化時，元件會重新渲染。
useState 鉤子用於向功能組件新增狀態。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default Counter;
Props 是傳遞給 React 元件的參數。 Props 透過 HTML 屬性傳遞給元件。
道具是唯讀且不可變的。
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
const App = () => {
return <Greeting name="Alice" />;
};
PropTypes 可讓您定義元件應接收的 props 類型。可以定義預設 props 以確保 prop 在未指定的情況下具有值。
import React from 'react';
import PropTypes from 'prop-types';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};
Greeting.defaultProps = {
name: 'Guest',
};
export default Greeting;
Lifecycle methods are special methods in class components that run at specific points in a component's life.
componentDidMount: Executed after the component is rendered.
componentDidUpdate: Executed after the component's updates are flushed to the DOM.
componentWillUnmount: Executed before the component is removed from the DOM.
class MyComponent extends React.Component {
componentDidMount() {
// Runs after component is mounted
}
componentDidUpdate(prevProps, prevState) {
// Runs after component updates
}
componentWillUnmount() {
// Runs before component is unmounted
}
render() {
return <div>My Component</div>;
}
}
The useEffect hook combines the functionalities of componentDidMount, componentDidUpdate, and componentWillUnmount.
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// Runs on mount and update
document.title = `You clicked ${count} times`;
// Cleanup function (runs on unmount)
return () => {
console.log('Cleanup');
};
}, [count]); // Dependency array
return (
<div>
<p>You
clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default MyComponent;
React events are named using camelCase, rather than lowercase. With JSX, you pass a function as the event handler, rather than a string.
const handleClick = () => {
console.log('Button clicked');
};
const MyComponent = () => {
return <button onClick={handleClick}>Click me</button>;
};
React's event system is known as Synthetic Events. It is a cross-browser wrapper around the browser's native event system.
Handling forms in React involves controlling the input elements and managing the state.
import React, { useState } from 'react';
const MyForm = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
export default MyForm;
Avoid inline event handlers: Define event handlers outside of the JSX for better readability and performance.
Use Arrow Functions: Use arrow functions to avoid issues with this binding.
Debounce Expensive Operations: Debounce expensive operations like API calls to avoid performance issues.
You can use JavaScript if-else statements inside the render method.
const MyComponent = ({ isLoggedIn }) => {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign in.</h1>;
}
};
Ternary operators are a concise way to perform conditional rendering.
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
</div>
);
};
You can use the logical && operator to include elements conditionally.
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
};
Inline if with logical && operator allows you to conditionally include an element in the output.
const Mailbox = ({ unreadMessages }) => {
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
};
You can build collections of elements and include them in JSX using curly braces {}.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
const NumberList = () => {
return (
<ul>{listItems}</ul>
);
};
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
const NumberList = (props) => {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
};
Keys used within arrays should be unique among their siblings.
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
Handling form data in React involves managing the state of the form fields.
import React, { useState } from 'react';
const MyForm = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
export default MyForm;
Controlled components are those that are controlled by React state. Uncontrolled components are those that maintain their own internal state.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Refs provide a way to access DOM nodes or React elements created in the render method.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.input = React.createRef();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Form validation ensures that user inputs are valid.
const MyForm = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
if (!name || !email) {
setError('Name and Email are required');
} else {
setError('');
// Submit form
}
};
return (
<form onSubmit={handleSubmit}>
{error && <p>{error}</p>}
<label>
Name:
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</label>
<label>
Email:
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
export default MyForm;
React Router is a library for routing in React applications. It allows you to handle navigation and rendering of different components based on the URL.
Install React Router:
npm install react-router-dom
Set Up Routes:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
};
export default App;
You can use route parameters to capture values from the URL.
import React from 'react';
import { BrowserRouter as Router, Route,
Switch, useParams } from 'react-router-dom';
const User = () => {
const { id } = useParams();
return <h2>User ID: {id}</h2>;
};
const App = () => {
return (
<Router>
<Switch>
<Route path="/user/:id" component={User} />
</Switch>
</Router>
);
};
export default App;
Nested routes allow you to render sub-components within a parent component.
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom';
const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;
const Topics = ({ match }) => {
let { path, url } = useRouteMatch();
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${url}/components`}>Components</Link>
</li>
<li>
<Link to={`${url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Switch>
<Route exact path={path}>
<h3>Please select a topic.</h3>
</Route>
<Route path={`${path}/:topicId`} component={Topic} />
</Switch>
</div>
);
};
const App = () => {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/topics" component={Topics} />
</Switch>
</div>
</Router>
);
};
export default App;
You can use the Redirect component to redirect to a different route programmatically.
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Redirect from="/old-path" to="/new-path" />
</Switch>
</Router>
);
};
export default App;
The Context API provides a way to pass data through the component tree without having to pass props down manually at every level.
To create a context, use React.createContext.
const MyContext = React.createContext();
To consume a context value, use the useContext hook in functional components or Context.Consumer in class components.
const MyComponent = () => {
const value = useContext(MyContext);
return <div>{value}</div>;
};
const MyComponent = () => {
return (
<MyContext.Provider value="Hello">
<AnotherComponent />
</MyContext.Provider>
);
};
const AnotherComponent = () => {
const value = useContext(MyContext);
return <div>{value}</div>;
};
To update context, create a provider component with state.
const MyProvider = ({ children }) => {
const [value, setValue] = useState('Hello');
return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
};
const MyComponent = () => {
const { value, setValue } = useContext(MyContext);
return (
<div>
{value}
<button onClick={() => setValue('Updated Value')}>Update</button>
</div>
);
};
Avoid overusing context: Use context sparingly and only for global data.
Use multiple contexts: Separate concerns by using multiple contexts.
Memoize context values: Use useMemo to avoid unnecessary re-renders.
Hooks are functions that let you use state and other React features in functional components.
useState: Adds state to functional components.
useEffect: Performs side effects in functional components.
useContext: Accesses context values.
useReducer: Manages complex state logic.
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
Custom hooks are functions that encapsulate logic and can be reused across components.
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => setData(data));
}, [url]);
return data;
};
const MyComponent = () => {
const data = useFetch('https://api.example.com/data');
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
Call hooks at the top level: Do not call hooks inside loops, conditions, or nested functions.
Only call hooks from React functions: Call hooks from functional components or custom hooks.
Higher-Order Components (HOC) are functions that take a component and return a new component.
HOCs are used to add additional functionality to components.
const withLogging = (WrappedComponent) => {
return (props) => {
console.log('Rendering', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
};
const EnhancedComponent = withLogging(MyComponent);
const MyComponent = (props) => {
return <div>My Component</div>;
};
const EnhancedComponent = withLogging(MyComponent);
Do not mutate the original component: Return a new component.
Use display names for debugging: Set displayName on the HOC for better debugging.
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
Error boundaries catch errors in the render method and in lifecycle methods.
const MyComponent = () => {
throw new Error('An error occurred');
return <div>My Component</div>;
};
const App = () => {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
};
Use error boundaries to catch errors in components: Use error boundaries to catch and display errors in UI components.
Log errors for debugging: Log errors to external services for debugging.
Memoization helps to avoid re-rendering components unnecessarily.
import React, { memo } from 'react';
const MyComponent = memo(({ value }) => {
return <div>{value}</div>;
});
Code splitting helps to load only the necessary code and improve performance.
import React, { Suspense, lazy } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
const MyComponent = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
};
Lazy loading helps to load components only when they are needed.
import React, { Suspense, lazy } from 'react';
const Other
Component = lazy(() => import('./OtherComponent'));
const MyComponent = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
};
useMemo: Memoizes expensive calculations.
useCallback: Memoizes functions.
const MyComponent = ({ value }) => {
const memoizedValue = useMemo(() => {
return computeExpensiveValue(value);
}, [value]);
const memoizedCallback = useCallback(() => {
doSomething(value);
}, [value]);
return (
<div>
{memoizedValue}
<button onClick={memoizedCallback}>Click me</button>
</div>
);
};
Use React Developer Tools to identify performance bottlenecks.
Jest and React Testing Library are popular tools for testing React components.
Snapshot Testing: Capture the rendered component and compare it with a saved snapshot.
Unit Testing: Test individual components and functions.
Integration Testing: Test the integration between components and services.
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders MyComponent', () => {
render(<MyComponent />);
const element = screen.getByText(/My Component/i);
expect(element).toBeInTheDocument();
});
Organize components by feature: Group related components together.
Use descriptive names: Use clear and descriptive names for components and props.
Keep components small: Break down large components into smaller, reusable components.
Lift state up: Lift state to the nearest common ancestor.
使用 Context 進行全域狀態：使用 Context API 進行全域狀態管理。
使用 CSS 模組：使用 CSS 模組來實現作用域和模組化樣式。
使用樣式元件：使用樣式元件進行動態樣式設定。
避免不必要的重新渲染：使用記憶化和 React 內建的效能最佳化工具。
使用程式碼分割：分割程式碼以僅載入必要的元件。
編寫全面的測試：為應用程式的所有關鍵部分編寫測試。
使用快照測試：使用快照測試來捕獲意外的變更。
React.js 是一個用於建立現代 Web 應用程式的強大函式庫。透過理解和利用其核心概念，您可以建立高效、可維護和可擴展的應用程式。這份備忘錄是幫助您掌握 React.js 的綜合指南，涵蓋從基本概念到高階主題的所有內容。
以上是開發人員的綜合 React.js 備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
