React の基本パート 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.参照

Ref は、render メソッドで作成された DOM ノードまたは 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 は、コンポーネントをメモ化することでパフォーマンスの最適化に役立つ高次コンポーネントです。小道具が変更されていない場合、コンポーネントは再レンダリングをスキップします。

例:

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.text}</div>;
});

16． useReducer 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.エラー境界

エラー境界は、子コンポーネント ツリー内の任意の場所で JavaScript エラーをキャッチし、それらのエラーをログに記録し、フォールバック UI を表示する React コンポーネントです。

例:

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

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.プロペラドリル

プロップ ドリルは、データが複数のレベルのコンポーネントを介して受け渡され、深くネストされた子に到達するときに発生します。これは、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 コンポーネントには、マウント、更新、アンマウントなどのさまざまな段階で呼び出されるメソッドを含むライフサイクルがあります。

ライフサイクル メソッド (クラス コンポーネント):

1. -componentDidMount
2. -componentDidUpdate
3. -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 フック

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 中国語 Web サイトの他の関連記事を参照してください。