コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > React: 再利用可能、分離、分離

React: 再利用可能、分離、分離

WBOY
リリース： 2024-08-19 17:15:03
オリジナル
1103 人が閲覧しました

新しいページで作業するときは、ページ自体にコンポーネントを書き始めるだけではありません。コンポーネントのユニットの個別化を開始して、それぞれが十分に独立し、グローバル状態の変更によって再レンダリングが発生しないようにします。たとえば、このページを作成するタスクが与えられたと想像してください。

React: Reusable, Decoupled, and Isolated

私がコードを学習していたときと同じように、これらすべてのコンポーネントを 1 つのファイルに記述したくなるかもしれません。

// WRONG
export const LoginPage = () => {
  const [userId, setUserId] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div>
      <div className="d-flex flex-row">
        <div id="marketing-container">
          <svg {...fbLogo} />
          <h2>Connect with friends and the world around you on Facebook</h2>
        </div>
        <div id="login-form">
          <div>
            <input id="user-id" value={userId} onChange={(e) => setUserId(e.target.value)} />
            <input id="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            <button>Log in</button>
            <a href="/forgot-password">Forgot password</a>
            <br />
            <button>Create new account</button>
          </div>
          <div>
            <strong>Create a page</strong>
            <span>for a celebrity, brand or business.</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default LoginPage
ログイン後にコピー

しかし実際には、これらの要素の多くは将来的にアプリ全体で再利用される可能性があり、つまり、書き直すかコピー/ペーストする必要があることになります。明確に定義されたデザインを使用する場合、要素はレゴのように使用される可能性が高く、ログイン ページに表示されるロゴはダッシュボード画面に表示されるロゴと同じになります (もちろんサイズが異なるだけかもしれません)。ユーザー ID の入力も同様ですが、デザイン的にはおそらくユーザー編集ページのものと同じでしょう。

ここで次の点に移りますが、コンポーネントはビジネス ロジックからプレゼンテーション ロジックまで分離する必要があります。これが意味するのは、状態と通信する部分はそれ自体のコンポーネントであるべきであり、このコンポーネントはプレゼンテーション用の小道具をプレゼンテーション用コンポーネントに渡すだけであるということです。

// Presentational component
const UserIdInputComponent = ({ value, onChange }) =>
  <input value={value} onChange={onChange} />

// Logic component
export const UserIdInput = () => {
  const [value, setValue] = useState('')

  const handleChange = (e) => setValue(e.target.value)

  return <UserIdInputComponent value={value} onChange={handleChange} />
}
ログイン後にコピー

これにより、状態管理から切り離されたプレゼンテーションコンポーネントをエクスポートするだけで、ストーリーブックなどのツールが適切に動作できるようになります。 API 呼び出しを行ったり、グローバルな状態を変更したりするロジックの重いコンポーネントを Storybook に統合しなければならないのは煩わしい場合があります。このアプローチを使用すると、さまざまなプロパティに基づいてコンポーネントがどのように変化するかを視覚的に確認できます。

メインページに戻ります。おそらくこれで私がどこに向かっているのかがわかるでしょう。すべてを同じページに書くのではなく。このコンポーネントを再利用する方法、状態から切り離す方法、およびこのコンポーネントに関連する props が変更されない限り再レンダリングされないように分離する方法を考えてください。

export const LoginPage = () => (
  <div>
    <div className="d-flex flex-row">
      <FbMarketing />
      <LoginForm />
    </div>
  </div>
)

export default LoginPage
ログイン後にコピー

最良のシナリオでは、これがコーディングの開始方法です。すべてが期待どおりに機能することがわかった後で、戻ってリファクタリングするのはさらに面倒です。私は画面上で何かを手早く見て、不安を和らげ、最初から適切な構造を構築し始めたいという罪を犯しています。

const FbLogo = () => (
  <svg {...fbLogoAttributes} />
)

const FbSlogan = () => (
  <h2>Connect with friends and the world around you on Facebook.</h2>
)

const FbMarketing = () => (
  <>
    <FbLogo />
    <FbSlogan />
  </>
)
ログイン後にコピー

現時点では、ここにあるものはすべてプレゼンテーションです。これらは、FbLogoSmall、FbLogoMedium などとしてさらに個別化できます。

今度は、いくつかのロジックを含む部分、つまりログインフォームです。ログインなのかログインなのかログインなのかはわかりませんが、Facebook の用語「ログイン」を使用します。

注意していただきたいのは、各コンポーネントは再利用可能であり、分離され、分離されている必要があります。

再利用可能:

まず、UserIdInput を再利用可能にしてから、このアプローチを他のパスワード入力にコピーします。本番レベルの入力には、テスト ID、props に基づいて変更されるクラス、aria 属性、autofocus などの他の属性が含まれることに注意してください。コードベースが使用するツールに応じて、その他のプロパティ/属性が追加されます。もし誰かが私がここで書いていることよりも複雑だと言うなら、その人の言うことを聞いてください。

// UserIdInput.js
import { useContext, createContext } from "react";

export const UserIdContext = createContext();

const UserIdInput = () => {
  const { userId, setUserId } = useContext(UserIdContext);

  const handleChange = (e) => {
    setUserId(e.target.value);
  };

  return <UserIdInputComponent value={userId} onChange={handleChange} />;
};
ログイン後にコピー

この入力は、たとえばユーザー編集フォームで再利用できるようになりました。パスワード入力は次のようになります:

// PasswordInput.js
import { useContext, createContext } from "react";

export const PasswordContext = createContext();

const PasswordInput = () => {
  const { password, setPassword } = useContext(PasswordContext);

  const handleChange = (e) => {
    setPassword(e.target.value);
  };

  return (
    <div>
      <PasswordInputComponent value={password} onChange={handleChange} />
    </div>
  );
};
ログイン後にコピー

デカップリング:

「ビジネス ロジック」とビジュアルの、プレゼンテーション部分からロジックを切り離すという意味での切り離し: ここでは、途中で変更や新しい関数定義を行わずに props が渡されていることがわかります。jsx も返しています。 return キーワードなしで真っすぐに。もう一度言いますが、これはもっと複雑だと言われたら、それは…ラベルは独自のコンポーネントである必要があり、入力も同様です。

// UserIdInputComponent.js
const UserIdInputComponent = ({ value, onChange }) => (
  <div>
    <label>User Id:</label>
    <input type="text" value={value} onChange={onChange} required />
  </div>
);
ログイン後にコピー
// PasswordInputComponent.js
const PasswordInputComponent = ({ value, onChange }) => (
  <div>
    <label>Password:</label>
    <input type="password" value={value} onChange={onChange} required />
  </div>
);
ログイン後にコピー

孤立:

コンテキストを作成することで分離された部分をすでに処理しました。これで、入力のいずれかを変更するたびに、他の入力は再レンダリングされなくなります。再レンダリングされる唯一の要素は、変更される入力とログイン ボタンです。これは、React アプリが適切に最適化されているかどうかを示す良い指標であり、時期尚早な最適化が適切な場合もあります。チームのスキルを向上させます。

const LoginButton = () => {
  const { userId } = useContext(UserIdContext);
  const { password } = useContext(PasswordContext);

  const onClick = (e) => {
    e.preventDefault();
    console.log("form submit", userId, password)
  };

  return <button onClick={onClick}>Log in</button>;
};
ログイン後にコピー

例外です!これは実際には起こりませんでした。コンテキストを使用して変更を分離しようとしましたが、userId とパスワードを共有することになると、redux を使用する必要がありました。UserIdProvider を使用して LoginButton をラップするとすぐに、新しい userId とパスワードで新しい状態が作成されるためです。 。 Redux を使用すると次のようになります。

// LoginButton.js
import { useSelector } from "react-redux";

const LoginButton = () => {
  const { userId, password } = useSelector(state => state)

  const onClick = (e) => {
    e.preventDefault();
    console.log("form submit", userId, password);
  };

  return <button onClick={onClick}>Log in</button>;
};

export default LoginButton
ログイン後にコピー

おそらく以前に入力したはずですが、ここに Redux ストアがあります。

// store.js
import { createSlice, configureStore } from '@reduxjs/toolkit'

const login = createSlice({
  name: 'login',
  initialState: {
    userId: '',
    password: '',
  },
  reducers: {
    userId: (state, action) => {
      state.userId = action.payload
    },
    password: (state, action) => {
      state.password = action.payload
    }
  }
})

export const { userId: setUserId, password: setPassword } = login.actions

export const store = configureStore({
  reducer: login.reducer
})
ログイン後にコピー

redux を使用していますが、変更を分離して再レンダリングを最小限に抑えるのに見事に機能します。通常、私は再レンダリングを何としても避ける人をあまり信頼しませんが、それは反応コードが優れていることを示す単なる指標です。

React: Reusable, Decoupled, and Isolated

Here are the updated files for the two inputs. Not a lot changed but pay attention to how easy it was for me to change only the business logic component. Changed the value selector, the handleChange function and that was it. This is one of the advantages of decoupling, it’s not that obvious with such a small component but a codebase that uses complex logic I can see how this approach can be beneficial.

// UserIdInput.js (revised final)
import { setUserId } from "./store";
import { useDispatch, useSelector } from "react-redux";

const UserIdInputComponent = ({ value, onChange }) => (
  <div>
    <label>User Id:</label>
    <input type="text" value={value} onChange={onChange} required />
  </div>
);

const UserIdInput = () => {
  const userId = useSelector(({ userId }) => userId)
  const dispatch = useDispatch()

  const handleChange = (e) => {
    dispatch(setUserId(e.target.value))
  };

  return <UserIdInputComponent value={userId} onChange={handleChange} />;
};
ログイン後にコピー
// PasswordInput.js (revised final)
import { useDispatch, useSelector } from "react-redux";
import { setPassword } from "./store";

const PasswordInputComponent = ({ value, onChange }) => (
  <>
    <label>Password:</label>
    <input type="password" value={value} onChange={onChange} required />
  </>
);

const PasswordInput = () => {
  const password = useSelector(({ password }) => password)
  const dispatch = useDispatch()

  const handleChange = e => {
    dispatch(setPassword(e.target.value))
  };

  return <PasswordInputComponent value={password} onChange={handleChange} />
};
ログイン後にコピー

The result should only highlight updates on the changed input and the login button itself like so:

React: Reusable, Decoupled, and Isolated

There’s a problem though, the labels are also updating. Let’s fix that really quick just to prove the point of over, but potentially necessary optimization. Up to your discretion.

// UserIdInput.js
import { setUserId } from "./store";
import { useDispatch, useSelector } from "react-redux";

const UserIdInputComponent = ({ value, onChange }) => (
  <input type="text" value={value} onChange={onChange} required />
);

const UserIdInput = () => {
  const userId = useSelector(({ userId }) => userId)
  const dispatch = useDispatch()

  const handleChange = (e) => {
    dispatch(setUserId(e.target.value))
  };

  return <UserIdInputComponent value={userId} onChange={handleChange} />;
};

// separated the label from the logic heavy component
export const UserIdInputWithLabel = () => (
  <div>
    <label>User id: </label>
    <UserIdInput />
  </div>
)

export default UserIdInputWithLabel
ログイン後にコピー

Here is the password input.

// PasswordInput.js
import { useDispatch, useSelector } from "react-redux";
import { setPassword } from "./store";

const PasswordInputComponent = ({ value, onChange }) => (
  <input type="password" value={value} onChange={onChange} required />
);

const PasswordInput = () => {
  const password = useSelector(({ password }) => password)
  const dispatch = useDispatch()

  const handleChange = e => {
    dispatch(setPassword(e.target.value))
  };

  return <PasswordInputComponent value={password} onChange={handleChange} />
};

// separated label from logic heavy component
const PasswordInputWithLabel = () => (
  <div>
    <label>Password: </label>
    <PasswordInput />
  </div>
)

export default PasswordInputWithLabel
ログイン後にコピー

This approach yields the following results:

React: Reusable, Decoupled, and Isolated

Fully optimized.

Available here: https://github.com/redpanda-bit/reusable-decoupled-isolated

Conclusion

There you have it, reusable, decoupled, and isolated react components. Very small example but hope that it gives you an idea of how production grade react applications look like. It may be disappointing for some to see all the work that goes into creating a good react component, but I’ll tell ya, once you are faced with a huge form that has complex elements and possibly some animation you will see positive gains on speed. The last thing you want is an input lagging behind in front of a 100 words per minute types.

References:

https://nextjs.org/

https://redux.js.org/

以上がReact: 再利用可能、分離、分離の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：NestJS + Opentelemetry (Grafana クラウド) 次の記事：機能フラグ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2244
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2384
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1992
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1881
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1950
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート