---
title: "Discussion on \"Ant Design Form组件封装  3：数据联动\" | Hashnode"
description: "Discussion on \"Ant Design Form组件封装  3：数据联动\". 背景：\nhttps://hashnode.com/post/cmisjocxm000b02le57zzcwux 讲了大致的组件拆分，通过遍历的方式去实现数据转成视图。我们需要进一步处理数据联动的场景，比如：字段name变动了，需要去改变字段age等。\n实现分析：\n1.通过React State驱动更新\nUI = Fn(State)，状态变化，所以视图变化。通过这种方式更新是最直觉的，但这种方式会导致re-render。\n2.通过key更新，强制更新组件\nFields组件，本质上是进行遍历循环，通..."
url: "https://hashnode.com/posts/ant-design-form-3/69328e4720261cc087f074d5"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Ant Design Form组件封装 3：数据联动](https://blog.ai-is-luv.com/ant-design-form-3?utm_source=hashnode&utm_medium=feed)

背景： https://hashnode.com/post/cmisjocxm000b02le57zzcwux 讲了大致的组件拆分，通过遍历的方式去实现数据转成视图。我们需要进一步处理数据联动的场景，比如：字段name变动了，需要去改变字段age等。 实现分析： 1.通过React State驱动更新 UI = Fn(State)，状态变化，所以视图变化。通过这种方式更新是最直觉的，但这种方式会导致re-render。 2.通过key更新，强制更新组件 Fields组件，本质上是进行遍历循环，通...

Dec 5, 2025 · 3 min read · blog.ai-is-luv.com  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#typescript](https://hashnode.com/tag/typescript)

## Written by

[wongchisum](https://hashnode.com/@wong1997)

@wong1997

  
[View profile](https://hashnode.com/@wong1997)

developer

## Responses

Markdown supported · ⌘↵ to post

No responses yet.