co robi super() z dowolnymi argumentami?

Question

Uczę się reagować z docs, ale nie jestem pewien, co robi super() w tym przykładzie. Zwykle nie potrzeba argumentów przekazywanych do tworzenia nowej instancji, a następnie wywołuje metodę konstruktora React.Component w celu włączenia tych argumentów do instancji? Co robi bez żadnych argumentów?

class LikeButton extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     liked: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
    this.setState({liked: !this.state.liked}); 
    } 
    render() { 
    const text = this.state.liked ? 'liked' : 'haven\'t liked'; 
    return (
     <div onClick={this.handleClick}> 
     You {text} this. Click to toggle. 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <LikeButton />, 
    document.getElementById('example') 
); 

Answer 1

W ES6, klasy pochodne muszą zadzwonić super() jeśli mają konstruktora. W reakcji wszystkie komponenty są rozszerzone z klasy Component.

Właściwie nie potrzebujesz konstruktora dla każdej klasy ES6/reagowania. Jeśli nie zdefiniowano niestandardowego konstruktora, użyje on wartości default constructor. Dla klas bazowych, to jest:

constructor() {} 

A dla klas pochodnych, domyślny konstruktor jest:

constructor(...args) { 
    super(...args); 
} 

też trzeba zadzwonić super() przed uzyskaniem dostępu this, ponieważ this nie jest inicjowany aż super() nazywa .

Istnieje kilka powodów, aby użyć niestandardowego konstruktora w reakcji. Jednym z nich jest to, że można ustawić początkowy stan w konstruktorze przy użyciu this.state = ... zamiast używać metody cyklu życia getInitialState.

Można również powiązać metody klasy wewnątrz konstruktora z this.someClassMethod = this.someClassMethod.bind(this). Lepiej jest wiązać metody w konstruktorze, ponieważ zostaną one utworzone tylko raz. W przeciwnym razie, jeśli wywołasz bind lub użyjesz funkcji strzałek do wiązania metod w dowolnym miejscu poza konstruktorem (jak w metodzie render), to w efekcie powstanie nowa instancja funkcji dla każdego renderowania. Przeczytaj więcej o tym here.

Jeśli chcesz użyć this.props w konstruktorze, trzeba zadzwonić super z rekwizytami jako argument:

constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
} 

Jeśli nie, to this.props jest niezdefiniowane w konstruktorze. Jednak nadal możesz uzyskać dostęp do this.props gdziekolwiek indziej w klasie poza konstruktorem, bez konieczności wykonywania z nią żadnych zmian w konstruktorze.