Классы ES6 являются синтаксическим сахаром для функций, и (за некоторыми исключениями) их можно переписать как функции, это то, что делают транспиляторы, такие как Babel и TypeScript.
Поскольку класс компонента наследуется от React.Component, он должен прототипически наследоваться от него. React.Component не имеет статических свойств, поэтому компонент не должен их наследовать.
Этот компонент
class App extends React.Component {
state = { name: 'foo' };
componentDidMount() {
this.setState({ name: 'bar'});
}
render() {
return <p>{this.state.name}</p>;
}
}
становится
function App(props) {
React.Component.call(this, props);
this.state = { name: 'foo' };
}
App.prototype = Object.create(React.Component.prototype);
App.prototype.constructor = App;
App.prototype.componentDidMount = function () {
this.setState({ name: 'bar'});
};
App.prototype.render = function () {
return React.createElement('p', null, this.state.name);
};
Это то, что в настоящее время устарело React.createClass первоначально, create-react-class помощник служит этой цели .
если классы являются просто синтаксическим сахаром для прототипов, а es6 улучшает функциональное кодирование, можем ли мы писать кодactJS чисто функционально (и не упускать из виду методы жизненного цикла)?
Мы можем, но функциональный компонент - это не то же самое, что компонент, написанный с использованием класса JavaScript. Функциональный компонент является специфическим термином React, относящимся к без состояния функциональному компоненту. Компоненты без состояния не имеют хуков состояния и жизненного цикла. Невозможно или, по крайней мере, нецелесообразно писать настоящее приложение React с использованием только компонентов без состояния.
Подумайте о самом сложном приложении реакции, может ли оно быть написано чисто функционально - и имеет ли смысл это делать?
Умышленное уклонение от синтаксиса класса ES6 в общем случае не имеет смысла, поскольку отсутствие синтаксического сахара приводит к многословному и невыразительному коду без каких-либо преимуществ. Обычному приложению React все еще нужно использовать шаг сборки и Babel для передачи синтаксиса JSX, потому что desugared JSX представляет собой иерархию подробных вызовов React.createElement. Это практично, только если в приложении, не являющемся React ES5, используется несколько компонентов React, для которых не требуется вводить этап сборки.
Однако это возможно при использовании сторонних библиотек, например, recompose. Он предназначен для использования с функциональными компонентами, например, Помощник lifecycle позволяет прикрепить к ним крючки жизненного цикла. Конечно, для этого он использует класс компонента внутри.