React を使い始めたときに知っておきたかったこと-jsチュートリアル-php.cn

React を使い始めたときに知っておきたかったこと

Barbara Streisand

リリース： 2024-10-03 10:28:02

オリジナル

786 人が閲覧しました

Things I Wish I Knew When I Started with React

3 年間の React 開発から得た教訓

私が初めて React に飛び込んだとき、パンドラの箱を開けたような気分でした。学ぶことがたくさんあり、途中でたくさんの「なるほど！」に出会いました。瞬間。ここでは、React を始めるときに知っておきたかった 10 のことを紹介します。これは、React の旅でいくつかのスピードバンプを回避できるようにするためです。

1. コンポーネントは単なる関数です

最も重要な認識は何ですか? React コンポーネントは単なる JavaScript 関数です。引数として props を渡すと、HTML のように見える JSX が返されますが、HTML ではありません。コンポーネントをこのように考えると、props や state などの概念を理解するのがはるかに簡単になります。

const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

ログイン後にコピー

2. 状態とプロパティが異なります

これは今では基本的なことのように思えるかもしれませんが、初期の頃、props と state の違いは私にとって明らかではありませんでした。ここで簡単におさらいしてみましょう:

Props は外部であり、不変です (コンポーネントに渡すデータ)。
状態は内部であり、変更可能です (コンポーネント内で管理されます)。

疑わしい場合: データが親からのものである場合、それは小道具です。データがコンポーネント内に存在する場合、それは状態です。

3. フックはゲームを変える

React がフックを導入したとき、それはゲームチェンジャーでした。ライフサイクルメソッドをやりくりする代わりに、useState や useEffect などのフックを使用して状態と副作用を簡単に管理できるようになりました。これらのフックがどれほど強力でシンプルなコードを作成できるかを最初から知っていればよかったと思います。

const [count, setCount] = useState(0);
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

ログイン後にコピー

4. 仮想 DOM を理解する

私は後になるまで React の Virtual DOM がどのように機能するかを完全には理解していませんでしたが、それは間違いでした。 React の効率は、実際の DOM を直接更新するのではなく、仮想 DOM を更新することで実現します。変更を比較することで、React は必要なものだけを更新し、アプリを高速化します。

5. 継承よりもコンポーネントの構成

React は、クラスベースの継承ではなく、コンポーネントの構成 (コンポーネントを相互にネストすること) を優先します。コンポーネント間でロジックを再利用する必要がある場合は、継承を使用するのではなく、ロジックを再利用可能なコンポーネントまたはカスタムフックに抽出することをお勧めします。

const Greeting = ({name}) => <h1>Hello, {name}!</h1>;
const Page = () => <Greeting name="John" />;

ログイン後にコピー

6. 状態の管理は芸術です

アプリが成長するにつれて、状態管理は難しくなります。ローカルコンポーネントの状態は小規模なアプリではうまく機能しますが、大規模なアプリの場合は、Context API などのツールや Redux などのライブラリがアプリケーション全体の状態を管理するのに役立ちます。 Redux を始めるのが早すぎましたが、今では、より重いツールを導入する前に、useContext や useReducer などのより単純なソリューションに頼るべきタイミングがわかりました。

const MyContext = React.createContext();
const App = () => {
  return (
    <MyContext.Provider value={/* some value */}>
      <ComponentA />
    </MyContext.Provider>
  );
};

ログイン後にコピー

7. TypeScript は努力する価値があります

大規模なコードベースに取り組んでいる場合、TypeScript を採用することは学習する価値があります。型を強制することでバグを早期に防ぐことができ、他の開発者との共同作業がよりスムーズになります。最初は TypeScript に苦労しましたが、一度受け入れると、React コードはより堅牢になりました。

interface Props {
  title: string;
}
const MyComponent: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

ログイン後にコピー

8. スコープ付きスタイリングのための CSS-in-JS

私が始めたとき、私は互いに衝突するグローバルなスタイルと格闘しました。 styled-component や Emotion のような CSS-in-JS ライブラリは、コンポーネントロジックと並行して有効なスコープ付きスタイルを許可することで、私にとって状況を変えました。

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

const App = () => <Button>Click Me</Button>;

ログイン後にコピー

9. テストは思ったより簡単です

React コンポーネントのテストは怖ろしいものでしたが、React Testing Library や Jest などのツールを使用すると簡単に行えます。重要なコンポーネントのテストを作成して、コンポーネントが期待どおりに動作することを確認してください。そうすれば、後で自分自身に感謝することになります。

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the title', () => {
  const { getByText } = render(<MyComponent title="Hello" />);
  expect(getByText(/Hello/i)).toBeInTheDocument();
});

ログイン後にコピー

10. 最適化が重要

アプリがスケールするにつれて、パフォーマンスを最適化する必要があります。メモ化 (React.memo)、コンポーネントの遅延読み込み (React.lazy)、コードの分割 (React.Suspense) などのテクニックにより、ユーザーエクスペリエンスを大幅に向上させることができます。私にとってパフォーマンスは最初の頃は最優先事項ではありませんでしたが、あなたにとってもそうであるはずです!

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

ログイン後にコピー