Опора против государства

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

Что такое Реакт?

React — это библиотека JavaScript, созданная Facebook для более быстрого и простого создания компонентов пользовательского интерфейса. React использует Babel, компилятор JavaScript, способный переводить языки программирования в JavaScript. React использует его для преобразования JavaScriptXML (JSX) в JavaScript. Примером JSX и элемента React может быть:

const element = <h1 id =‘header’>Hello World!</h1>

JSX — это расширение JavaScript, которое, как и HTML, может иметь имена тегов, атрибуты и дочерние элементы. Если сравнить с созданием того же элемента в ванильном JavaScript,

let element = document.createElement(‘h1’)
element.id = ‘header
element.innerText = ‘Hello World!’

Таким образом, JSX позволяет нам сократить количество кода, необходимого для создания и присвоения имен элементам!

Приложения React обычно строятся вокруг одного элемента HTML, который разработчики React часто называют корневым узлом.

<div id='root'></div>

Элементы отображаются, когда вызывается следующая функция

ReactDOM.render(element, document.getElementById('root'));

Элементы React нельзя изменить, единственный способ изменить элемент React — это визуализировать новый элемент каждый раз, когда вы хотите что-то изменить.

Реквизит против состояния

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

<ChildComponent color=green/>

Внутри конструктора ChildComponent мы можем получить доступ к свойству

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

Состояние, с другой стороны, будет чем-то, что указано внутри конструктора:

constructor(){
   super();
   this.state={
      count: 0,
   };
}

Здесь состояние получает исходные данные, оно может быть жестко запрограммировано, как в предыдущем примере, или может исходить из реквизита. Разница в том, что свойства нельзя изменить, а состояние можно.

Помните, я сказал, что React не может изменять элементы, его нужно перерисовывать каждый раз, когда вы хотите его обновить? Вот тут-то и появляется setState! В следующем примере мы используем функцию для обновления количества лайков, которые имеет пост:

updateLikes() {
  this.setState((prevState) => {
    return { count: prevState.count +1}
  });
}

setState в предыдущем примере принимает функцию, поскольку она может выполняться асинхронно, поэтому вместо непосредственного обновления состояния требуется функция обратного вызова. React обновит объект состояния и перерендерит компонент одновременно.

Хотя может возникнуть соблазн написать

this.state.count = this.state.count + 1

Это плохая практика, потому что React не может прослушивать обновление состояния, поэтому ваш компонент не будет повторно отображаться.

Общий:

Свойства и состояние содержат информацию о компоненте:

Реквизиты устанавливаются родительским компонентом и не должны изменяться

Состояние содержит информацию, которая обычно инициируется внутри компонента и может быть изменена.

Я надеюсь, что вы нашли этот блог полезным, ознакомьтесь с Руководством по React Facebook для более глубокого анализа свойств и состояния, а также подписывайтесь на меня в LinkedIn и Github.