В этой статье я расскажу вам, как мы можем просто и легко написать другой тип компонентов reactjs в соответствии с потребностями. В reactjs мы можем создать либо функциональный компонент, либо компонент класса. Мы также узнаем о многих методах создания компонентов и о том, какой метод подходит в соответствии с потребностями.
Класс компонента по умолчанию
В приведенном выше коде вы видите, что это метод по умолчанию для создания компонента в reactjs. В этом методе мы используем «React.Component» для наследования класса и определения метода рендеринга. И в методе рендеринга мы создаем константную переменную title для запроса значения заголовка от состояния. Метод Render возвращает содержимое представления компонента. И это наиболее часто используемый метод в приложении React для создания компонента.
Презентационный компонент
Приведенный выше код, который вы видите, является презентационным компонентом. Этот компонент отображает только HTML. У презентационных компонентов меньше шансов иметь состояние. Этот компонент отвечает за то, как будет выглядеть представление. И им не нужно иметь дело с состоянием и хранилищем redux (если используется redux). Эти компоненты не определяют, как данные хранятся или преобразуются в компонент.
Функциональный компонент без сохранения состояния
Приведенный ниже код является простым примером функционального компонента без сохранения состояния. Это лучший метод, если нам не нужно определять состояние для нашего компонента. Если мы не используем перехватчики жизненного цикла или состояние в компоненте, то функциональный компонент без сохранения состояния может быть лучшим методом.
Компонент, использующий метод createClass
Определение компонента с помощью метода createClass - старый метод. И этот метод очень похож на метод компонента по умолчанию. В методе компонента по умолчанию мы используем React.Component. «React.Component» полезен, когда мы используем синтаксис ES6, и этот метод позволяет нам создавать компонент с использованием синтаксиса ES6. И если вы не используете синтаксис ES6 в своем классе, тогда метод createClass является лучшим подходом для создания компонента, поскольку каждый синтаксис ES6 в конечном итоге преобразуется в синтаксис ES5.
Важно помнить
- Если вы используете в своем компоненте перехватчики жизненного цикла и состояние, то метод компонента по умолчанию является лучшим подходом для приложения.
2. Если вы не используете состояние в своем компоненте, то функциональный компонент без сохранения состояния - лучший подход для проекта.
3. Если вы создаете компонент для визуализации только HTML, то презентационный компонент является лучшим подходом для приложения.
Надеюсь, вам понравилась эта статья о дискретном способе написания компонентов reactjs.
Хлопайте 👏 по этой статье, если она вам пригодится 😃
Не стесняйтесь комментировать и ставить лайки этой статье, чтобы другие могли легко ее найти на Medium!
Привет, меня зовут Аджай Сингх Раджпут. Я фронтенд-разработчик в ZestGeek. Я пишу о JavaScript и reactjs. И делюсь своим мировоззрением со всеми, присоединяйтесь к моим поискам, подписавшись на меня в Twitter или Medium.
Хотите узнать больше о JavaScript, Reactjs и Life? Посмотрите другие мои статьи:
- Как обрабатывать ввод нескольких форм в reactjs
- Думаю о чем-то
- Сила благодарности в жизни
- Создать и развернуть приложение React на Heroku
- Замыкания в JavaScript
- Понимание подъема в JavaScript
- Войти через GitHub и Microsoft в reactjs
8. Войти через Facebook и Google в reactjs
9. Как настроить Redux и React Router v4 в вашем приложении React
10. Настройка проекта React.js с помощью простых шагов
И спасибо, что прочитали эту статью, если она вам нравится, поделитесь ею со своими друзьями и врагами. И я буду больше писать о JavaScript, react.js, оставайтесь на связи со мной.
