Как сделать рендер добавленного объекта

Question

У меня есть доска в которой хранится двумерный массив inputOutputManager(эта нужная мне обертка для логики с item). Я немного не помаю как должен происходить новый рендер, когда добавляется inputOutputManager, в идеале конечно должен быть рендер только добавленного объекта, но я без понятия как такое должно быть реализовано.

import Board from '../model/board'
import InputOutputManager from '../model/inputOutputManager'
import Item from '../model/item'
import Column from './Colunm'

export default function BoardComponent() {
  const board = new Board()

  const hadleAddItem = (name: string) => {
    const item = new Item(name)
    const inputOutputManager = new InputOutputManager()
    inputOutputManager.addInputItem(item)

    board.addBlock(0, inputOutputManager)
  }

  return (
    <div className=" flex">
      <div className="flex flex-col items-start">
        <button onClick={() => hadleAddItem('iron')}>add Iron</button>
        <button onClick={() => hadleAddItem('copper')}>add Copper</button>
        <button onClick={() => hadleAddItem('iron')}>add Stone</button>
      </div>
      <div className="flex gap-10">
        {board.board.map((items) => (
          <Column items={items} />
        ))}
      </div>
    </div>
  )
}

Answer 1

Так, как ты делаешь, делать не надо в принципе.

Но если очень хочется, то простейшие костыли выглядят так:

const board = new Board()

const board = useRef(new Board()).current
const [x, setX] = useState(0)
const forceUpdate = useCallback(() => setX(x => x + 1))

или чуть оптимальнее

const board = useRef(null).current ||= new Board()
const [x, setX] = useState(0)
const forceUpdate = useCallback(() => setX(x => x + 1))

board.addBlock(0, inputOutputManager)

board.addBlock(0, inputOutputManager)
forceUpdate()

<Column items={items} />

Предполагаю, что тут нет memo либо ссылка items меняется.

рендер только добавленного объекта

Без рендера компонента, рендерящего список не обойтись.
Чтобы старые айтемы не рендерились (каждый из них в отдельности, а не весь список), надо компонент, который рендерит item, обернуть в memo, и при рендере списка не забыть им задать key.

БЛОГ НА HUSL

Как сделать рендер добавленного объекта

Ответы (1 шт):