Метод setState, не отражающий изменения немедленно
Так много для этого простого вопроса, но я просто хотел выделить новую функцию на Java, которая позволит избежать всех путаниц в индексировании в массивах даже для новичков. Java-8 абстрагировал задачу итерации для вас.
int[] array = new int[5];
//If you need just the items
Arrays.stream(array).forEach(item -> { println(item); });
//If you need the index as well
IntStream.range(0, array.length).forEach(index -> { println(array[index]); })
В чем польза? Ну, с одной стороны, это читаемость, как английский. Во-вторых, вам не нужно беспокоиться о ArrayIndexOutOfBoundsException
1 ответ
Addional назначает в предыдущий ответ :
, В то время как Передействие setState асинхронное (и классы и рычаги), и заманчиво использовать тот факт для объяснения наблюдаемого поведения, это не причина, почему это происходит.
TLDR: это Закрытие объем вокруг неизменного const значение.
, Если бы асинхронный была единственная причина, это было бы возможно к await setState(), который мог бы ожидать видоизмененного state асинхронным setState().
Howerver, и props и state предположены быть неизменными во время 1 рендеринга .
Обработка
this.state, как будто это было неизменно.
С рычагами, это предположение улучшено при помощи [1 134] постоянные величины с const ключевое слово:
const [state, setState] = useState('initial')
значение могло бы отличаться между 2 рендерингом, но остается постоянной внутренней частью сам рендеринг и в любом Закрытия (функции, которые живут дольше даже после того, как рендеринг закончен, например, useEffect, обработчики событий, в любом Обещании или setTimeout).
Считают следующую фальшивку, но синхронной , как будто Реагируют реализация:
// sync implementation:
let internalState
let renderAgain
const setState = (updateFn) => {
internalState = updateFn(internalState)
renderAgain()
}
const useState = (defaultState) => {
if (!internalState) {
internalState = defaultState
}
return [internalState, setState]
}
const render = (component, node) => {
const {html, handleClick} = component()
node.innerHTML = html
renderAgain = () => render(component, node)
return handleClick
}
// test:
const MyComponent = () => {
const [x, setX] = useState(1)
console.log('in render:', x) // ✅
const handleClick = () => {
setX(current => current + 1)
console.log('in handler/effect/Promise/setTimeout:', x) // ❌ NOT updated
}
return {
html: `<button>${x}</button>`,
handleClick
}
}
const triggerClick = render(MyComponent, document.getElementById('root'))
triggerClick()
triggerClick()
triggerClick()<div id="root"></div>