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

查看 159|回复 17

作者：mouyase 发布时间：2024-4-8 05:12:08

在项目中遇到了类似这样的需求。
有一个类似表单的页面，这个页面里的每一个组件的数据源都可能会有以下几种情况。

当前页面没有任何操作时的初始值

当前页面从外部跳转过来时，使用外部跳转过来的值

当前页面编辑后，缓存到本地的值

页面里的交互逻辑，比如操作了 A 组件导致 B 组件变化了的值

基本的逻辑就是页面里总是显示最后一个激活的值，但是这种情况下不知道如何设计组件才能达到一个比较好的效果了。
之前试着把数据放进了 ref ，但是这样数据改变又很难刷新，不知道有没有什么好办法来处理呢。

rabbbit 2024-4-8 05:12:51

没太看懂，要我写就是
1 独立的表单组件，可以传值进来，用户编辑后抛出事件，别的值从哪来、存到哪一律不管。
2 取值、缓存值这些操作独立出来放外面，根据情况看封装个 hook 还是塞到状态管理里啥的。

mouyase

2024-4-8 05:13:27

@rabbbit
如果传值进来的话，是通过 props 传进来吗？那这个值是不是需要是一个 state ？那我修改 state 的时候，会导致这个组件和父级组件都重新渲染，会导致重复的生命周期。
事件传出去的值是不是也要用 state 保存呢？不然应该如何根据一个组件的值修改另一个组件呢。

huijiewei 2024-4-8 05:13:57

React 的组件只有 2 种值
1. 外部传入 props 或者 useContext 的跨组件值，这些都是外部值
2. 内部变化 state
你所说的所有情况都可以抽象为这种
当前页面没有任何操作时的初始值
当前页面从外部跳转过来时，使用外部跳转过来的值
-----
上面两种情况是一样的，都是初始值，放在 props 传入
当前页面编辑后，缓存到本地的值
-----
其实就是内部 state 的缓存，这里的缓存看你控制的细粒度了，可以整个表单的 state 缓存，也可以单独组件的 state 缓存，这里抽象会复杂一些，性能要求不高，表单控件不多的话，就用表单缓存
页面里的交互逻辑，比如操作了 A 组件导致 B 组件变化了的值
-----
A 引起 B 变化就是 B 的 props 引入了根据 A 变化的值，这种情况下 B 肯定要重新渲染的
React 的特性需要抽象成最小细粒的组件，以组件为单位渲染即可。
建议使用现成的 Form 组件或者 react-hook-form ，UI 根据数据渲染即可

rabbbit 2024-4-8 05:14:40

大概这个意思，input 组件啥都不管
import React,{ useState } from 'react';
function MyInput(props) {
return (
[i] {
props.onInput(e.target.value)
}} />
)
}
export function App(props) {
const [inputValue, setInputValue] = useState('1')
return (

{
setInputValue(value)
}}/>

);
}

mouyase

2024-4-8 05:15:35

@huijiewei 感谢解惑。
如果是操作 A 组件导致 B 组件变换。
[B]
如果是这种组件结构的话，A 去修改 B 的 props 值，则需要把 state 放到 Comp 里吧。但是如果是这样，state 就会导致整个 Comp 都会重新渲染，最后导致 CDEF 组件全都重渲染，这种情况有什么好的办法吗。

mouyase

2024-4-8 05:16:34

@rabbbit 这种情况下，MyInput 每次输入都会导致 App 组件整体重渲染吧。

rabbbit 2024-4-8 05:17:16

其实没有性能压力表单啥的重新渲染也就渲染了

rabbbit 2024-4-8 05:17:49

有性能压力的话我就不太清楚了，我这用 vue ，react 写的少。
有性能要求的时候我一般都是直接在 vue 里写原生 js 操作 DOM 或者用 lit 这种 web component 这种。

rabbbit 2024-4-8 05:18:41

也许 useMemo 能解决你说的子组件被更新的问题
参考一下这个看看？
/t/854260

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

热门主题

想问一下论坛里做企业站的站长，大家通过企

【正规福利？？】cos 不违规么？？？

如何离线浏览头条号文章

护卫神的主机面板是不是没有开源了？

干新媒体工作的多数是二十来岁的小孩

驾驶教练车闯红灯了，想知道咋处罚的。

Css被谁打死了？

开源免费 Windows 记事本 AkelPad 4.9.9

【某趣阁】小说下载，纯python脚本，无需se

自制一个可以批量下载彼岸图网壁纸的小工具

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿投放广告

Yoo趣儿网站用户应遵守规则

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

热门主题

想问一下论坛里做企业站的站长，大家通过企

【正规福利？？】cos 不违规么 ？？？

如何离线浏览头条号文章

护卫神的主机面板是不是没有开源了？

干新媒体工作的多数是二十来岁的小孩

驾驶教练车闯红灯了，想知道咋处罚的。

Css被谁打死了？

开源免费 Windows 记事本 AkelPad 4.9.9

【某趣阁】小说下载，纯python脚本，无需se

自制一个可以批量下载彼岸图网壁纸的小工具

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿 投放广告

Yoo趣儿网站用户应遵守规则

【正规福利？？】cos 不违规么？？？

在 Yoo趣儿投放广告