对于(Next.js)开发的备忘录
React（Next.js）开发备忘录
由于是第一次参与React项目，所以写下这个备忘录。
反应钩子
使用状态
const [data, setData] = useState<Data[]>([]); //引数は初期値
笔记：data中包含数据的指针(内存地址)，实际数据在每次设置setData时都会被新建，并更新data的指针。
useEffect的用法
useEffect(() => {
console.log('dataが変更されました:', count);
}, [依存1, 依存2, 依存3...]); // 依存配列の監視対象の値が変わるたびに実行される。
useEffect(() => {
console.log('dataが変更されました:', count);
}, []); // 依存配列に空配列を指定すると、初回マウント時に1度だけ実行される。
备注：使用副作用来描述。当A发生变化时，以异步的方式执行B的处理。第一个参数是处理B，第二个参数是依赖数组[A]。
使用上下文
import React, { createContext, useState, ReactNode } from 'react';
interface MessageContextType {
message: ReactNode;
showMessage: (msg: ReactNode) => void;
}
export const MessageContext = createContext<MessageContextType | null>(null);
interface MessageProviderProps {
children: ReactNode;
}
export const MessageProvider: React.FC<MessageProviderProps> = ({ children }) => {
const [message, setMessage] = useState<ReactNode>(null);
const showMessage = (msg: ReactNode) => {
setMessage(msg);
};
const contextValue = {
message,
showMessage
};
return (
<MessageContext.Provider value={contextValue}>
{children}
</MessageContext.Provider>
);
};
使用消息.tsx
下面是自定义钩子 useMessage 的定义。
import { useContext } from 'react';
import { MessageContext, MessageContextType } from './MessageContext';
export const useMessage = () => {
const context = useContext(MessageContext);
if (!context) {
throw new Error('useMessage must be used within a MessageProvider');
}
return context as MessageContextType;
};
你的组件.tsx
这是一个定义用于显示消息组件的语句。
import React from 'react';
import { useMessage } from './useMessage';
export const YourComponent: React.FC = () => {
const { showMessage } = useMessage();
return (
<div>
<button onClick={() => showMessage(<p>メッセージ</p>)}>
Show Message
</button>
</div>
);
};
应用.tsx
这是应用程序的根组件的定义。
import React from 'react';
import { MessageProvider } from './MessageContext';
import { YourComponent } from './YourComponent';
const App: React.FC = () => {
return (
<MessageProvider>
<YourComponent />
</MessageProvider>
);
};
export default App;
以下是Next.js的目录示例。
├── public # 静的ファイルを格納
│ ├── icons # アイコンファイル
│ └── images # 画像ファイル
└── src # ソースコード
├── actions # Reduxアクションの定義
├── app # アプリケーションの主要機能やページ
│ ├── (loggedin) # ログイン後のユーザー専用コンテンツ ※
│ ├── lib # 汎用ライブラリやヘルパー関数
│ ├── login # ログイン機能関連
│ │ └── component # ログイン機能に関連するコンポーネント
│ ├── function_a # A機能関連
│ │ ├── component # A機能に関連するコンポーネント
│ │ ├── a_1 # a_1機能
│ │ └── a_2 # a_2機能
│ ├── function_b # B機能関連
│ │ ├── component # B機能に関連するコンポーネント
│ │ ├── b_1 # b_1機能
│ │ └── b_2 # b_2機能
│ ├── function_c # C機能関連
│ │ ....続く
│ └── test # テストコード
├── components # UIコンポーネント
│ ├── atoms/ # 最も基本的なUI要素
│ │ ├── Button/
│ │ ├── Icon/
│ │ ├── Input/
│ │ └── ... # その他の原子レベルのコンポーネント
│ ├── molecules/ # 原子を組み合わせたコンポーネント
│ │ ├── SearchBar/
│ │ ├── UserCard/
│ │ ├── FormField/
│ │ └── ... # その他の分子レベルのコンポーネント
│ ├── organisms/ # 分子を組み合わせたより複雑なコンポーネント
│ │ ├── Header/
│ │ ├── Footer/
│ │ ├── ProductList/
│ │ └── ... # その他の有機体レベルのコンポーネント
│ └── templates/ # ページのレイアウトを定義
│ ├── DefaultLayout/
│ ├── BlogLayout/
│ └── ... # その他のテンプレート
├── constants # 定数の定義
├── context # Reactコンテキストの定義
├── gql # GraphQLのスキーマやフラグメント
├── graphql # GraphQLクエリとミューテーション
│ ├── mutations # GraphQLミューテーション
│ └── queries # GraphQLクエリ
├── hooks # カスタムReactフック
├── middleware # ミドルウェア関連の設定や関数
├── providers # コンテキストプロバイダー
├── stores # Reduxやその他の状態管理ストア
├── styles # スタイルシート（CSSやSASS）
└── utils/ # ユーティリティ関数を格納
├── dateConverters.ts # 日付関連の変換関数
├── mathHelpers.ts # 数学的なヘルパー関数
└── ... # その他のユーティリティ関数
备忘录：在传统的Next.js中，创建项目时会生成一个名为”pages”的文件夹。但是在Next.js 13中，如果要使用”app”文件夹的功能，则需要一个名为”app”的文件夹，而不是”pages”。
共通组件
我总结了一下，不知道将共享文件放在哪里合适。
源代码/应用程序库
用途: pages 内で共通して使用される機能やヘルパー関数を配置します。
例: 特定のページでのみ使用されるデータ取得関数やページ固有のロジック。
源代碼/應用/函數A/組件。
用途: 特定の機能（この例では functionA）に関連するコンポーネントを配置します。
例: functionA 関連のページ部品やレイアウトコンポーネント。
原子组件
用途: 最も基本的なUI要素（ボタン、ラベル、入力フィールドなど）を配置します。
例: 汎用的なボタン、アイコン、ラベル。
源代碼/元件/分子化組件
用途: 複数の atoms を組み合わせたUIコンポーネントを配置します。
例: フォームフィールド（ラベル + 入力フィールド）、ユーザーカード（アバター + ユーザー名 + ユーザー情報）。
源代码/组件/有机体
用途: 複数の molecules（または atoms）を組み合わせて、より複雑なUIセクションを構築します。
例: ナビゲーションバー（ロゴ + メニューアイテム）、製品リスト（製品カードの集合）。
源码/工具类
用途: アプリケーション全体で共通して使用されるユーティリティ関数やヘルパー関数を配置します。
例: 日付のフォーマット変更、数値のフォーマット変更、APIリクエスト関数。
配置的重点 de
再利用性と範囲: atoms、molecules、organisms はUIコンポーネントの再利用性と範囲に基づいて配置されます。atoms は最も基本的で、organisms は最も複合的です。
特定の機能に焦点を当てる: src/app/functionA/component のようなディレクトリは、特定の機能や機能セットに焦点を当てたコンポーネントをグループ化します。
共通機能とユーティリティ: src/app/lib と utils は、機能やヘルパー関数をグループ化しますが、範囲が異なります。src/app/lib はページ特有の機能に対して、utils はアプリケーション全体に跨る機能に対して使用されます。(src/app/lib=画面特有, utils=画面も画面以外の処理でも使用)
应用程序路由器
1. 服务器组件 qì
使用’server-only’选项可以明确指定仅在服务器上执行的“Secure处理”（不希望在客户端执行的处理）、数据获取组件。例如，身份验证、API执行和获取时间等。
2. 客户组件
如果需要管理状态，那么客户端组件就必要。
原子设计
原子，分子
服务器组件（无需使用数据获取和状态）
除此之外
通常的定义来说
关于GraphQL。
追踪
重现
我会追赶。
退避
追踪不断
故事书
追寻
剧作家
你追我逐。
