React 基礎知識第 2 部分-js教程-PHP中文網

React Basics Part 2

這裡有一些更高級的 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中文網其他相關文章！