Когда я наткнулся на React, у меня почти не было знаний о JS. Мои коллеги и интернет, конечно же, сказали мне, что для начала работы с React JS потребуются некоторые знания JavaScript, но я рискнул. Принадлежа к тому типу людей, которые «учатся на практике», я продолжил изучение мира JavaScript и JSX, которые поставляются с React.

Изображение обложки.

Это для новичков и таких же.

2. Ключи

Я не был знаком с этой концепцией, и мне потребовалось некоторое время, чтобы понять, что происходит, когда я заметил это странное поведение —

Внутри App.js у меня были очень простые вещи,

function App() {  console.log("app")  const [state, toggle] = useState(true);
  return (    <div>    <h2>{`${state}`}</h2>    <button onClick={() => { toggle(!state) }}>Toggle</button>    </div>
 )}

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

Я ожидал один журнал при каждом нажатии кнопки. Но я заметил, что при каждом нажатии на кнопку было два лога.

Обратите внимание на журналы.

Я пошел дальше, не беспокоясь об этом поведении.

Позже, когда я заметил такое же поведение в чем-то более сложном, меня это забеспокоило. Именно тогда я понял, что такое поведение было видно только в разработке, а не в производстве. Я поискал в Интернете и обнаружил, что это связано с строгим режимом. Я заметил, что в index.js мое приложение было заключено в ‹React.StrictMode›‹/React.StrictMode›.

Цитата из самой документации ReactJS: «Строгий режим не может автоматически обнаруживать побочные эффекты, но может помочь вам обнаружить их, сделав их немного более детерминированными. Это делается путем преднамеренного двойного вызова следующих функций: методы компонента класса constructor, render и shouldComponentUpdate».

Если вы используете create-react-app , вы можете заметить, что ваше приложение упаковано в ‹React.StrictMode›‹/React.StrictMode› в index.js.

Итак, это была проблема. Вот почему у меня было два лога на каждый рендер. Хотел бы я знать это. Подробнее о строгом режиме читайте здесь.

3. Несвежее состояние

При рендеринге нескольких компонентов мы обычно сопоставляем списки, например:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);ReactDOM.render(
  <ul>{listItems}</ul>,  document.getElementById('root')
);

React использует key для оптимизации производительности. Подробнее о том, зачем нужны ключи, читайте здесь.

Из официальных документов: «Ключи помогают React определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть присвоены элементам внутри массива, чтобы придать элементам стабильную идентичность».

Теперь одна очевидная идея, которая придет на ум: мы могли бы использовать индекс массива в качестве ключа. Но подождите, подумайте еще раз, потому что это не рекомендуемый подход.

Подумайте о том, что произойдет, если список будет добавлен в начале, поскольку React полагается только на ключи, чтобы решить, следует ли обновлять DOM. Читайте об этом «здесь». Статья демонстрирует проблему на очень хорошем примере ввода текста.

Проблема в том, что в некоторых случаях в вашем распоряжении нет последнего состояния.

«https://www.lean.org.br/cnn/Ren-v-Ch01.html»
«https://www.lean.org.br/cnn/Ren-v-Ch02.html»
«https://www.lean.org.br/cnn/Ren-v-Ch03.html»
«https://www.lean.org.br/cnn/Ren-v- Ch04.html»
«https://www.lean.org.br/cnn/Ren-v-Ch05.html»
«https://www.lean.org.br/cnn/ Ren-v-Ch06.html»
«https://www.lean.org.br/moja/Kra-sev-li-Mara-Kha00.html»
«https://www. lean.org.br/moja/Kra-sev-li-Mara-Kha01.html»
«https://www.lean.org.br/moja/Kra-sev-li-Mara-Kha02.html »
«https://www.lean.org.br/moja/Kra-sev-li-Mara-Kha03.html»
«https://www.lean.org.br/moja /Kra-sev-li-Mara-Kha04.html»
«https://www.lean.org.br/moja/Kra-sev-li-Mara-Kha05.html»
«https ://www.lean.org.br/moja/Kra-sev-li-Mara-Kha06.html»
«https://www.lean.org.br/moja/Ren-v-Che- fr-Hoga00.html»
«https://www.lean.org.br/moja/Ren-v-Che-fr-Hoga01.html»
«https://www.lean. org.br/moja/Ren-v-Che-fr-Hoga02.html»
«https://www.lean.org.br/moja/Ren-v-Che-fr-Hoga03.html »
«https://www.lean.org.br/moja/Ren-v-Che-fr-Hoga04.html»
«https://www.lean.org.br/moja /Ren-v-Che-fr-Hoga05.html»
«https://www.nationsreportcard.gov/kaka/Bar-v-Lot-io01.html»
«https://www .nationsreportcard.gov/kaka/Bar-v-Lot-io02.html»
«https://www.nationsreportcard.gov/kaka/Bar-v-Lot-io03.html»
«https ://www.nationsreportcard.gov/kaka/Bar-v-Lot-io04.html»
«https://www.nationsreportcard.gov/kaka/Bar-v-Lot-io05.html»
«https://www.nationsreportcard.gov/kaka/Nor-v-sto-nnjj01.html»
«https://www.nationsreportcard.gov/kaka/Nor-v-sto-nnjj02. html»
«https://www.nationsreportcard.gov/kaka/Nor-v-sto-nnjj03.html»
«https://www.nationsreportcard.gov/kaka/Nor-v- sto-nnjj04.html»
«https://www.nationsreportcard.gov/kaka/Nor-v-sto-nnjj05.html»
«https://www.nationsreportcard.gov/kaka/ qpr-v-rot-ui01.html»
«https://www.nationsreportcard.gov/kaka/qpr-v-rot-ui02.html»
«https://www.nationsreportcard. gov/kaka/qpr-v-rot-ui03 .html»
«https://www.nationsreportcard.gov/kaka/qpr-v-rot-ui04.html»
«https://www.nationsreportcard.gov/kaka/qpr-v -rot-ui05.html»
«https://www.nationsreportcard.gov/kaka/way-v-hud-kkl01.html»
«https://www.nationsreportcard.gov/kaka /way-v-hud-kkl02.html»
«https://www.nationsreportcard.gov/kaka/way-v-hud-kkl03.html»
«https://www.nationsreportcard .gov/kaka/way-v-hud-kkl04.html»
«https://www.nationsreportcard.gov/kaka/way-v-hud-kkl05.html»
«https:/ /www.lean.org.br/moja/Bar-v-Lot-io01.html»
«https://www.lean.org.br/moja/Bar-v-Lot-io02.html»
«https://www.lean.org.br/moja/Bar-v-Lot-io03.html»
«https://www.lean.org.br/moja/Bar- v-Lot-io04.html»
«https://www.lean.org.br/moja/Bar-v-Lot-io05.html»
«https://www.lean. org.br/moja/Nor-v-sto-nnjj01.html»
«https://www.lean.org.br/moja/Nor-v-sto-nnjj02.html»
« https://www.lean.org.br/moja/Nor-v-sto-nnjj03.html»
«https://www.lean.org.br/moja/Nor-v-sto-nnjj04 .html »
«https://www.lean.org.br/moja/Nor-v-sto-nnjj05.html»
«https://www.lean.org.br/moja/qpr -v-rot-ui01.html»
«https://www.lean.org.br/moja/qpr-v-rot-ui02.html»
«https://www.lean .org.br/moja/qpr-v-rot-ui03.html»
«https://www.lean.org.br/moja/qpr-v-rot-ui04.html»
«https://www.lean.org.br/moja/qpr-v-rot-ui05.html»
«https://www.lean.org.br/moja/way-v-hud- kkl01.html»
«https://www.lean.org.br/moja/way-v-hud-kkl02.html»
«https://www.lean.org.br/ moja/way-v-hud-kkl03.html»
«https://www.lean.org.br/moja/way-v-hud-kkl04.html»
«https:// www.lean.org.br/moja/way-v-hud-kkl05.html»

В этот раз мне пришлось сильно постараться, чтобы прийти в себя. Для человека, который понятия не имел о замыканиях и их важности в контексте React, мне пришлось много читать о «закулисье» React.

Рассмотрим этот фрагмент кода,

При нажатии кнопки и обновлении состояния в журналах нет изменений. Журналы показывают начальное состояние, которое равно 0. Посмотрите на GIF ниже.

function App() {
  
    const [state, toggle] = useState(0);
  
    useEffect(()=>{
    
    setInterval(()=>{
      console.log(`state ${state}`);
    },3000)
  
},[])
    return (       <div>       <h2>{`${state}`}</h2>       <button onClick={() => { toggle(state+1) }}>Increase</button>       </div>
)
}

устаревшее состояние в setInterval

Ответ на вопрос «почему» лежит не в React, а в самом JavaScript. Это связано с тем, что называется закрытием. Читайте о замыканиях «здесь».

Здесь это не большая проблема, но представьте, что прослушиватель событий прикрепляется к объекту в useEffect и получает устаревшее состояние внутри него. Ознакомьтесь с этим ответом SO, в котором показано, как правильно использовать прослушиватели событий в useEffect.

Важно знать, что наличие фундаментальных знаний JS должно иметь более высокий приоритет, чем наличие конкретных знаний о фреймворке или библиотеке. Потому что, независимо от того, какую библиотеку вы используете, вам все равно придется писать код JS и решать проблемы, связанные с JS. Важно не ограничивать себя конкретным фреймворком/библиотекой и это возможно только при наличии сильной базы JS.

Никогда не недооценивайте знания, которые вы получите, просто просматривая документацию, особенно если она так же хороша, как у React.

Спасибо за чтение !

3 концепции React, которые я хотел бы знать, когда начинал