Прежде всего, прежде чем изучать эту структуру, вам нужно иметь некоторое понимание следующих знаний:
1. Основы местных JS
2. Основы CSS
3.NPM Основы управления пакетами
4. Основы проекта WebPack Build
5.es6 Технические характеристики
Вышеупомянутые пять точек знания также являются предварительными задачами, которые должны быть поняты при изучении других фронтальных рамок.
Я не скажу много о JS и CSS. NPM в настоящее время является наиболее защищенным и доминирующим инструментом управления пакетами. Вы можете рассмотреть его, если вы все еще используете Bower или другие инструменты. Как новое поколение упаковочных инструментов, Webpack уже доминировал в инструментах упаковки переднего интерната и имеет большое преимущество по сравнению с браузерофинией. Что касается спецификации ES6, хотя основные браузеры сейчас не совместимы, они могут быть преобразованы с использованием преобразователей, таких как Babel.
Сочетая некоторые другие основные фронтальные рамки, я лично считаю, что есть три основных вещах для создания одностраничных приложений: компоненты, маршрутизация и управление государством . Затем я введу React на основе этих трех, конечно, там будет несколько дополнительных знаний.
Компоненты
Написание и вызов Component React в основном зависит от модульности ES6 и синтаксиса JSX. Вот пример:
// main.jsimport React от 'React'Import {render} из' react-dom'import myComponent от './component.js'import' ./main.css'// main component class mydemo extends react.component {render () {return (<divencename = "box"> <myComponent/> <//> <//> <//> <//> <//> <//> <//> <//> <//> <//> <//-> <//-> <//-> <//-> <//- <Mydemo/>), document.getElementbyId ('app')) // component.js // подкомпонентный импорт React from 'React'Export по умолчанию класс MyComponent Extens React.component {render () {return (<div> <p> это компонент!По сравнению с структурой Vue.js я лично думаю, что способ, которым написаны компоненты реагирования, не так удобно, как Vue, а стиль CSS компонента все еще отделен от внешней части компонента, поэтому его не очень удобно поддерживать.
Из этого примера мы можем увидеть особенности виртуального DOM и JSX React. По сравнению с другими рамками, виртуальный DOM React может не только повысить производительность страницы, но и предотвратить атаки XSS и т. Д. Конкретные принципы виртуального DOM здесь не представлены
Что касается синтаксиса JSX, это своего рода синтаксис сахара JS. Мы можем легко реализовать некоторые функции с помощью этого синтаксического сахара. Здесь JSX преобразует синтаксис XML в чистый Javascript, а XML -элементы, атрибуты и детские узлы преобразуются в параметры React.createElement. Подобные синтаксические сахара JS включают в себя типовые и другие типы.
маршрутизация
Механизм маршрутизации фронта является одной из наиболее важных связей в создании одностраничных приложений (SPA). Благодаря маршрутизации передней части мы можем оптимизировать пользовательский опыт, не получая все данные с сервера каждый раз, чтобы быстро представить страницу пользователю.
Реакция маршрутизации зависит от маршрутизатора React . REACT Router сохраняет синхронизацию пользовательского интерфейса и URL. Он имеет простые API и мощные функции, такие как загрузка буферизации кода, динамическое соответствие маршрутизации и установление правильного перехода местоположения.
Вот пример реализации:
import React, { Component } from 'react'import { render } from 'react-dom'import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'const ACTIVE = { color: 'red' }class App extends Component { render() { return ( <div> <h1>My Router</h1> <ul> <li><Link to="/" activeStyle={ACTIVE}>Home</Link></li> <li><Link to="/users" activeStyle={ACTIVE}>User Page</Link></li> </ul> {this.props.children} </div> ) }}class Index extends React.Component { render() { return ( <div> <h2>Index!</h2> </div>)}} класс Пользователи Extens React.component {render () {return (<div> <h2> пользователи </h2> </div>)}} redender ((<<<srouter astory = {browserhistory}> <route path = "/" component = {app}> <indexroute}> <route = "/" "asp}> <indexroute}> <route ="/"route =" component = {users}> </route> </route> </router>), document.getelementbyid ('app'))Здесь перечислен только один метод маршрутизации для React. По сравнению с другими структурами синтаксис маршрутизации React более просты для понимания.
Управление статусом
Государственное управление не является необходимым приложением на одностраничном. Использование его может помочь нам управлять изменениями в каждом состоянии единым образом, делая весь процесс проекта четким и поддерживаемым. Реакция внедрения Государственного управления может использовать официально рекомендуемый Redux.
Redux использует строгий односторонний поток данных. Все состояние приложения хранится в дереве объектов, и это дерево объекта существует только в единственном магазине.
Пример проекта
Здесь я написал один веб -сайт с использованием React, и страница следующая:
Принести
Поскольку я использовал Fetch для взаимодействия Ajax в приведенном выше примере, я кратко представлю здесь.
Мы можем использовать Fetch в качестве следующего поколения технологии Ajax, которая использует текущий метод популярного обещания.
Используя Fetch, мы можем написать Ajax для взаимодействия с данными, подобными этим:
// Получить метод данных fetchfn = () => {fetch ('../../ data.json') .Then ((res) => {console.log (res.status); return res.json ()}) .Then ((data) => {setState ({stists: data.listdata})}). console.log (e.message)})}Суммировать
Самая важная вещь в изучении структуры-это не изучение ее технологии, а изучение идеи решения проблем, которые она приносит. Изучая структуру React, вы можете обнаружить новое мышление из его уникальных новых функций. Только когда уровень мышления будет расширен, вы можете свободно летать в океане на переднем крае. Я надеюсь, что эта статья будет полезна всем, чтобы узнать, что реагировать.