這裡有一些更高級的 React 概念和術語：
12。上下文 API
Context API 提供了一種透過元件樹傳遞資料的方法，而無需在每個層級手動傳遞 props。它對於主題、身份驗證或用戶資料等全域資料很有用。
範例：
const ThemeContext = React.createContext('light');
function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => <button className={theme}>I am styled by {theme} theme!</button>}
</ThemeContext.Consumer>
);
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
登入後複製
13。參考文獻
Refs 提供了一種存取 DOM 節點或在 render 方法中建立的 React 元素的方法。它通常用於直接修改 DOM 元素或管理焦點。
範例：
import { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}
登入後複製
14。高階組件 (HOC)
HOC 是一個接受元件並傳回新元件的函數。它經常用於重複使用元件邏輯。
範例：
function withLogger(WrappedComponent) {
return function WithLogger(props) {
console.log('Rendering component');
return <WrappedComponent {...props} />;
};
}
const EnhancedComponent = withLogger(MyComponent);
登入後複製
15。 React.memo
React.memo 是一個高階元件，它透過記憶組件來幫助優化表現。如果 props 沒有改變，元件將跳過重新渲染。
範例：
const MyComponent = React.memo(function MyComponent(props) {
return <div>{props.text}</div>;
});
登入後複製
16。使用Reducer Hook
useReducer 鉤子是 useState 的替代方案。它對於管理更複雜的狀態邏輯非常有用，特別是當狀態依賴先前的值時。
範例：
import { useReducer } from 'react';
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, { count: 0 });
return (
<div>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<span>{state.count}</span>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
</div>
);
}
登入後複製
17。反應片段
React Fragments 讓您可以將子級清單分組，而無需向 DOM 新增額外的節點。
範例：
function Table() {
return (
<>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</>
);
}
登入後複製
18。傳送門
入口網站提供了一種將子元件渲染到父元件層次結構以外的 DOM 節點的方法。
範例：
import ReactDOM from 'react-dom';
function Modal({ children }) {
return ReactDOM.createPortal(
<div className="modal">{children}</div>,
document.getElementById('modal-root')
);
}
登入後複製
19。誤差邊界
錯誤邊界是 React 元件，可以在其子元件樹中的任何位置捕獲 JavaScript 錯誤，記錄這些錯誤並顯示後備 UI。
範例：
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
登入後複製
20。延遲載入
React 支援元件延遲加載，這意味著元件可以在需要時非同步加載，從而提高大型應用程式的效能。
範例：
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}
登入後複製
21。嚴格模式
StrictMode 是一個用於突出顯示應用程式中潛在問題的工具。它不會呈現任何可見的 UI，但會檢查是否有已棄用的生命週期方法等問題。
範例：
function App() {
return (
<React.StrictMode>
<MyComponent />
</React.StrictMode>
);
}
登入後複製
22。受控組件與非受控組件
受控元件：表單元素，其值由 React 狀態控制。
不受控制的元件：由 DOM 處理值的表單元素。
Example of Controlled Component:
function ControlledInput() {
const [value, setValue] = useState('');
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
Example of Uncontrolled Component:
function UncontrolledInput() {
const inputRef = useRef(null);
return <input type="text" ref={inputRef} />;
}
登入後複製
23。支柱鑽井
當資料通過多個層級的元件向下傳遞以到達深層嵌套的子元件時，就會發生 Prop Drilling。透過使用 Context API 或狀態管理庫可以避免這種情況。
Example of Prop Drilling:
function Grandparent() {
const name = "John";
return <Parent name={name} />;
}
function Parent({ name }) {
return <Child name={name} />;
}
function Child({ name }) {
return <p>{name}</p>;
}
登入後複製
24。渲染生命週期
React 元件有一個生命週期，其中包含在不同階段呼叫的方法，例如安裝、更新和卸載。
生命週期方法（類別組件）：
- - componentDidMount
- - componentDidUpdate
- - componentWillUnmount
範例：
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>Hello!</div>;
}
}
登入後複製
25。 useRef Hook
useRef 鉤子用於在渲染之間保留值，而不會導致重新渲染。它通常用於存取 DOM 元素或儲存可變值。
範例：
function Timer() {
const countRef = useRef(0);
useEffect(() => {
const intervalId = setInterval(() => {
countRef.current += 1;
console.log(countRef.current);
}, 1000);
return () => clearInterval(intervalId);
}, []);
return <p>Check the console to see the timer.</p>;
}
登入後複製
這些附加概念將幫助您加深對 React 的理解並應對更高級的場景！
以上是React 基礎知識第 2 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
