Блог

Я смотрел упрощенное видео для веб-разработчиков о написании более чистого кода в React, но этот пример даже слишком чистый для моего понимания, потому что я не могу понять, какой механизм присваивает значение currCount параметру -parameter в arrow-function (который сам является параметром для функции hook setCount ), весь пример находится в github, но здесь яскопируйте фактическую компонентную функцию для контекста:

 function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount)

  function incrementCount() {
    setCount(currCount => currCount   1)
  }

  function decrementCount() {
    setCount(currCount => currCount - 1)
  }

  useEffect(() => {
    console.log(count)
  }, [count])

  return (
    <div>
      <button onClick={decrementCount}>-</button>
      {count}
      <button onClick={incrementCount}> </button>
    </div>
  )
}
  

Мне нужно введение currCount : где оно инициализируется текущей переменной count (или копией состояния?)?

Давайте начнем отсюда:

 // let's say we have
const initialCount = 1;

const [count, setCount] = useState(initialCount);
  

После этой строки у вас есть setCount функция, которую вы можете использовать для обновления count , которая на данный момент равна 1. Например, вы можете сделать setCount(123) .

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

В документах React говорится:

Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию setCount . Функция получит предыдущее значение и вернет обновленное значение.

Давайте попробуем это сделать:

 // first we need a function to compute new value 
function computeNewCount(prevCount) {
    return prevCount   1;
}

// second at some point we need to call setCount to do the actual update
// and React will call this function for you and pass previous count value as argument 
setCount(computeNewCount);
  

Обычно мы не пишем подобный код. Вместо написания функции вы можете использовать функцию со стрелкой, которая выглядит намного проще:

 // that's our computeNewCount as arrow function
prevCount => prevCount   1

// and you can pass it to setCount
// React will do the rest (as above)
setCount(prevCount => prevCount   1)
  

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

currCount => currCount является ли JS сокращением для

 function anonymous(currCount) {
  return currCount;
}
  

Вероятно, вы можете видеть, что currCount это можно назвать как угодно, потому что оно закрыто в контексте анонимной функции.

 function anonymous(iceCream) {
  return iceCream;
}
  

В этом случае setCount принимает лямбда или нефункциональное значение.
Так setCount(g => g 1) что в основном эквивалентно setCount(count 1)