開發人員的綜合 React.js 備忘單
- WBOY原創
- 2024-07-19 11:23:48469瀏覽
React.js 已成為現代 Web 開發中建立動態和高效能 Web 應用程式的基石。這份全面的備忘單將涵蓋您掌握 React.js 所需了解的所有內容，包括實際範例、程式碼片段以及所有功能的詳細說明。我們的目標是提供您可以隨時參考的深入指南。
1.React簡介
React.js，通常簡稱為 React，是一個開源 JavaScript 函式庫，用於建立使用者介面，特別是對於需要快速、互動式使用者體驗的單頁應用程式。 React 由 Facebook 開發，允許開發人員創建大型 Web 應用程序，這些應用程式可以有效地更新和渲染以回應資料變更。
React 的核心概念是元件，它是一個獨立的模組，用來呈現一些輸出。元件可以獨立嵌套、管理和處理，使開發過程高效且可維護。
2. React 入門
設定環境
在開始使用React之前，您需要設定開發環境。方法如下：
- 安裝 Node.js 和 npm：React 依賴 Node.js 和 npm（Node Package Manager）來管理相依性。
從官網下載並安裝Node.js。
-
透過運行驗證安裝：
node -v npm -v
-
安裝 Create React App：Create React App 是學習 React 的舒適環境，也是在 React 中啟動新的單頁應用程式的好方法。
npm install -g create-react-app
創建一個新的 React 應用程式
環境設定完成後，您就可以建立新的 React 應用程式。
-
建立一個新項目：
npx create-react-app my-app cd my-app npm start
此指令建立一個具有指定名稱（my-app）的新目錄，設定一個新的 React 項目，並啟動開發伺服器。您可以開啟瀏覽器並造訪 http://localhost:3000 來查看新的 React 應用程式。
3. 反應組件
元件是任何 React 應用程式的建構塊。它們讓您可以將 UI 分成獨立的、可重複使用的部分。
功能組件
函數式元件是接受 props 作為參數並傳回 React 元素的 JavaScript 函數。它們比類別元件更簡單、更容易編寫。
import React from 'react';
const Welcome = ({ name }) => {
return 4a249f0d628e2318394fd9b75b4636b1Welcome, {name}!473f0a7621bec819994bb5020d29372a;
};
export default Welcome;
類別組件
類別元件是擴展 React.Component 的 ES6 類，並具有傳回 React 元素的 render 方法。
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return 4a249f0d628e2318394fd9b75b4636b1Welcome, {this.props.name}!473f0a7621bec819994bb5020d29372a;
}
}
export default Welcome;
功能組件和類別組件之間的差異
狀態管理：函數式元件使用鉤子（useState、useEffect等）進行狀態管理，而類別元件則使用this.state和生命週期方法。
生命週期方法：類別元件具有生命週期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。功能組件使用 useEffect 鉤子來處理副作用。
簡單性：函數式元件更簡單、更簡潔，使它們更易於閱讀和維護。
4.JSX
JSX 是一種語法擴展，可讓您直接在 JavaScript 中編寫 HTML。它產生 React“元素”。
JSX 語法
JSX 看起來像 HTML，但被轉換為 JavaScript。
const element = 4a249f0d628e2318394fd9b75b4636b1Hello, world!473f0a7621bec819994bb5020d29372a;
嵌入表達式
您可以透過將任何 JavaScript 表達式括在大括號中來將其嵌入到 JSX 中。
const name = 'John';
const element = 4a249f0d628e2318394fd9b75b4636b1Hello, {name}!473f0a7621bec819994bb5020d29372a;
JSX 屬性
JSX 允許您使用類似 HTML 語法的屬性。
const element = 475c150c326c59ec9b2dd1e6a1c38014;
5. 狀態和道具
了解狀態
State 是一個內建對象，用於儲存屬於組件的屬性值。當狀態物件發生變化時，元件會重新渲染。
使用 useState Hook 管理狀態
useState 鉤子用於向功能組件新增狀態。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
dc6dce4a544fdca2df29d5ac0ea9906b
e388a4556c0f65e1904146cc1a846beeYou clicked {count} times94b3e26ee717c64999d7867364b1b4a3
5ddc0978355752d4bf828563dc007a14 setCount(count + 1)}>Click me65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
);
};
export default Counter;
了解道具
Props 是傳遞給 React 元件的參數。 Props 透過 HTML 屬性傳遞給元件。
傳遞道具
道具是唯讀且不可變的。
const Greeting = (props) => {
return 4a249f0d628e2318394fd9b75b4636b1Hello, {props.name}!473f0a7621bec819994bb5020d29372a;
};
const App = () => {
return 1e9b83e740a258dee7f01e880ba004db;
};
道具類型和預設道具
PropTypes 可讓您定義元件應接收的 props 類型。可以定義預設 props 以確保 prop 在未指定的情況下具有值。
import React from 'react';
import PropTypes from 'prop-types';
const Greeting = ({ name }) => {
return 4a249f0d628e2318394fd9b75b4636b1Hello, {name}!473f0a7621bec819994bb5020d29372a;
};
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};
Greeting.defaultProps = {
name: 'Guest',
};
export default Greeting;
6. Component Lifecycle
Lifecycle Methods in Class Components
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 dc6dce4a544fdca2df29d5ac0ea9906bMy Component16b28748ea4df4d9c2150843fecfba68;
}
}
Using useEffect Hook
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 (
dc6dce4a544fdca2df29d5ac0ea9906b
e388a4556c0f65e1904146cc1a846beeYou
clicked {count} times94b3e26ee717c64999d7867364b1b4a3
5ddc0978355752d4bf828563dc007a14 setCount(count + 1)}>Click me65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
);
};
export default MyComponent;
7. Handling Events
Event Handling in React
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 a2cfc4f771b7cbacb8fc705e23ded36bClick me65281c5ac262bf6d81768915a4a77ac0;
};
Synthetic Events
React's event system is known as Synthetic Events. It is a cross-browser wrapper around the browser's native event system.
Handling Forms
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 (
a9bf9d9bedc9abd7dd4d836a79412b6a
2e1cf0710519d5598b1f0f14c36ba674
Name:
504d17b0f6b03dc75f5b399918bed261
8c1ecd4bb896b2264e0711597d40766c
92e8cbd9feac6a729893ae422743759e
f5a47148e367a6035fd7a2faa965022e
);
};
export default MyForm;
Event Handler Best Practices
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.
8. Conditional Rendering
if-else Statements
You can use JavaScript if-else statements inside the render method.
const MyComponent = ({ isLoggedIn }) => {
if (isLoggedIn) {
return 4a249f0d628e2318394fd9b75b4636b1Welcome back!473f0a7621bec819994bb5020d29372a;
} else {
return 4a249f0d628e2318394fd9b75b4636b1Please sign in.473f0a7621bec819994bb5020d29372a;
}
};
Ternary Operators
Ternary operators are a concise way to perform conditional rendering.
const MyComponent = ({ isLoggedIn }) => {
return (
dc6dce4a544fdca2df29d5ac0ea9906b
{isLoggedIn ? 4a249f0d628e2318394fd9b75b4636b1Welcome back!473f0a7621bec819994bb5020d29372a : 4a249f0d628e2318394fd9b75b4636b1Please sign in.473f0a7621bec819994bb5020d29372a}
16b28748ea4df4d9c2150843fecfba68
);
};
Logical && Operator
You can use the logical && operator to include elements conditionally.
const MyComponent = ({ isLoggedIn }) => {
return (
dc6dce4a544fdca2df29d5ac0ea9906b
{isLoggedIn && 4a249f0d628e2318394fd9b75b4636b1Welcome back!473f0a7621bec819994bb5020d29372a}
16b28748ea4df4d9c2150843fecfba68
);
};
Inline If with Logical && Operator
Inline if with logical && operator allows you to conditionally include an element in the output.
const Mailbox = ({ unreadMessages }) => {
return (
dc6dce4a544fdca2df29d5ac0ea9906b
4a249f0d628e2318394fd9b75b4636b1Hello!473f0a7621bec819994bb5020d29372a
{unreadMessages.length > 0 &&
c1a436a314ed609750bd7c7d319db4da
You have {unreadMessages.length} unread messages.
2e9b454fa8428549ca2e64dfac4625cd
}
16b28748ea4df4d9c2150843fecfba68
);
};
9. Lists and Keys
Rendering Lists
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) =>
2e99a2afa389bfb220fcd51d65729993
{number}
bed06894275b65c1ab86501b08a632eb
);
const NumberList = () => {
return (
ff6d136ddc5fdfeffaf53ff6ee95f185{listItems}929d1f5ca49e04fdcb27f9465b944689
);
};
Using Keys
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) =>
2e99a2afa389bfb220fcd51d65729993
{number}
bed06894275b65c1ab86501b08a632eb
);
return (
ff6d136ddc5fdfeffaf53ff6ee95f185{listItems}929d1f5ca49e04fdcb27f9465b944689
);
};
Keys Must Only Be Unique Among Siblings
Keys used within arrays should be unique among their siblings.
function Blog(props) {
const sidebar = (
ff6d136ddc5fdfeffaf53ff6ee95f185
{props.posts.map((post) =>
87c6bb9020f9bc84ce365f117dbefb25
{post.title}
bed06894275b65c1ab86501b08a632eb
)}
929d1f5ca49e04fdcb27f9465b944689
);
const content = props.posts.map((post) =>
19bcd6b2eb431bc35ca7af1f5e43e263
684271ed9684bde649abda8831d4d355{post.title}39528cedfa926ea0c01e69ef5b2ea9b0
e388a4556c0f65e1904146cc1a846bee{post.content}94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
);
return (
dc6dce4a544fdca2df29d5ac0ea9906b
{sidebar}
231a563c997aa9e3e0ae614bd16728b0
{content}
16b28748ea4df4d9c2150843fecfba68
);
}
10. Forms and Controlled Components
Handling Form Data
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 (
a9bf9d9bedc9abd7dd4d836a79412b6a
2e1cf0710519d5598b1f0f14c36ba674
Name:
504d17b0f6b03dc75f5b399918bed261
8c1ecd4bb896b2264e0711597d40766c
92e8cbd9feac6a729893ae422743759e
f5a47148e367a6035fd7a2faa965022e
);
};
export default MyForm;
Controlled vs Uncontrolled Components
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 (
244054e4e8cabd44c7e8193aa6f63fb5
2e1cf0710519d5598b1f0f14c36ba674
Name:
733698873fa50da8fa779e67406daca2
8c1ecd4bb896b2264e0711597d40766c
92e8cbd9feac6a729893ae422743759e
f5a47148e367a6035fd7a2faa965022e
);
}
}
Using Refs for Uncontrolled Components
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 (
244054e4e8cabd44c7e8193aa6f63fb5
2e1cf0710519d5598b1f0f14c36ba674
Name:
63001db5982f3e60a1b9208a578f6cf9
8c1ecd4bb896b2264e0711597d40766c
92e8cbd9feac6a729893ae422743759e
f5a47148e367a6035fd7a2faa965022e
);
}
}
Form Validation
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 (
a9bf9d9bedc9abd7dd4d836a79412b6a
{error && e388a4556c0f65e1904146cc1a846bee{error}94b3e26ee717c64999d7867364b1b4a3}
2e1cf0710519d5598b1f0f14c36ba674
Name:
e6680c943276b2479743ae48aa2c3c4d setName(e.target.value)} />
8c1ecd4bb896b2264e0711597d40766c
2e1cf0710519d5598b1f0f14c36ba674
Email:
7448c870435c8466d6415b4cd5e57af3 setEmail(e.target.value)} />
8c1ecd4bb896b2264e0711597d40766c
92e8cbd9feac6a729893ae422743759e
f5a47148e367a6035fd7a2faa965022e
);
};
export default MyForm;
11. React Router
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.
Setting Up React Router
-
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;
Route Parameters
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 c1a436a314ed609750bd7c7d319db4daUser ID: {id}2e9b454fa8428549ca2e64dfac4625cd;
};
const App = () => {
return (
a7f2cf15f06fbef780c6b2609731da81
da7c15ee158c884a4ad5d56e941eda87
ce6eeaea0ee015d7c7834a2da08622ed
3fd1eab6a3ee1fe92fde6d97b1988f07
80ecef3d33cd6309af735c93542122ea
);
};
export default App;
Nested Routes
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 }) => 684271ed9684bde649abda8831d4d355Requested Topic ID: {match.params.topicId}39528cedfa926ea0c01e69ef5b2ea9b0;
const Topics = ({ match }) => {
let { path, url } = useRouteMatch();
return (
dc6dce4a544fdca2df29d5ac0ea9906b
c1a436a314ed609750bd7c7d319db4daTopics2e9b454fa8428549ca2e64dfac4625cd
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6
b725e8e2701aa5ef3b10cf4a4a8d3034Components06f735b502bd5273dad825215f7c405b
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6
8e1f596f8f79d213858f4f3ff1b58fceProps v. State06f735b502bd5273dad825215f7c405b
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
da7c15ee158c884a4ad5d56e941eda87
61f0fa4321c44137e30312030a9c0e20
684271ed9684bde649abda8831d4d355Please select a topic.39528cedfa926ea0c01e69ef5b2ea9b0
c14cb6b64e224f4e5a949337b2570e26
9d194525d14decb3df37718d52f26590
3fd1eab6a3ee1fe92fde6d97b1988f07
16b28748ea4df4d9c2150843fecfba68
);
};
const App = () => {
return (
a7f2cf15f06fbef780c6b2609731da81
dc6dce4a544fdca2df29d5ac0ea9906b
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6
4edbf5b784c612aafd5036a3e2d83c2dHome06f735b502bd5273dad825215f7c405b
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6
b640d72ae84e3bad89e0179d1e328243Topics06f735b502bd5273dad825215f7c405b
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
231a563c997aa9e3e0ae614bd16728b0
da7c15ee158c884a4ad5d56e941eda87
bbb3e500d9f4f89883020186a2ddbb4a
f0e68096eeb3ed9fbd81056f58b8d5f3
3fd1eab6a3ee1fe92fde6d97b1988f07
16b28748ea4df4d9c2150843fecfba68
80ecef3d33cd6309af735c93542122ea
);
};
export default App;
Redirects and Navigation
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 = () => c1a436a314ed609750bd7c7d319db4daHome2e9b454fa8428549ca2e64dfac4625cd;
const About = () => c1a436a314ed609750bd7c7d319db4daAbout2e9b454fa8428549ca2e64dfac4625cd;
const App = () => {
return (
a7f2cf15f06fbef780c6b2609731da81
da7c15ee158c884a4ad5d56e941eda87
bbb3e500d9f4f89883020186a2ddbb4a
c9dc43901ba2d8c28c3c578e571107b7
7709cf1d190ed88bc67892b77f43d992
3fd1eab6a3ee1fe92fde6d97b1988f07
80ecef3d33cd6309af735c93542122ea
);
};
export default App;
12. Context API
The Context API provides a way to pass data through the component tree without having to pass props down manually at every level.
Creating Context
To create a context, use React.createContext.
const MyContext = React.createContext();
Consuming Context
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 dc6dce4a544fdca2df29d5ac0ea9906b{value}16b28748ea4df4d9c2150843fecfba68;
};
Context with Functional Components
const MyComponent = () => {
return (
b689c0d1a993785138e54bc7cc21f63f
ea5c314853a1992950c8ee28be9bd72f
8e66e6aff1f0a13ebced51b2c1b5d182
);
};
const AnotherComponent = () => {
const value = useContext(MyContext);
return dc6dce4a544fdca2df29d5ac0ea9906b{value}16b28748ea4df4d9c2150843fecfba68;
};
Updating Context
To update context, create a provider component with state.
const MyProvider = ({ children }) => {
const [value, setValue] = useState('Hello');
return (
682880ab8c111fd3ec21b55025046065
{children}
8e66e6aff1f0a13ebced51b2c1b5d182
);
};
const MyComponent = () => {
const { value, setValue } = useContext(MyContext);
return (
dc6dce4a544fdca2df29d5ac0ea9906b
{value}
5ddc0978355752d4bf828563dc007a14 setValue('Updated Value')}>Update65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
);
};
Context Best Practices
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.
13. Hooks
Hooks are functions that let you use state and other React features in functional components.
Basic Hooks (useState, useEffect)
useState: Adds state to functional components.
useEffect: Performs side effects in functional components.
Additional Hooks (useContext, useReducer)
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 (
dc6dce4a544fdca2df29d5ac0ea9906b
Count: {state.count}
5ddc0978355752d4bf828563dc007a14 dispatch({ type: 'increment' })}>+65281c5ac262bf6d81768915a4a77ac0
5ddc0978355752d4bf828563dc007a14 dispatch({ type: 'decrement' })}>-65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
);
}
Custom Hooks
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 dc6dce4a544fdca2df29d5ac0ea9906b{data ? JSON.stringify(data) : 'Loading...'}16b28748ea4df4d9c2150843fecfba68;
};
Rules of Hooks
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.
14. Higher-Order Components (HOC)
Higher-Order Components (HOC) are functions that take a component and return a new component.
Understanding HOCs
HOCs are used to add additional functionality to components.
const withLogging = (WrappedComponent) => {
return (props) => {
console.log('Rendering', WrappedComponent.name);
return 31403eb0b6940459d9df68e14fc75564;
};
};
Creating HOCs
const EnhancedComponent = withLogging(MyComponent);
Using HOCs
const MyComponent = (props) => {
return dc6dce4a544fdca2df29d5ac0ea9906bMy Component16b28748ea4df4d9c2150843fecfba68;
};
const EnhancedComponent = withLogging(MyComponent);
HOC Best Practices
Do not mutate the original component: Return a new component.
Use display names for debugging: Set displayName on the HOC for better debugging.
15. Error Boundaries
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
Implementing Error Boundaries
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 4a249f0d628e2318394fd9b75b4636b1Something went wrong.473f0a7621bec819994bb5020d29372a;
}
return this.props.children;
}
}
Catching Errors
Error boundaries catch errors in the render method and in lifecycle methods.
const MyComponent = () => {
throw new Error('An error occurred');
return dc6dce4a544fdca2df29d5ac0ea9906bMy Component16b28748ea4df4d9c2150843fecfba68;
};
const App = () => {
return (
e61056d4a8a9030688e67f3b8b93a2b5
c91df85aa2a01a1e069f702d655e9491
cb28499deb11178577145cfc441388a7
);
};
Error Boundaries Best Practices
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.
16. React Performance Optimization
Memoization
Memoization helps to avoid re-rendering components unnecessarily.
import React, { memo } from 'react';
const MyComponent = memo(({ value }) => {
return dc6dce4a544fdca2df29d5ac0ea9906b{value}16b28748ea4df4d9c2150843fecfba68;
});
Code Splitting
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={dc6dce4a544fdca2df29d5ac0ea9906bLoading...16b28748ea4df4d9c2150843fecfba68}>
8f13323f6387d4fb51abaf18b61b3667
08ee156419279e45977839a62de7dfe8
);
};
Lazy Loading
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={dc6dce4a544fdca2df29d5ac0ea9906bLoading...16b28748ea4df4d9c2150843fecfba68}>
8f13323f6387d4fb51abaf18b61b3667
08ee156419279e45977839a62de7dfe8
);
};
useMemo and useCallback
useMemo: Memoizes expensive calculations.
useCallback: Memoizes functions.
const MyComponent = ({ value }) => {
const memoizedValue = useMemo(() => {
return computeExpensiveValue(value);
}, [value]);
const memoizedCallback = useCallback(() => {
doSomething(value);
}, [value]);
return (
dc6dce4a544fdca2df29d5ac0ea9906b
{memoizedValue}
f1e0750461fc4f521cd24a5533f81591Click me65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
);
};
React Developer Tools
Use React Developer Tools to identify performance bottlenecks.
17. Testing in React
Jest and React Testing Library
Jest and React Testing Library are popular tools for testing React components.
Writing Tests
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(c91df85aa2a01a1e069f702d655e9491);
const element = screen.getByText(/My Component/i);
expect(element).toBeInTheDocument();
});
18. React Best Practices
Component Structure
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.
State Management
Lift state up: Lift state to the nearest common ancestor.
使用 Context 進行全域狀態：使用 Context API 進行全域狀態管理。
造型
使用 CSS 模組：使用 CSS 模組來實現作用域和模組化樣式。
使用樣式元件：使用樣式元件進行動態樣式設定。
表現
避免不必要的重新渲染：使用記憶化和 React 內建的效能最佳化工具。
使用程式碼分割：分割程式碼以僅載入必要的元件。
測試
編寫全面的測試：為應用程式的所有關鍵部分編寫測試。
使用快照測試：使用快照測試來捕獲意外的變更。
結論
React.js 是一個用於建立現代 Web 應用程式的強大函式庫。透過理解和利用其核心概念，您可以建立高效、可維護和可擴展的應用程式。這份備忘錄是幫助您掌握 React.js 的綜合指南，涵蓋從基本概念到高階主題的所有內容。
以上是開發人員的綜合 React.js 備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！