Crane

乙巳春节小记

2025-02-06T00:00:00Z

这篇小记记录下这个春节假期做了些什么。

线上课程

这个假期完成了 animations.dev 的课程，这份课程是假期之前付钱买的，这个是我付费的第二个线上教程，之前是 Just Javascript 。总体收获还是蛮大的，之前就对页面动画还有兴趣，只是一直没有很清晰的认识，只是偶尔用用 gsap。这一次终于有了比较全面的认识，之后就是在项目中多练手了，入门成功。

UI 升级

把 Crane 和 Docket 的 UI 都做了升级，灵感来自于之前看到的新粗野主义设计风格，整体使用更为鲜艳的色彩，更跳跃的字体，感觉自己的设计水平有所提升。其他升级包括：个人网页升级到了 eleventy v3.0 ， Docket 部署切换到 Dokploy。

读书

读完了两本书，分别是许宏老师的《最早的帝国-二里岗文明冲击波》以及《印加帝国的末日》。这个假期尤其沉迷于石峁、二里头、二里岗、殷墟这段至今依旧神秘的夏商时代，即使已经有大量的考古发现，但是这段历史似乎还是在迷雾之中，每一座城都有着自己的特色，连殷和商这两个字都是谜团，二里岗文明最大的特色是辐射范围很大，推测此时的商应该是很强大的，可是殷墟的整体风格却和二里岗大不同，出现了甲骨文、马车这些跨时代的产物，同样是商，可是考古发现却似乎是两个政权。《印加帝国的末日》是一本读起来非常非常悲痛的书，168 个西班牙人征服和毁灭了一个辉煌的文明，无数的印第安人惨死，伟大的神庙被焚毁，尊贵的君主死于非命，这样的悲剧真是不忍卒读。

观影

看了两部剧，《百年孤独》和《照明商店》，均非常推荐。

语言

看了一部分 Haskell 的文档，入门太难，仅此而已。

TradingView Advanced Chart 开发入门

2025-01-14T00:00:00Z

本文介绍的是在 Web 项目中接入 TradingView Advanced Chart 。

申请

TradingView Advanced Chart 是免费使用的，代码文件需要通过官网进行申请，申请的时候需要使用公司邮箱，申请后一周内会收到邮件回复，按照邮件内容填写并签署协议文件后回复即可，注意协议文件中邮箱要与申请邮箱保持一致。

使用

使用 TradingView widget 分三步。

第一步：从项目仓库下载，并放到项目公开目录，一般是 public 。
第二步：在 DOM 中插入 <div id="tv_chart_container"></div>
第三步：初始化 tvWidget 。

window.tvWidget = new TradingView.widget({
    library_path: "path_to_charting_library",
	locale: 'en',
	container: 'tv-chart-container',
	autosize: true,
	interval: '1', // 1 minute
	favorites: {
		intervals: ['1', '15', '1D'],
	},
	allow_symbol_change: false,
	theme: 'light',
    symbol: `EXCHANGE:BTC/USDT`, // default pair
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
	disabled_features: [...],
	enabled_features: [...],
	custom_themes: {
		light: [...],
		dark: [...]
	},
    datafeed: ...,
});

autosize 设置为 true , 可以让 widget 始终占满父容器大小，这样只需要定义父容器样式就可以了。 timiezone 设置 Intl.DateTimeFormat().resolvedOptions().timeZone , 可以在界面上按用户时区显示时间。 disabled_features 和 enabled_features 用于选择功能，当你需要隐藏某些功能时，就需要在这里配置，功能列表具体可参考文档链接。我自己的配置如下：

disabled_features: [
    'symbol_search_hot_key',
    'header_quick_search',
    'header_symbol_search',
    'header_compare',
    'header_settings',
    'header_undo_redo',
    'header_saveload',
    'items_favoriting',
    'symbol_search_hot_key',
    'symbol_info',
    'edit_buttons_in_legend',
    'delete_button_in_legend',
    'use_localstorage_for_settings',
    'create_volume_indicator_by_default',
    'popup_hints',
],
enabled_features: ['show_interval_dialog_on_key_press', 'items_favoriting'],

可以参考下图获取 UI 关键字：

custom_themes 用于设置主题，一般需要定义 light 和 dark 主题。主题包括 color1 color2 color3 color4 color5 color6 color7 white black 九个颜色，其中 color1 是主题色，color3 是红色，color4 是绿色。你可以在这里设置好主题，然后复制到项目中。

剩余一个配置就是 datafeed ，这个也是最主要的配置，datafeed 主要提供以下方法。文档链接 .

interface Datafeed {
	onReady(callback: OnReadyCallback) => void;
	searchSymbol(
      userInput: string,
      exchange: string,
      symbolType: string,
      onResult: SearchSymbolsCallback,
	) => Promise<void>;
    resolveSymbol(
      symbolName: string,
      onResolve: ResolveCallback,
      onError: DatafeedErrorCallback,
      extension?: SymbolResolveExtension,
    ) => Promise<void>;
    getBars(
      symbolInfo: LibrarySymbolInfo,
      resolution: ResolutionString,
      periodParams: PeriodParams,
      onResult: HistoryCallback,
      onError: DatafeedErrorCallback,
    ) => Promise<void>;
	subscribeBars(
      symbolInfo: LibrarySymbolInfo,
      resolution: ResolutionString,
      onTick: SubscribeBarsCallback,
      listenerGuid: string,
	  onResetCacheNeededCallback: () => void,
    ) => Promise<void>;
	unsubscribeBars(subscriberUID: string) => void
}

onReady 图表初始化完成时会调用此方法。callback 可以调用一些基础配置。 searchSymbol 用于按用户输入搜索代币。 resolveSymboll 用户获取代币信息。

const symbolInfo = {
    ticker: 'BTCUSD',
    name: 'BTCUSD',
    description: 'Bitcoin/USD',
    type: symbolItem.type,
    session: '24x7',
    timezone: 'Etc/UTC',
    exchange: 'Example Exchange',
    minmov: 1,
    pricescale: 100,
    has_intraday: false,
    visible_plots_set: 'ohlcv',
    has_weekly_and_monthly: false,
    supported_resolutions: ['1', '5', '30', '60', '1D', '1W'],
    volume_precision: 2,
    data_status: 'streaming',
};

getBars 用于获取历史数据。 subscribeBars 用于更新最新数据。 unsubscribeBars 图表切换代币时会调用此方法。

My 2024 Review

2025-01-01T00:00:00Z

2024 年度回顾

2024 是不平静的一年。也是希望萌芽的一年。万物复苏，希望 2025 多一些希望，而不是绝望。

CODE

今天工作中技术上的转变包括从 Nuxtjs v2 全面升级到 Nuxtjs v3，UI 组件也切换到了 Nuxt UI ，css 使用 tailwindcss ，开发体验的提升是显而易见的。同时也有学习开发 Nuxt Module .

个人开发中，编辑器终于切换到了 nvim ，终端使用 kitty 。经过一段时间的配置，用起来都很顺手了，感谢 avante.nvim , AI 用的也渐渐多起来了，尤其是最近一段时间，深深感受到 AI 的影响之大，要学习把 80% 的工作交给 AI 完成。最近做了一个小项目，叫作 commits-assitant，大部分代码是通过 AI 完成的，通过 git hooks 把提交的 commits 存下来，然后可以再用 AI 分析总结，当然还有生成 commit 信息的功能，AI 的出现让开发这些小工具变得很容易，这样更容易 DIY 满足自己的需求。

生活

在深夜心烦无人的时候，关灯躺着，静静的看一部老电影，慢慢变成了一个习惯，终于有机会慢慢看完了小津还有黑泽明的老电影。感谢《幕府将军》，让我可以慢慢认识日本的战国时代，看多好多好多日本剑戟片，认识了好多导演，五社英雄，小林正树，还有那个时代的风云人物，以前想了解日本历史总是不得其门，这次终于把轮廓研究清楚了。最推荐的也是最喜欢的其中一部是《夺命剑》，就像最好的剑术是无剑，这部电影便能看到无剑的剑气。

如果要推荐一本书的话，我选择《枪炮、病菌与钢铁》，只狠怎么这么晚才看这本书，以前在书店很多次看到过，看标题没想到这么这么精彩。然后陆续看了雷蒙德的其他作品，深深被他的思想折服，看他的书，仿佛面对着一个地球仪，转来转去，了解文明在各地萌芽生根发展，真的很迷人。

2024 又慢慢学会爱了。

How to fix cors issue in clerk nextjs project

2023-10-06T00:00:00Z

If you're building a web application with Next.js and using the Clerk authentication service, you may encounter a CORS (Cross-Origin Resource Sharing) issue when making API requests outside the app. This issue occurs when the browser blocks requests to a different domain than the one the app is hosted on.

With the follow steps, we'll walk through how to fix the CORS issue in a Clerk Next.js project.

Step 1. Add CORS Headers to the API Endpoint

export async function GET(request: Request) {
  return new Response("Hello, Next.js!", {
    status: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization"
    }
  });
}

Step 2. Update middleware

In this middleware, we first checks if the incoming request is an OPTIONS request, which is a preflight request that is sent by the browser to check if a cross-origin request is allowed. If it is an OPTIONS request, the middleware returns a response with headers that allow cross-origin requests. If it's not an OPTIONS request, the middleware calls the authMiddleware function from the Clerk Next.js library.

import { authMiddleware } from "@clerk/nextjs";
import { NextFetchEvent, NextRequest } from "next/server";

export function middleware(request: NextRequest, event: NextFetchEvent) {
  if (request.method === "OPTIONS") {
    const origin = request.headers.get("origin");
    return new Response(null, {
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": origin || "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers":
          "Content-Type, Authorization,  Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
        "Access-Control-Max-Age": "86400"
      }
    });
  }
  const auth = authMiddleware({});
  return auth(request, event);
}

Conclusion

In this tutorial, we walked through how to fix the CORS issue in a Clerk Next.js project. We modified the API endpoint to allow cross-origin requests, and added some headers to the response to allow the browser to access the resource.

With these changes, you can now make API requests from a different domain in your Clerk Next.js project without encountering a CORS issue.

How to set up a Prisma Client That Uses MongoDB as a Second Database

2023-08-27T00:00:00Z

最近在 Recos 项目中将字幕文件的存储转移到了 Mongo 数据库，前端项目采用的是 Nextjs + Prisma 的框架，于是需要 Prisma 添加 Mongo 的支持，其中还是遇到了一些小坑，在此记录下。

Prisma 本身是不支持连接到多个数据库的，实现方法是在 prisma 目录中新建一个文件名为 mongo_schema.prisma

generator client {
  provider = "prisma-client-js"
  output   = "./generated/mongo_client"
}

datasource db {
  provider = "mongodb"
  url      = env("MONGO_URL")
}

model subtitle {
  id_            String @id @default(auto()) @map("_id") @db.ObjectId
  ...
}

主要是在 client 里面添加 output 字段，首先在项目 .env 文件中添加 MONGO_URL,然后执行 prisma generate --schema=prisma/mongo_schema.prisma ，就会在 prisma 目录下生成 prisma client 的代码。

通过以下方法引入后就可以使用了。

import { PrismaClient as PrismaMongoClient } from "../prisma/generated/mongo_client";

值得注意的是，如果你连接到 Mongo 数据库报以下错误时

import { PrismaClient as PrismaMongoClient } from "../prisma/generated/mongo_client";

可以尝试在环境变量文件 MONGO_URL 后添加 ?authSource=admin

My 2022 Review

2023-03-04T00:00:00Z

2022 年度回顾

今天已经是 3 月 4 日了，2023 年的 3 月 4 日，这个春天特别的冷，在这个寒冷的夜里，终于想起来要补上去年的总结了。最近渐渐开始使用 Notion 来记录每天完成了哪些工作，每天到了晚上下班的时候已经不太起来白天工作的细节，每天太多细碎的工作导致很难记得太多细节，这让我有点担心。既然记不起来，那就把 GitHub Profile 的 2022 记录翻出来看，从 12 月到 1 月，也大概知道 2022 都忙了什么。

个人项目

2022 年慢慢在尝试自己做一些用 NextJs 开发的项目，使用 Figma 进行设计，虽然都没有推广成功，但是对于产品经理的角色有了更多的认识，也积累了不少的经验。产品功能的初始设计是非常重要，不然很容易完成一个先天不足的产品。

Lens.ink

lens.ink

Lens.ink 是一个基于 Lens Protocol 的 web 应用，目标是想做一个 lens 用户的应用聚合页，在这里可以快速访问 lens 生态内的应用。最后的结果并不如人意，首先是一开始的需求设定就不太正确，这并不是一个很好的需求，最终完成的项目质量也不够高。

这个项目是我最开始使用 NextJs 开发的项目，后来新项目都在用 NextJs 了，工作依旧在用 NuxtJs。另外就是第一次用 GraphQL 的 API。Tailwinds 也用的越来越熟练了。

Web3Helpers

Web3Helpers

Web3Helpers 是一个 web3 工具集合应用，目标是想把 web3 开发中的一些小任务 UI 化，比如快速创建一个 ERC20 的代币，解析 ETH 的 rawTransaction, 或者使用 JSONRPC 的请求。在开发过程中接触了 Solana Aptos Sui 等其他工链，对于这些链有了基本的认识，基于需求也开发了 Wallet Hooks, 开发过程中对于 react hooks 也有了更多的认识。对于每一个小的工具来说都是一个相对独立的应用，所以开发了对应的方便复用的 UI 组件库以及 cli 工具。

现在来看，web3helpers 还是一个不错的项目，2023 年还是值得继续开发的，可能需要开发更复杂的工具，真是添加一个简单的 swap 工具也是个不错的主意。

工作

2022 年最重要的工作是在项目中全面使用 typescript。从一开始的各种不顺手到后来变成了不可缺少。typescript 确实极大的提升了 js 的开发体验，也减少了 bug 的发生。一个例子是我写了一个 cli 工具，用于将后端项目的 api 接口文件自动生成对应的 aixos 请求库，默认支持 typescript，这样在使用这些 api 时就不用再输入返回数据的字段名了，因为 ide 会自动给出提示，在此之前是需要从浏览器中获取到接口返回的数据，再复制对应的字段到代码，这样很容易造成后端修改了字段，前端却没有及时更新的问题，又或者字段名 typo 却没有及时发现。

另外一个工作是建立了 website-template 以及 dapp-template 项目。前者用于快速创建官网项目，这一年可是写了不少官网啊，后者用于快速创建 dapp。Template 主要是统一了团队内部的插件的使用，并包含了常用的组件。

我利用十一的假期时间搭建了 abmatrix-ui 项目，目标是想把工作中常用的一些组件聚合起来，方便以后用的时候快速复用。但是并没有得到很好的维护和利用。

年底几个月都在忙 SBTAuth SDK 的开发，这对于我来说是一个蛮大的挑战，过程中学习到了很多新的知识，尤其是浏览器内消息相关的接口，也一直在不断思考项目的架构以及实现。

2023 年有一个很重要的任务是要升级到 NuxtJs3.0 以及对应的 Vue3.0。

生活

2022 年疫情终于在 n 多次的核酸后结束了，健康码终于不用再打开了，感恩家人朋友都顺利度过了。

生活上似乎没有什么大的改变，我开始在咖啡店学习做拉花了，每天进步一点点，越来越爱咖啡了。今年没有出去玩，后半年读了一些很多魏晋南北朝的书，之前火起来的魏晋热现在终于补上了，果然是个荒谬又迷人的时代。最推荐的书当属罗新老师的《漫长的余生》。最幸运的在 2022 的最后一天，认识了一个很喜欢的女生，希望 2023 年一切顺利吧。

NestedScrollView 使用指南

2023-01-30T00:00:00Z

NestedScrollView 是什么

通常当 App 页面内使用滚动组件时，为了优化用户体验，我们需要将列表的滚动区域最大化，这时候就需要 NestedScrollView 组件了，NestedScrollView 用于管理多个滚动组件，它可以让多个滚动组件嵌套滚动，这样就可以让滚动组件的滚动区域最大化。NesetedScrollView 组件最常用的场景是 SliverAppBar + TabView。

基本用法

使用 NestedScrollView 组件，我们需要使用 SliverOverlapAbsorber 和 SliverOverlapInjector 两个组件配合使用，SliverOverlapAbsorber 用于监听滚动事件，SliverOverlapInjector 用于将 SliverOverlapAbsorber 的滚动事件注入到子组件中。

NestedScrollView(
    headerSliverBuilder:
        (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverOverlapAbsorber(
          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          sliver: SliverAppBar(
            title: const Text('Snapping Nested SliverAppBar'),
            floating: true,
            snap: true,
            expandedHeight: 200.0,
            forceElevated: innerBoxIsScrolled,
          ),
        ),
      ];
    },
    body: Builder(builder: (BuildContext context) {
      return CustomScrollView(
        slivers: <Widget>[
          SliverOverlapInjector(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
        ],
    },
)

使用 TabView

NestedScrollView(
    headerSliverBuilder:
        (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverOverlapAbsorber(
          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          sliver: SliverAppBar(
            title: const Text('Snapping Nested SliverAppBar'),
            floating: true,
            snap: true,
            expandedHeight: 200.0,
            forceElevated: innerBoxIsScrolled,
            bottom: TabBar(
                tabs: [
                    ...
                ]
            )
          ),
        ),
      ];
    },
    body: TabBarView(
        children: [
        Builder(builder: (BuildContext context) {
      return CustomScrollView(
        slivers: <Widget>[
          SliverOverlapInjector(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
        ],
    },],),
)

使用 RefrfeshIndicator

在 NestedScrollView 中使用 RefreshIndicator 时，需要设置 notificationPredicate 属性，否则会出现刷新指示器无法显示的问题。

 RefreshIndicator(
        onRefresh: () async {
            ...
        },
        notificationPredicate: (_) {
            return true;
            },
        )

自定义顶部样式

您可以修改 FlexiableSpaceBar 组件修改滚动时的头部效果。

if (widget.stretchModes.contains(StretchMode.fadeTitle) &&
    constraints.maxHeight > settings.maxExtent) {
final double stretchOpacity = 1 -
    clampDouble((constraints.maxHeight - settings.maxExtent) / 100,
        0.0, 1.0);
title = Opacity(
    opacity: stretchOpacity,
    child: title,
);
}

My 2021 Review

2022-01-28T00:00:00Z

2021 年度回顾

新工作

2021 年开始了新工作，做起来以前一直想做的事。从慢慢熟悉到常常加班，走过了整整一年。2021 年对我来说是一个新的开始，总体走得还是挺顺利的。

技术上来说从零开始学习 web 开发，现在 Js Ts Vue 都有很好的掌握，对于状态管理也有了更深刻的认识。欠缺的部分在于 React 以及 Html Dom Css 基础还不够深厚。这也是新的一年需要提高的地方。

Flutter 用起来越来越顺手了，各个状态管理插件都有接触，项目整体的组织也驾轻就熟了， FFI 经过几个项目使用也很熟练了。需要提高的地方在于提升 App 的性能，目前这块没有做的很好。

其他熟悉的语言包括 Ruby(快忘记了) Php Golang Rust Swift Kotlin,这些都有锁学习，但是都不够深入，新的一年应把重点放在 Swift & Kotlin，这两种语言是开发原生应用的基础，新的一年希望能完成自己的原生应用作品。

此外，还学习了很多区块链的知识。Solana 看起来还不错，希望我的钱包应用能尽快完成。

有两点需要反思：

学习的内容可能需要更集中一些，目前还是太分散了，需要确定自己真正需要的，然后花更多的时间。
下半年加班时间太多了，还是应该给生活多留一些时间。

Thinking in React

2021-10-22T00:00:00Z

本文翻译自 https://beta.reactjs.org/learn/thinking-in-react

React 可以改变你看待设计以及开发应用的想法。在使用 React 之前，你看到的可能是茫茫一片树林，之后你会看清楚树林中的每一棵树。React 让设计系统和 UI 状态管理变得简单。在这个教程中，我们将帮助你使用 React 完成一个支持搜索的产品表格的应用。

从设计图纸开始

假设你拥有一个 JSON API 接口，以及设计师的设计图。

JSON API 返回的数据如下：

[
  { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
  { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
  { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
  { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
  { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
  { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
]

设计图如下：

你将通过以下五个步骤来完成这个 UI 设计。

步骤一将 UI 划分成组件

首先你需要在设计图中划出组件及子组件并命名。如果你和设计师一起工作，可能设计师已经在设计工具里对这些组件进行了命名，你可以查看。

根据你的背景不同，将设计图纸划分为组件一般有以下几种方式：

编程使用你创建函数或这对象的思路，其中一种思路是单一任务原则, 是指一个组件应该只完成一项任务。如果它一直变大，那就应该分成更小的子组件。
CSS 根据你创建 CSS 选择器的思路（但是组件没有这么颗粒化）。
设计根据你设计图层的思路。

如果你的 JSON 结构好的话，你会发现它可以对应到 UI 结构的组件。这是因为 UI 和数据结构通常有相同的信息结构，也就是形状。将 UI 划分成每一个组件，每一个组件关联一个数据结构。

在这个屏幕上有五个组件。

FilterableProductTable (灰色) 表示整个 APP
Searchbar (蓝色) 接受用户输入
ProductTable(紫色) 展示和过滤根据用户输入获取的列表
ProductCategoryRow (绿色) 每一个分类头部
ProductRow （黄色）展示产品列

如果你观察 ProductionTable(紫色), 你会发现表格头部(包括名字和价格标签) 并不是它自己的组件. 这是一种偏好，你可以选择任何一种方式。对于这个例子，它作为 ProductTable 一部分是因为它属于 ProductTable 的列表。然而，如果表格头部变得很复杂的话（比如新增排序）, 使用单独的 ProducTableHeader 组件就很有必要了。

Now that you’ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy: 现在你已经在设计图中分出了组件，并进行了分组。设计图中组件里的组件对应为架构里的子组件。

FilterableProductTable
- SearchBar
- ProductTable
  - ProductCategoryRow
  - ProductRow

步骤二用 React 构建静态页面

现在你已经有了组件树，是时候构建应用了。最直接的做法就是构建一个版本，仅使用数据模型渲染 UI，不添加任何互动。往往构建静态页面是较为容易的，之后再增加互动。构建静态页面需要大量的敲键盘且不需要太多思考，但是增加互动需要大量的思考，已经不那那么多代码。

要构建一个应用渲染你的数据模型，你需要先实现复用组件的组件并且通过 Props 传值。Props 是一种将数据从父组件传递到子组件的方法。如果你对状态管理很熟悉，请不要在构建静态版本时使用状态管理，状态管理通常用于互动，也就是数据会随着时间改变。对于静态页面并不需要。

你可以自上而下构建组件，从组件架构里较高层级的组件（比如 FilterableProductTable ）开始，也可以自下而上构建组件，从组件架构里较底层的组件（比如 ProductionRow ）开始。对于简单的应用，一般采用自上而下的方式，对于大型的项目，采用自下而上的方式更为容易。

function ProductCategoryRow({ category }) {
  return (
    <tr>
      <th colSpan="2">{category}</th>
    </tr>
  );
}

function ProductRow({ product }) {
  const name = product.stocked ? product.name : <span>{product.name}</span>;

  return (
    <tr>
      <td>{name}</td>
      <td>{product.price}</td>
    </tr>
  );
}

function ProductTable({ products }) {
  const rows = [];
  let lastCategory = null;

  products.forEach((product) => {
    if (product.category !== lastCategory) {
      rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
    }
    rows.push(<ProductRow product={product} key={product.name} />);
    lastCategory = product.category;
  });

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
}

function SearchBar() {
  return (
    <form>
      <input type="text" placeholder="Search..." />
      <label>
        <input type="checkbox" /> Only show products in stock
      </label>
    </form>
  );
}

function FilterableProductTable({ products }) {
  return (
    <div>
      <SearchBar />
      <ProductTable products={products} />
    </div>
  );
}

const PRODUCTS = [
  { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
  { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
  { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
  { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
  { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
  { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
];

export default function App() {
  return <FilterableProductTable products={PRODUCTS} />;
}

不要对这段代码感到担心，在这个教程，我们更注重概念而不是代码。你可以通过Describing the UI 更多了解这段代码。

构建组件完成后，你将拥有一个组件库来渲染你的数据。因为这是一个静态数据，组件将只返回 JSX 。顶层的组件 (FilterableProductTable) 将会接受数据模型作为 Prop 。这就是所谓的单向数据流，因为数据从顶层组件流向底层的组件。

步骤三找到最小化但完整的应用状态

想要 UI 用互动性，你需要运行用户改变数据模型。你需要通过状态管理来实现。

状态其实是你的应用需要记住的实时变化的数据的最小集合。构建状态最重要的原则就是不要重复 DRY。找出你的应用所需要状态的最小代表，剩余的则通过计算实现。例如，如果你在构建一个购物清单，你可以将商品存储在一个数组里。如果你想展示商品的数量，不要存储数据在另一个状态值里，而是使用数组的长度。

以下是应用里的所有数据：

原始产品列表
用户输入内容
选择框数据
过滤后的产品列表

这其中那些是状态值？那些不是呢？

数据不会改变，那一定不属于状态
数据来自于父组件，一定不属于状态
可以通过已有的状态值和数据值计算，那一定不属于状态值

剩余的基本都是状态值。

让我们一个一个来分析：

原始产品数据通过 Props 传值，不属于状态值。
搜索值是状态值因为它会随着时间改变并且不能计算而来。
选择框的值是状态值因为会随着时间改变并且不能计算而来。
过滤后的产品不属于状态值，因为它可以通过原始产品列表和搜索值以及选择框数据计算而来。

可见，只有搜索值和选择框的值属于状态值。

#### 深入
在 React 中有两种数据 Props 和 State,这两者有很大不同。
* Props 像你在函数中的传入变量。它帮助父组件将数据传值给子组件，修改子组件的样式。比如， Form 可以传递颜色值给 Button 。
* State 像组件的记忆。它帮助组件追踪一些信息并根据信息改变自己的状态。比如，Button 需要追踪 isHovered 状态值。

Props 和 State 是不同的，但是它们一起工作，父组件经常保持一些信息在状态值里，通过 Prop 将数据传递给子组件。第一次阅读时感到疑惑是正常的，这需要通过联系慢慢熟悉。

步骤四判断状态所处位置

在确定应用的状态值后，你需要判断哪一个组件用来负责状态修改，或者拥有状态值。记住： React 使用单向数据流，从父级组件传递数据到字组件。哪个组件应该拥有状态值可能不是立刻清晰。当你的第一次接触时会很有挑战，你可以通过以下步骤来完成。

对于你应用里的每一个状态值：

找出根据状态值渲染数据的组件。
找出它们最接近的共同父级组件。
确定状态值的位置：
1. 通常，你可以将状态值放在共同父组件里。
2. 你可以将状态值放在共同父组件更上层的组件中。
3. 如果你找不到一个组件可以放置状态，你可以单独创建一个新的组件，并把他添加为共同父组件的上层组件。

在前面的步骤中，你发现了应用中需要两个状态值：搜索框输入值和选择框输入值。在这个例子中，它们总是共同出现，因此可以认为它们是同一个状态。

现在我们来整理这些状态值：

找到使用状态值的组件
- ProructTable 需要更具状态过滤产品列表。
- SearchBar 需要展示状态值。
找到共同的父组件。最先的共同父组件是 FilterableProductTable 。
决定状态值位置。状态将位于 FilterableProductTable 。

因此状态值将位于 FilterableProductTable 。

使用 useState(hook) 来管理组件状态。钩子可以帮助你在组件的渲染过程中。在 FilterableProductTable 最上层添加两个状态变量并赋予初始值。

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);

然后，将 filterText 和 isStockOnly 传递到 ProductTable 和 SearchBar 。

<div>
  <SearchBar filterText={filterText} inStockOnly={inStockOnly} />
  <ProductTable products={products} filterText={filterText} inStockOnly={inStockOnly} />
</div>

你可以看到应用如何执行。通过修改 useState('') 为 useState('fruit') 修改 filerText 初始值。你可以看到搜索值和表格更新。

在上面的 sandbox 里， ProductTable 和 SearchBar 读取 filerText 和 inStockOnly props 来渲染表格，输入框和选择框。例如，这里是 SearchBar 设置初始值。

function SearchBar({ filterText, inStockOnly }) {
  return (
    <form>
      <input
        type="text"
        value={filterText}
        placeholder="Search..."/>

Refer to the Managing State to dive deeper into how React uses state and how you can organize your app with it.

你可以通过管理状态来了解更多关于 React 使用状态以及你如何在应用里管理状态。

步骤五添加逆向数据流

现在你的应用可以正确渲染 props 和 states 流向。但是要支持根据用户输入修改状态，你需要支持数据从另一个方向流动: 下层的表单组件需要更新 FilterableProductTable 状态。

React 保证数据流动是精确的，但是它需要更多的代码来实现双向绑定。如果你试着在输入框输入数据或者选择选择框，你会发现 React 忽略你的输入。这是有意为之的。通过 <input value={filterText}></input>,你已经设置输入的值永远等于 filterText 状态值，因为 filterText 的状态值从来没有被设置，输入值就不会变。

你想要根据用户修改输入值更新状态。状态值属于 FilterableProductTable ,因此只有它可以使用 setFilterText 和 setInStockOnly 。为了让 SearchBar 更新 FilterableProductTable 的状态值，你需要传递这些函数到 SearchBar 。

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);

  return (
    <div>
      <SearchBar
        filterText={filterText}
        inStockOnly={inStockOnly}
        onFilterTextChange={setFilterText}
        onInStockOnlyChange={setInStockOnly} />

Inside the SearchBar, you will add the onChange event handlers and set the parent state from them:

在 SearchBar 中，你可以添加 onChange 事件处理和设置父级组件。

<input
  type="text"
  value={filterText}
  placeholder="Search..."
  onChange={(e) => onFilterTextChange(e.target.value)}
/>

现在应用正常工作了。

你可以在添加互动学习所以关于处理事件更新状态。