React の基本パート 2-jsチュートリアル-php.cn

React の基本パート 2

DDD

リリース： 2024-09-19 06:27:06

オリジナル

825 人が閲覧しました

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.参照

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 コンポーネントには、マウント、更新、アンマウントなどのさまざまな段階で呼び出されるメソッドを含むライフサイクルがあります。

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

-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 フック

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