Что значит static в React

Если вкратце, то статические свойства — это свойства класса, а не экземпляра класса.

Кто использует React, часто видит ключевое слово static:

import React from 'react';

class Hello extends React.Component {
  static defaultProps = {
    name: 'World'
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Копируя код со stackoverflow, да и вообще, обычно не задумываешься над такими мелочами, особенно, если всё работает.

Статическими свойствами объявляются defaultProps, propTypes, contextTypes и displayName. А вот state (состояние компонента) не является статическим свойством.

Давайте разберём простой пример.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Foo extends Component {
  static displayName = 'Foo';
  static propTypes = { bar: PropTypes.string };
  static defaultProps = { bar: 'Bar' };
  
  state = { hello: 'Hello' };
  
  render() {
    return this.state.hello + this.props.bar;
  }
}

Если у нас есть два экземпляра компонента Foo, то displayName, propTypes, defaultProps всегда будут одинаковыми для обоих экземпляров, но состояние каждого экземпляра сможет обновляться независимо друг от друга.

thisFoo будет иметь своё состояние, и thatFoo будет иметь своё состояние, но оба будут иметь одинаковые статические свойства: displayName, propTypes и defaultProps.