ReactNative 开发时，如何设计一个数据“灵活”的组件呢？

[mouyase]

在项目中遇到了类似这样的需求。

有一个类似表单的页面，这个页面里的每一个组件的数据源都可能会有以下几种情况。

• 当前页面没有任何操作时的初始值
• 当前页面从外部跳转过来时，使用外部跳转过来的值
• 当前页面编辑后，缓存到本地的值
• 页面里的交互逻辑，比如操作了 A 组件导致 B 组件变化了的值

基本的逻辑就是页面里总是显示最后一个激活的值，但是这种情况下不知道如何设计组件才能达到一个比较好的效果了。

之前试着把数据放进了 ref ，但是这样数据改变又很难刷新，不知道有没有什么好办法来处理呢。

[mouyase]

@huijiewei 刚刚这边做着做着就有了一个疑问。

假设还是上面的结构。

A 组件内部有一个 state ，一个按钮和一个文本，state 用来判断一个文本的展示与否。同时我需要外面（比如 B 组件）接收到这个 state 用于逻辑处理。所以我应该在按钮点击事件的时候，修改 state ，同时调用父组件传入的 onChange 函数，传出 state 。

但是如果这种情况下，我还需要 C 按钮也可以切换这个 A 组件的 state ，我应该怎么处理比较好？

我现在的做法是，在父组件放一个 state ，然后 A 组件 onChange 的时候，将传出的数值赋值到这个 state 上，同时，又把这个 state 传入 A 组件作为 prop ，然后在 a 组件用 useEffect ，当这个值变化的时候再给 A 组件内的 state 赋值。然后 C 操作的时候修改父级的 state 。

这样似乎会导致 A 组件内部按钮按下时，组件渲染两次。

[huijiewei]

@mouyase 开发的时候使用了 StrictMode ，都会渲染两次。

[mouyase]

@huijiewei 不是严格模式的问题，state 被连续赋值了两次