Можно ли использовать ссылки в качестве опоры или состояния реагирующего компонента? - PullRequest
Новая
       28

Можно ли использовать ссылки в качестве опоры или состояния реагирующего компонента?

0 голосов
/ 22 октября 2019

Я хочу создать компонент таблицы реакции, значения которого получены из одного объекта массива. Можно ли управлять компонентом со стороны обзора? Моя цель состоит в том, чтобы каждый пользователь, использующий этот компонент в своих веб-браузерах, делился одними и теми же данными через одноэлементный объект просмотра.

Моделирование программы, как показано ниже.

  1. База данных - естьединая база данных на сервере, которая содержит вымершие и независимые значения.

  2. DataView - есть класс синглтон View, который отражает таблицу базы данных и дополнительные зависимые данные, такие как (сумма, среднее значение)

  3. Таблица - Я создам компонент реакции, который выглядит как таблица. И он покажет данные View с поддержкой сортировки, фильтрации, редактирования и удаления строки (и) (и многое другое). Также он не имеет фактических данных, имеет только ссылку на данные из View (через мелкую копию - это мой вопрос, это возможно?)

Myнамерения таковы: - Когда пользователь изменяет значение из таблицы, оно запрашивается в БД с помощью View, и в случае успеха View будет ссылаться на обновленные данные, изменять его значение на новое значение и уведомлять Table, чтобы перерисовать его содержимое. - Я имею в виду redraw, а не updating value and redraw. - Когда значения в представлении изменяются при взаимодействии с БД по запросу пользователя, нет необходимости обновлять значение компонента, поскольку компоненты фактически не имеют значений, а имеют только ссылки на значения (как указатель С). Так что только View должен сделать, просто сказать компоненту перерисовать его содержимое.

Я слышал, что компонент React prop должен быть неизменным. (В противном случае state является изменяемым) Моя цель - сохранить ссылки на реальное значение компонента в props, чтобы не было никаких дополнительных операций для отображения данных View в таблицу.

Это проблемы с концепцией, и яИнтересно, возможно ли это? Поскольку доза в 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
}

Что касается части сессии, яЯ проверяю, как реализовать сессионизацию (?) каждого пользователя и его компонента, который общается с сервером. Поэтому я не могу предоставить дополнительные коды об этом. Сожалею. Я подумываю о внедрении еще одного мелкого скопированного UserView между React Component Table и DataView (а также я думаю, что это помогает сделать что-то с информацией о пользовательском содержимом, такой как предпочтения сортировки и т. Д.) *

Относительно БДкод, это класс, который вкладывает свой пул и интерфейс запросов.

Моя проблема в том, что я не знаком с javascript. Так что я не уверен, что поверхностное копирование действительно реализуемо во всех случаях, с которыми я сталкиваюсь.

Мне нужно подумать: 1. Доза полностью поддерживает последовательное копирование javascript? Я имею в виду, как указатель, значение проверки гарантии является ссылкой или нет. 2. Компонент доза реагирования можно использовать таким образом? Используете ли вы props или state Может ли это быть выполнено?

На самом деле, я категорически не могу этого сделать. Но я хочу проверить ваше мнение. Кажется, это так, как язык языка мышления.

1 Ответ

0 голосов
/ 22 октября 2019

Перерисовка означает повторную визуализацию. Вы можете выставить setState() или dispatch() функции из Table компонента и вызывать их на 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();

  ...
}
...