Githubレポートについて👨‍🚀

Introduction🛸#

GitHub は、Git を使用したバージョン管理のソフトウェアソースコードホスティングサービスプラットフォームであり、GitHub 社（以前は Logical Awesome と呼ばれていました）の開発者である Chris Wanstrath、P.J. Hyett、Tom Preston-Werner によって Ruby on Rails で作成されました。2020 年 1 月現在、GitHub には 4000 万以上の登録ユーザーと 1.9 億以上のリポジトリ（少なくとも 2800 万のオープンソースリポジトリを含む）があり、実際には世界最大のコードホスティングサイトおよびオープンソースコミュニティとなっています。

GitHub は世界最大のオープンソースコミュニティであり、私のプログラミング学習にとって非常に重要です。以前は宿題の危機を乗り越えるために他の人のコードをコピーするために使用しましたが、以前に Puppeteer を使用して GitHub の一部のデータをスクレイピングしようとしました。そのため、自分が試したい React の関数コンポーネントと以前に書いたバックエンドを組み合わせて、人々の GitHub のデータを表示するためのページを作成することにしました。

プロジェクトのリンク：Github Report

NES.css🚀#

NES は 1980 年代後半から 1990 年代初頭に中国に導入された、80 年代生まれの人々が最初に触れたゲーム機であり、一般的には「赤白機」と呼ばれています。これは 8 ビットプロセッサを使用したゲーム機であり、NES.css は NES スタイル（8 ビット機）の CSS フレームワークであり、ピクセルスタイルの CSS コンポーネントライブラリでもあります。JavaScript の依存関係はなく、CSS のみを含んでいます。

NES.css が提供するコンポーネントスタイルは私の好みに合っており、いくつかの楽しいピクセルアイコンも提供しています。NES.css ではデフォルトで英字フォントのみがピクセルスタイルになっていますが、他の言語もピクセルスタイルにする場合は、フォントをダウンロードする必要があります。

👀詳細な使用方法は公式ドキュメントを参照してください：NES.css

React-spring🌏#

最初からページ全体をスクロールする効果を作りたいと思いました。各ページは 100vh であり、スクロールバーを非表示にし、マウススクロール（モバイルではタッチ）を監視して、ページ全体を上または下に 100vh スクロールするメソッドを実行します（margin-top を使用して超過部分を非表示にし、transition を設定してアニメーション効果を与えます）。また、スロットル（一定時間内にメソッドを 1 回だけ実行する）を実現するためにタイムスタンプも使用しました。

 function throttle(event, time) {
      let pre = 0;
      return function (...args) {
        if (Date.now() - pre > time) {
          pre = Date.now();
          event.apply(this, args);
        }
      }
 }

効果はありますが、少し普通すぎると感じました🤨。その後、React-spring のドキュメントを見て Parallax というものを見つけました。Parallax はスクロール可能なコンテナを作成し、ParallaxLayer を使用してコンテンツを包み、オフセットと速度を設定することができます。つまり、視差スクロール（ページ上の多くの要素が相互に独立してスクロールする）を作成することができます。とても見栄えが良いと思ったので、すぐに採用しました😆。

オンラインで background-attachment（背景画像の位置をビューポート内で固定するか、それを含むブロックと一緒にスクロールするか）や transform（translateZ を設定することで、スクロールの上下距離を異ならせる）を使用して実現する方法も見ましたが、React-spring の Parallax は JavaScript を使用して実装されており、スクロールを監視し、リアルタイムで位置を設定しています🤔。

時間があるときに詳しく見てみる必要があります。ドキュメントはこちら👉：React-spring

React Hook📡#

React の関数コンポーネントを使用しているので、フック関数を避けることはできません。私がよく使用するいくつかのフック関数を紹介します。

useState#

関数コンポーネントに状態を導入するためのフック関数で、この関数は配列を返します。配列の最初の要素は変数であり、2 番目の要素は変数を変更するためのメソッドです。例えば：

// "count"という名前のstate変数を宣言します
const [count, setCount] = useState(0);

useEffect#

useEffect は、componentDidMount、componentDidUpdate、componentWillUnmount の 3 つのライフサイクルメソッドを置き換えるフック関数で、コンポーネントが初めてレンダリングされるときにも useEffect () が実行されます。具体的には✍：

useEffect(
  // componentDidMountと同等
  () => {

    // componentWillUnmountと同等
    return () => {

    };
  },
  // 依存リスト、変更時にuseEffect()を実行します（componentDidUpdateと同等）
  []
);

useContext#

useContext () は、コンポーネント間で状態を共有する必要がある場合に使用されます。明示的にプロップスをコンポーネントツリーを介して渡す必要はありません。

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}
// 子コンポーネント
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
// 孫コンポーネントまたはそれ以上の階層
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useRef#

useRef は、変更可能な ref オブジェクトを返します。その.current プロパティは、渡された引数（initialValue）で初期化されます。

返された ref オブジェクトは、コンポーネントのライフサイクル全体で持続します。クラスのインスタンスプロパティのようなものであり、任意の変更可能な値を簡単に保存できます。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const intervalRef = useRef();

  const onButtonClick = () => {
    // `current`は、DOMにマウントされたテキスト入力要素を指します
    inputEl.current.focus();
  };

  useEffect(
    () => {
      const id = setInterval(() => {
        // ...
      });
      intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>

      // ...
    </>
  );
}

警告 🔒#

✅フックは最上位レベルでのみ使用する（ループ、条件、ネストされた関数内では使用しない）
✅React 関数内でフックを呼び出す
✅他のフックを呼び出すカスタムフック内でフックを呼び出す

これらは React フックのドキュメントで定義されているルールであり、その理由は、React 内部で実際の状態を保持していないためです。React は、呼び出しの順序に従って状態を追跡しています。

つまり、複数の useState 呼び出しは、リンクリストを使用して識別される複数の状態を追跡します。 もし if/else 内でフックを呼び出すと、関数コンポーネントが再実行されると呼び出し順序が変わる可能性があり、エラーが発生する可能性があります。

このプロセス：

最初のレンダリングでは、useState の順序に従って状態を宣言し、それらをグローバルな配列に配置します。状態を宣言するたびに、カーソルを 1 つ増やします。
各イベントには、対応するカーソルの状態値があります。状態イベントがトリガーされるたびに、対応する状態配列の値が変更され、再レンダリングがトリガーされます。カーソルは 0 にリセットされます。useState の宣言順に従って、最新の状態の値が順番に取り出され、ビューが更新されます。

最後に🔭#

NES.cssとReact-springに感謝します🙏

これは私個人の気まぐれな学習プロジェクトであり、改善点やバグがあればお気軽にご連絡ください🙌

もしこのものがあなたの学習に役立つことができれば、それは私の名誉です🔮