是否可以使用引用作为反应组件的道具或状态？

Question

我想创建 react table 组件，其值来自单个数组对象。是否可以从视图端控制组件？我的目标是每个在他们的网络浏览器中使用这个组件的用户都通过单例视图对象共享相同的数据。

程序建模如下

数据库 - 服务器中有单个数据库，其中包含已灭绝和独立的值。
DataView - 有单例视图 class 反映了数据库的 table 和附加的相关数据，如（总和，平均值）
Table - 我将构建看起来像 table 的 React 组件。它将显示 View 的数据，支持排序、过滤、编辑和删除行功能（以及更多）。 也没有实际数据，只有View的数据参考（通过浅拷贝——这是我的问题，可以吗？）

我的意图是， - 当用户从table更改值时，View查询到DB，如果成功，View将引用更新的数据并将其值更改为新值并通知Table 重绘它的内容。 -- 我的意思是 redraw，而不是 updating value and redraw。 - 当视图中的值根据用户请求与 DB 交互更改时，不需要更新组件的值，因为组件实际上没有值，只有对值的引用（如 C 的指针）。所以只有 View 应该做的就是告诉 Component 重绘它的内容。

听说React的组件prop应该是immutable。（否则，state 是 mutable）我的目标是将组件的实际值的引用存储到它的 props 中，这样就没有将视图的数据反映到 Table 中的额外操作。

是概念问题，不知道可不可以。由于javascript官方不支持指针（我说的对吗？），我不确定是否可行。

视图class如下，

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（而且我认为它有助于对用户内容信息做一些事情，比如排序偏好等......）

关于数据库代码，class嵌套了它的池和查询接口。

我的问题是我不熟悉javascript。所以我不确定在我遇到的所有情况下，浅拷贝实际上是 implementable。

我需要考虑一下， 1. Dose javascript 以一致的方式完全支持浅拷贝？我的意思是像指针一样，保证校验值是不是引用。 2. Dose React的组件可以这样使用吗？不管是用props还是state这个都能填满吗？

事实上，我强烈认为这是不可能的。但我想看看你的意见。看起来很像C语言的思维方式。

Answer 1

重绘意味着重新渲染。您可以从 Table 组件公开 setState() 或 dispatch() 函数，并使用 refs:

在 View 级别上调用它们

function View() {
  const ref = useRef();

  const onDbResponse = data => ref.current.update(data);

  return (
    <Table ref={ ref } />
  );
}

const Table = React.forwardRef((props, ref) => {
  const [ data, setData ] = useState([]);
  useImperativeHandler(ref, {
    update: setData
  });

  ...
});

无论如何，我认为这样更新不是一个好习惯。为什么不能将数据放在某个全局上下文中并在那里使用？

const Context = React.createContext({ value: null, query: () => {} });

const Provider = ({ children }) => {
  const [ value, setValue ] = useState();
  const query = useCallback(async (request) => {
    setValue(await DB.request(request));
  }, [ DB ]);

  const context = { value, query };

  return <Context.Provider value={ context }>{ children }</Context.Provider>;
}

const useDB = () => useContext(Context);

const View = () => {
  const { request } = useDB();

  request(...);
}

const Table = () => {
  const { value } = useDB();

  ...
}

是否可以使用引用作为反应组件的道具或状态？

Is it possible to use references as react component's prop or state?

javascript

reactjs

next.js