Различные области в компоненте React

Question

Различные области в компоненте React

1

В React можно создать компонент со следующим синтаксисом:

import React, { Component } from 'react';
import ChildComponentOne from './ChildComponentOne';
import ChildComponentTwo from './ChildComponentTwo';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      propOne : '',
      propTwo : '',
      propThree : '',
    };

    this.doThis = this.doThis.bind(this);
    this.doThat = this.doThat.bind(this);
  }

  doThis() {
    ...doingThis code
  }

  doThat() {
    ...doingThat code
  }

  render() {
    return (
      <ChildComponentOne propOne={this.state.propOne} doThis={this.doThis}/>
      <ChildComponentTwo propTwo={this.state.propTwo} propThree={this.state.propThree} doThat={this.doThat}/>
    );
  }
}

export default App;

Использует ли React синтаксис этого класса, потому что они пытаются создать инкапсулированную и аккуратную нотацию для организации компонентов. И все остальное после метода конструктора ориентировано на React.

Или можно написать что-то вроде этого:

App.prototype.doThis = function(){};
App.prototype.doThat = function(){};

function App(){
   this.state = {
      propOne : '',
      propTwo : '',
      propThree : '',
    };

   componentDidMount(){...somecode..}

   componentWillUnmount(){...somecode..}

  render(){
        return (
          <ChildComponentOne propOne={this.state.propOne} doThis={this.doThis}/>
          <ChildComponentTwo propTwo={this.state.propTwo} propThree={this.state.propThree} doThat={this.doThat}/>
        );
  }
}

Я знаю, что я не слишком далек, поскольку можно использовать обычную функцию для создания так называемого functional component.

Угадай вопрос, как использовать методы жизненного цикла...

Antonio Pavicevac-Ortiz 14 дек. 2018, в 21:23

Источник

1

Взгляните на компоненты высшего порядка
ic3b3rg 14 дек. 2018, в 20:44
1

как использовать методы жизненного цикла - что именно вы имеете в виду? Там уже render и это метод жизненного цикла. Вам не нужно использовать это, это работа фреймворка.
Estus Flask 14 дек. 2018, в 20:46
0

@estus Извините, я обновил свой вопрос. Я просто имею в виду, если бы мне пришлось использовать componentWillUnmount(){} или componentDidMount(){} куда бы это могло пойти, если бы я объявил компонент, используя синтаксис версии конструктора / прототипа ES5.
Antonio Pavicevac-Ortiz 14 дек. 2018, в 20:59
1

Они должны идти в App.prototype , аналогично render в ответе.
Estus Flask 14 дек. 2018, в 21:01
1

Если вы хотите использовать функциональные компоненты, вы можете изучить использование хуков. reactjs.org/docs/hooks-intro.html?no-cache=1
Keith 14 дек. 2018, в 21:59

Показать ещё 3 комментария

Теги:

javascript

class

reactjs

prototype

1 ответ

Ещё вопросы

Взгляните на компоненты высшего порядка
как использовать методы жизненного цикла - что именно вы имеете в виду? Там уже render и это метод жизненного цикла. Вам не нужно использовать это, это работа фреймворка.
@estus Извините, я обновил свой вопрос. Я просто имею в виду, если бы мне пришлось использовать componentWillUnmount(){} или componentDidMount(){} куда бы это могло пойти, если бы я объявил компонент, используя синтаксис версии конструктора / прототипа ES5.
Они должны идти в App.prototype , аналогично render в ответе.
Если вы хотите использовать функциональные компоненты, вы можете изучить использование хуков. reactjs.org/docs/hooks-intro.html?no-cache=1

estus · Accepted Answer · 2018-12-14T18-00-00.000Z

Классы ES6 являются синтаксическим сахаром для классов функций. Они фактически становятся функциями, когда приложение переносится в ES5.

Ожидается, что компоненты класса React будут иметь метод render и прототипно наследуются от React.Component, в этом их отличие от функциональных компонентов.

render предпочтительно должна быть прототипом метода:

App.prototype = Object.create(Component.prototype);
App.prototype.render = function () { ... };

function App(props) { ... }

Потому что this.render =... instance не оправдан. Также может ожидаться, что это будет метод-прототип некоторых сторонних библиотек.