Javascript 是否可以使用引用作为反应组件'；是道具还是国家？

我想创建react表组件，它的值是从单个数组对象派生的。是否可以从视图侧控制组件？我的目标是，在web浏览器中使用此组件的每个用户都通过singleton view对象共享相同的数据

程序建模如下所示

数据库-服务器中只有一个数据库，其中包含不存在的独立值

DataView—有一个单例视图类，它反映数据库的表和其他相关数据，如（总和、平均值）

表-我将构建类似于表的react组件。它将显示视图的数据，并支持排序、筛选、编辑和删除行等功能。而且它没有实际数据，只有视图中的数据参考（通过浅拷贝——这是我的问题，可能吗？）

我的意图是,， -当用户更改表中的值时，

View

将其查询到DB，如果成功，

View

将引用更新的数据并将其值更改为新值，并通知

表

重新绘制其内容。--我的意思是

重新绘制

，而不是

更新值和重新绘制

。 -当用户请求通过DB交互更改视图中的值时，不需要更新组件的值，因为组件实际上没有值，只有对值的引用（如C的指针）。所以视图应该做的唯一一件事就是告诉组件重画它的内容

我听说React的组件

prop

应该是不可变的。（否则，

state

是可变的）我的目标是将对组件实际值的引用存储到它的

props

，这样就不需要额外的操作来将视图的数据反映到表中

这是概念问题，我想知道这是否可能。由于javascript不正式支持指针（我说得对吗？），我不确定这是否可行

视图类如下所示

const db_pool = require('instantiated-singleton-db-pool-interface')
class DataView {
  constructor() {
    this.sessions = ['user1', 'user2'] // Managing current user who see the table
    this.data = [ // This is View's data
    {id:1, name:'James', phone:'12345678', bank:2000, cash:300, total:2300,..},
    {id:2, name:'Michael', phone:'56785678', bank:2500, cash:250, total:2300,..},
    {id:3, name:'Tyson', phone:'23455432', bank:2000, cash:50, total:2300,..}
    ] // Note that 'total' is not in db, it is calculated --`dependent data`
  }
  notifySessionToUpdate(ids) {
    // ids : list of data id need to be updated
    this.sessions.forEach((session) => {
      session.onNotifiedUpdateRow(ids) // Call each sessions's 
    })
  }
  requestUpdateRow(row, changed_value) {
    // I didn't write async, exception related code in this function for simple to see.
    update_result = db_pool.update('UPDATE myTable set bank=2500 where id=1')
    if (update_result === 'fail') return; // Do Nothing

    select_result = db_pool.select('SELECT * from myTable where id=1') // Retrieve updated single data which object scheme is identical with this.data's data
    for (k in Object.keys(select_result)) {.ASSIGN_TO_row_IF_VALUE_ARE_DIFFERENT.} // I'm not sure if it is possible in shallow copy way either.
    calc.reCalculateRow(row) // Return nothing just recalculate dependant value in this.data which is updated right above.
    // Notify to session
    this.notifySessionToUpdate([1]) // Each component will update table if user are singing id=1's data if not seeing, it will not. [1] means id:1 data.
    return // Success
  }
... // other View features
}

关于会话部分，我正在检查如何实现会话化（？）与服务器通信的每个用户及其组件。所以我不能提供更多的代码。很抱歉我正在考虑在

React Component Table

和

DataView

之间实现另一个

UserView

（而且我认为它有助于处理用户内容信息，如排序首选项等。）

关于DB代码，它是嵌套其池和查询接口的类

我的问题是我不熟悉javascript。所以我不确定浅层复制在我遇到的所有情况下都是可以实现的

我需要考虑一下， 1.javascript是否以一致的方式完全支持shallowcopy？我的意思是像指针一样，保证检查值是否为引用。 2.Dose react的组件可以这样使用吗？无论是使用

道具

还是

状态

都可以完全填充吗

---

事实上，我强烈认为这是不可能的。但我想核实一下你的意见。似乎这是一种非常像C语言的思维方式。

重画意味着重新渲染。您可以从

Table

组件中公开

setState（）

或

dispatch（）

函数，并使用refs在

View

级别调用它们：

函数视图（）{
const ref=useRef（）；
const onDbResponse=data=>ref.current.update（数据）；
返回(
);
}
const Table=React.forwardRef（（props，ref）=>{
const[data，setData]=useState（[]）；
使用命令手柄（参考{
更新：setData
});
...
});

无论如何，我认为这样更新不是一个好的做法。为什么你不能把你的数据放在某个全局上下文中并在那里使用呢

const Context=React.createContext（{value:null，query:（）=>{}）；
常量提供程序=（{children}）=>{
const[value，setValue]=useState（）；
const query=useCallback（异步（请求）=>{
设置值（等待数据库请求（请求））；
}，[DB]）；
const context={value，query}；
返回{children}；
}
const useDB=（）=>useContext（Context）；
常量视图=（）=>{
const{request}=useDB（）；
请求（……）；
}
常数表=（）=>{
常量{value}=useDB（）；
...
}

我的意思是，您实际上描述的是redux。我会研究redux，以及它是如何根据对象的变化，使用道具来改变组件的。我需要更详细地检查你的答案，但现在，你能在下面描述一下你的观点吗？无论如何，真的很感谢你。我测试了你的代码和其他代码，并决定使用第二个你给我的建议。谢谢第一个问题是，在我的环境中（在一个页面中有大量数据需要渲染），从上到下的渲染速度非常慢，这会导致大量数据缺失