Различные области в компоненте React - PullRequest
Новая
       3

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

0 голосов
/ 14 декабря 2018

Можно создать компонент в 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 этот синтаксис class , потому что они пытаются создать инкапсулированную и аккуратную нотацию для организациикомпоненты.И все остальное после того, как метод конструктора центрирован на 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.

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

1 Ответ

0 голосов
/ 14 декабря 2018

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

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

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

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

function App(props) { ... }

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

...