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>
);

最終的な感想

React は動的な UI を構築するための素晴らしいツールですが、他のテクノロジーと同様に、学習曲線が必要です。基本を受け入れ、高度な概念の探索を躊躇しないでください。最も重要なのは、構築し続けることです!

これらは、私が最初から知っていればよかった 10 のことです。 React への取り組みにかかる時間を節約し、ストレスを軽減できることを願っています。

---

これは役に立ちましたか? 以下にコメントをドロップするか、独自の React ヒントを共有してください!

以上がReact を使い始めたときに知っておきたかったことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。