Janusz Barnat

React as a UI Runtime

Host Tree

Host Instances

Renderers

mutating mode vs persistent mode

React Elements

Lekkie obiekty reprezentujące chwilowy stan UI. Niemodyfikowalne, zawsze tworzone od nowa.

Entry point

ReactDOM.render(reactElement, domContainer)

Reconciliation

pogodzić, uzgodnić

Zadaniem Reacta jest zbudować React Element Tree i odwzorować to drzewo w Host Tree.

React przeprowadza aktualizację po zmianie stanu UI. Optymalizacja polega na tym, że jeśli typ elementu oraz miejsce w drzewie pozostaje niezmienne, to następuje modyfikacja zamiast usunięcia i utworzenia instancji hosta.

Conditions

Lists

Components

Purity

Recursion

Inversion of Control

Lazy evaluation

State

Consistency

render phase - reconciliation, budowa nowego React Element Tree, może być asynchroniczne. commit phase - zastosowanie nowego stanu do host tree. Synchroniczne, bo nie ma sensu pokazaywać pośredniego stanu.

Memoization

React.memo()

Raw Models

React rendering is O(view size) rather than O(model size) and you can significantly cut the view size with windowing.

Batching

const [count, setCounter] = useState(0)
function increment() {
  setCounter(count + 1)
}
function handleClick() {
  increment()
  increment()
  increment()
}
// Efekt: trzykrotne wywołanie setCount(1)

const [counter, dispatch] = useReducer((state, action) => {
  if (action === 'increment') {
    return state + 1;
  } else {
    return state;
  }
}, 0);

function handleClick() {
  dispatch('increment');
  dispatch('increment');
  dispatch('increment');
}