Показать сообщение отдельно
  #23 (permalink)  
Старый 16.07.2021, 14:26
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 902

Сообщение от Aetae
Ну так ващет нет. Три изменения - три рендера и будет. Если не больше.
вот накидал пример.
по кнопке случается все 3 вида изменений - две замены стейта, значение в пропсе, наблюдаемое значение в сторе. Перерендер один - он, похоже, идет следующим микротаском, потому что если store.func() обернуть в микротаск, то уже будет 2 рендера.

в общем, реакт с мобиксом не так уж плохи

import { makeObservable, observable, action } from 'mobx'
import React, { useState } from 'react'
import { observer } from 'mobx-react-lite'

class Store {
  constructor() {
    makeObservable(this)
  }

  @observable a = 1

  @observable b = 2

  @action func() {
    this.a += 1
    this.b += 1
  }
}

const store = new Store()

const Comp: React.FC<{ a: number }> = observer(({ a }) => {
  const [c, setC] = useState(3)
  const [d, setD] = useState(4)
  console.log('*** render Comp ', a, store.b, c, d)

  const handler = () => {
    setC(c + 1)
    setD(d + 1)
    // Promise.resolve().then(() => store.func())
    store.func()
  }

  return (
    <div>
      <div>{`a = ${a}, store.b = ${store.b}, c = ${c}, d = ${d}`}</div>
      <button type="button" onClick={handler}>
        change
      </button>
    </div>
  )
})

export const App: React.FC = observer(() => {
  console.log('*** render App')
  return <Comp a={store.a} />
})
Ответить с цитированием