Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 26
Если нужны ajax запросы и не хочется самому делать XmlHttpRequest, всегда можно воспользоваться window.fetch. А если нужно заполифилить, то https://github.com/github/fetch :-) А то в react приложении видеть jQuery — «так себе идея» (с)
По статье хочется, чтобы была для начинающих пометка, что React компоненты — это View слой, в нем не должно находиться места бизнес-логики вашего приложения. В Вашем случае — это, например, ajax запросы на сервер. Для того, чтобы унести бизнес логику придумали как раз такие штуки как flux, redux, которые отлично применяются с react =)
По статье хочется, чтобы была для начинающих пометка, что React компоненты — это View слой, в нем не должно находиться места бизнес-логики вашего приложения. В Вашем случае — это, например, ajax запросы на сервер. Для того, чтобы унести бизнес логику придумали как раз такие штуки как flux, redux, которые отлично применяются с react =)
Это перевод оригинальной документации. Можем им пулл реквест сделать :)
ajax запросы в данном случае не являются бизнес-логикой приложения, приложение просит компонент отобразить комментарии и компонент их отображает. Приложение не знает ничего о комментариях, они не входят в его состояние. Подобный подход — это не чистый MVC, а что-то вроде HMVC, где каждое V представляет собой полноценную триаду, но верхние слои об этом не знают.
jQuery? Вы серьезно?
Дабы быть справедливым, это перевод реакт туториала, и да, там jquery.
«Узнайте почему необходимо использовать React ...» — звучит очень категорично и безальтернативно. Посмотрел оригинал там, действительно, такого агрессивного продвижения в тексте нет.
«Learn more about why to use React» — наверняка было бы правильнее перевести как «Узнайте больше о том зачем использовать React».
«Learn more about why to use React» — наверняка было бы правильнее перевести как «Узнайте больше о том зачем использовать React».
Допустим у комментария должны быть контролы для админа, кнопки удаления, редактирования и т.д. Что-бы удалить комментарий мне нужно изменить state.data у CommentBox. Что бы это сделать я должен пробросить метод для удаления от CommentBox через CommentList в Comment?
С использованием Redux разбиение на контейнеры и презентеры делается невероятно легко.
CommentBox передает функцию удаления комментария (например, removeComment(id)) CommentList, а оттуда, в свою очередь, снова же атрибутом передается эта же функция, но уже в сам Comment.
В React есть два типа компонент – презентационные и контейнеры. Так вот CommentBox – контейнер, а CommentList и Comment – презентационные компоненты.
Больше можно почитать в отличном посте от Dan Abramov: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0, в котором объясняются их отличия. :)
В React есть два типа компонент – презентационные и контейнеры. Так вот CommentBox – контейнер, а CommentList и Comment – презентационные компоненты.
Больше можно почитать в отличном посте от Dan Abramov: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0, в котором объясняются их отличия. :)
Я правильно понимаю, что в приведенном примере сервер всегда возвращает все комментарии в ответ на запрос? То есть, если их будет сотня, то каждые две секунды будут гоняться десятки килобайт трафика?
И второй вопрос: как вообще происходит перерисовка компонента react-а при изменении состояния: даже не изменившиеся объекты заново перерисуются?
И второй вопрос: как вообще происходит перерисовка компонента react-а при изменении состояния: даже не изменившиеся объекты заново перерисуются?
Взяли пример из оф документации да еще старье.
Кому сейчас нужны примеры не на es6? Кого вы обучать собрались устаревшими методами интересно?
Кому сейчас нужны примеры не на es6? Кого вы обучать собрались устаревшими методами интересно?
Хороший туториал.
Я к коментариям выше относительно потоков Flux и Redux добавил бы, что хорошей практикой является описанный полный жизненный цикл компонента.
Если есть
то должно быть и
И также для любого асинхронного кода
Иначе, если компонент планируется использовать в дальнейшем как составную часть приложения, то при свертывании будут ошибки и утечки.
Я к коментариям выше относительно потоков Flux и Redux добавил бы, что хорошей практикой является описанный полный жизненный цикл компонента.
Если есть
componentDidMount: function() {
this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
}
то должно быть и
componentWillUnmount: function() {
clearInterval(this.interval);
}
И также для любого асинхронного кода
Иначе, если компонент планируется использовать в дальнейшем как составную часть приложения, то при свертывании будут ошибки и утечки.
Ой как все плохо. А как же es6, как же наследование компонентов через extend. Зачем каждый раз в представлении писать this.state…. и вытаскивать данные, если красивее вытащить их в начале рендера, а на es6 еще красивее через let. Можите заминусить но сделать этот функционал на react-starter-kit будет намного приятней
success: function(data) {
this.setState({data: data});
}.bind(this)
Понимаю, что нужно, но расскажите зачем здесь bind?
Я не знаю кто ошибся в статье автор или переводчик, но, React JS — это не фреймворк, а библиотека (A JavaScript library for building user interfaces )
В тексте есть опечатка hendleCommentSubmit вместо handleCommentSubmit, раздел «Обратные вызовы как параметры»
И еще раз спасибо за перевод.
И еще раз спасибо за перевод.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
ReactJS 15.0.2 Tutorial