Извлекая компоненты в React

Я даю мои первые шаги в React js и я появляется пара сомнений, которая нравилась бы мне прояснять перед тем, как продолжать разрабатывать.

Как я понимаю единственное различие между

function User(props) {
    return (<li>props.userName</li>);
}

И

User: function(props) {
    return (<li>props.userName</li>);
}

Дело в том, что первая - нотация ES6 и вторая ES5. Сейчас, если я хочу позвонить в этот компонент, мне хотелось бы знать, есть ли какое-то различие между деланием этого таким:

function Comment(props) {
  return (
    <div className="prueba">
        <User user={props.user} />
    </div>
  );
}

Или я схватил:

function Comment(props) {
  return (
    <div className="prueba">
        {User(props.userr)}
    </div>
  );
}

С уже большое спасибо

0
задан 01.01.2017, 19:44
0 ответов

ES6 вводит классы и наследство в язык в то время как в ES5 он не обладает ими, эта делает различие между определением компонента React в ES5 и ES6, хотя в обоих случаях ты делаешь то же самое semánticamente (определять компонент), технически React делает две очень отличные вещи, в ES5 ты используешь функцию React .createComponent, которая получает объект, где ты поставляешь осуществление базовых методов рядом с твоими собственными методами нового компонента React, этот метод .createCompnent берется за то, чтобы изготовлять компонент из-за тебя в то время как в ES6, если ты используешь классы и наследство, чтобы создавать Компонент.

Сейчас чтобы оставлять в просвете это, так эта функция

function User(props) {
    return (<li>{props.userName}</li>);
}

и этот фрагмент кода

User: function(props) {
    return (<li>{props.userName}</li>);
}

они не являются эквивалентными ни одна remplaza другой говоря строго относительно ES6 и ES5, но говоря об этом React у них есть близость.

Здесь пример создания компонента React в ES5

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>Mi Modal.</div>
      );
    }
  }
);

Поскольку я упомянул в ES5, не существуют ни классы ни наследство следовательно несколько книжных магазинов поставляют их собственный механизм, чтобы состязаться их, все эти книжные магазины осуществляют механизм factory pattern, чтобы состязаться наследство.

В случае React этот механизм (factory pattern) выставлен функцией createClass, эта получает объект где ты "на escribes" и ты определяешь твои собственные методы, но то, что ты посылаешь, является объектом (фиксируйте-> стоимость), следовательно этот фрагмент кода, который ты пишешь.

User: function(props) {
    return (<li>{props.userName}</li>);
}

это фрагмент определения объекта.

{
  User: function(props) {
      return (<li>{props.userName}</li>);
  }
}

объект, который в React используется как параметр метода, производит .createClass для того, чтобы этот изготовил компонент.

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>Mi Modal.</div>
      );
    },

    User: function(props) {
      return (<li>{props.userName}</li>);
    }
  }
);

Если ты хочешь позвонить в этот "метод" компонента MiModal, ты должен делать это таким образом, внутри компонента (ты можешь называть функцию вне компонента, но я не вижу чувство.)

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            {this.User(this.props)}
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    },

    User: function(props) {
      return (<li>{props.userName}</li>);
    }
  }
);

Если ты хочешь сделать это в ES6, так как вещь гораздо более легкая, здесь язык вынеси классы и наследство следовательно все упрощается sintácticamente и натуральнее.

class MiModal extends React.Component {
  ...
  render(){
    return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            {this.User(this.props)}
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    }
  }

  User = (props) => {
    return (<li>{props.userName}</li>);
  }
}

После объяснения я могу указывать на путаницу, которую я могу замечать в твоем вопросе.

1-В твоем первом фрагменте кода

function User(props) {
    return (<li>{props.userName}</li>);
}

Ты можешь использовать ее в компоненте таким образом.

function User(props) {
    return (<li>{props.userName}</li>);
}

const MiModal = React.createClass(
  {
    render: function() {
      return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            <User {...this.props} />
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    }
  }
);

также не соответствуй определению метода класса в ES6, но равный ты можешь использовать это.

function User(props) {
    return (<li>{props.userName}</li>);
}

class MiModal extends React.Component {
  ...
  render(){
    return (
        <div>
          <h1>Cuenta.</h1>
          <ul>
            <User {...this.props} />
            <li>Cerrar Sesión.</>
          </ul>
        </div>
      );
    }
  }
}
1
ответ дан 03.12.2019, 17:54
  • 1
    Здравствуйте! Большое спасибо из-за того, что отвечает! Хотя ты объяснил мне несколько сомнений, читая artí такие зады как эти: toddmotto.com/react-create-class-versus-component и jamesknelson.com/… я понял, что я могу делать funció n и собирать это, больше, улучшает выступление, когда не нужно звонить в ' this' внутри компонента. Уже comencé чтобы использовать notació n < User/> и пока остается драгоценность. Привет! –  02.01.2017, 07:43
  • 2
    @Genarito спасибо за твой ответ не habí в leí do эта часть функциональных компонентов в React, я изучил что-то новое :D, corregí мой ответ, если он не подает тебя, ты предупреждаешь меня, чтобы удалять ее –  03.01.2017, 19:02
  • 3
    Я радуюсь, что он подал тебе комментарий! Ahí marqué как правильная! Спасибо, снова из-за того, что отвечает –  03.01.2017, 19:03

В ES6 существует так называемая функция Method Properties что позволяет определять методы объекта как:

obj = {
    foo (a, b) {
        …
    },
    bar (x, y) {
        …
    },
    *quux (x, y) {
        …
    }
}

С эквивалентом в ES6:

obj = {
    foo: function (a, b) {
        …
    },
    bar: function (x, y) {
        …
    },
    //  quux: no equivalent in ES5
    …
};

Прими во внимание, что одинокое стоится, когда ты перечисляешь свойства объекта.

Сейчас, на нотации JSX, которая является той, которая позволяет нам расширять компонент как будто это был HTML, считает, что эквивалент в

<User user={props.user} />

Он:

React.createElement(User, { user: props.user });

Помни, что JSX не JS, и require быть составленным. Ты можешь пытаться онлайновый составитель здесь.

1
ответ дан 03.12.2019, 17:54