1. Введение в ReactJs
Недавно React-очень популярная фронтальная структура разработки. React произошел из внутренних проектов Facebook, потому что компания не была удовлетворена всеми фреймворками JavaScript MVC на рынке, поэтому она решила написать собственный набор для создания веб -сайта Instagram. После того, как я сделал это, я обнаружил, что этот набор вещей был очень полезен, и он был открыт в мае 2013 года. Поскольку идея дизайна React чрезвычайно уникальна, она революционная и инновационная, с выдающейся производительностью, но ее логика кода очень проста. Поэтому все больше и больше людей начинают обращать внимание и использовать его, полагая, что это может быть основным инструментом для будущего веб -разработки.
Официальный адрес веб -сайта ReactJS: http://facebook.github.io/react/
Адрес Github: https://github.com/facebook/react
Reactjs Китайский адрес: http://reactjs.cn/react/docs/getting-started.html
Что такое React?
React - это библиотека JS, разработанная выдающимися программистами, работающими на Facebook для разработки интерфейсов взаимодействия с пользователем. Его исходный код поддерживается превосходными программистами из Facebook и сообщества, поэтому он имеет очень сильную техническую команду, стоящую за ним, чтобы обеспечить техническую поддержку. React приносит много новых вещей, таких как компонент, JSX, виртуальный DOM и т. Д. Виртуальный DOM, который он обеспечивает, делает наши компоненты рендеринга очень быстрыми, освобождая нас от тяжелой работы, часто эксплуатирующей DOM. Любой, кто знает React, знает, что он больше фокусируется на V -слое в MVC. В сочетании с другими вещами, такими как Flux, вы можете легко создавать мощные приложения.
2. ReactJS особенности
1. Виртуальный доми
Через алгоритм DOM DIFF, только дифференцированные части будут обновляться без рендеринга всей страницы, тем самым повышая эффективность
2. компонентизация
Разделите страницу на несколько компонентов, включая логические структуры и стили
Компоненты содержат свою собственную логику, которая может быть предсказана при обновлении компонентов, что способствует обслуживанию.
Страница разбивает несколько компонентов и может быть использована повторно
3. Односторонний поток данных
Данные передаются из компонентов верхнего уровня в подкомпоненты
Управляемые данные
3. Начало работы с React. Напишите привет, мир. Во -первых, давайте поймем, что такое JSX.
Одним из основных механизмов React является виртуальные элементы DOM: виртуальные элементы DOM, которые могут быть созданы в памяти. React использует виртуальный DOM для снижения операций на фактическом DOM и повышения производительности. Подобно реальному нативному DOM, Virtual Dom также может быть создан через JavaScript, например:
var Child1 = React.createElement ('li', null, 'First Text Content'); var child2 = React.createElement ('li', null, 'второй текстовый содержимое'); var root2 = React.createElement ('ul', {classname: 'my-list'}, Child1, Child2); React.Render (<div> {root2} </div>, document.getElementById ('intainer5'));Используя этот механизм, мы можем использовать JavaScript для создания полного дерева DOM интерфейса, так же, как мы можем использовать JavaScript для создания реальных DOMS. Тем не менее, такой код не хорошо читается, поэтому реагируйте изобретен JSX и использовал наш знакомый HTML -синтаксис для создания виртуального DOM:
var root = (<ul classname = "my-list"> <li> Содержание первого текста </li> <li> Второй текстовый содержимое </li> </ul>); React.Render (<div> {root} </div>, document.getElementbyId ('intainer6'));4. 5 способов начать с Hello in React
Метод 1
<div id = "Пример1"> </div> <script type = "text/jsx"> React.render (// Direct html <h1 classname = "classn1"> 1 hellow direct html world </h1>, document.getelementbyid ('Пример 1')); </script>Метод 2
<div id = "Пример2"> </div> <script type = "text/jsx"> react.render (// Создать элемент непосредственно react.createelement ('h1', {classname: 'classn2'}, '2 hello, создать элемент непосредственно World!'), Document.getElement ('Пример2'); </script>Метод 3
<div id = "Пример 3"> </div> <script type = "text/jsx"> var createel = React.createClass ({render: function () {// return <h1> Создание компонентов Hellow html world </h1> // return с или без скобков (<h1 classname = 'classn3'> 3 Cerment Component htmle html html html html html html html html htmal </h1>);}}); React.render (// create element <createel/>, // или двойные кронштейны <createel> </createel> document.getElementbyId ('example3')); </script>Метод 4
<div id = "Пример4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass ({// Создание рендеринга в режиме jsx напрямую: function () {return (react.createelement ('h1', {classname: "classn4"}, "4 Hello -Create World in jsx -режим! // Создать элемент в методе компонента React.createElement (jsxcreateel, null), document.getElementById ('example4')); </script>Метод 5
<div id = "Пример 5"> </div> <script type = "text/jsx"> var hello = react.createclass ({// template hello render: function () {return (<pan> {this.props.data} </span>)}}); var world = react.createcls Сшивание </span>)}}); React.Render (// Создание элементов в 2 шаблонных компонентах <h1 classname = "classn5"> <hello data = '5 Hello'/> <World/> </h1>, document.getElementbyId ('arvess5'));5. Результат рисунка выше
Прилагаемый код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> UNT название документа </title> <meta name = "viewport" content = "Начальный шкал = 1.0, пользовательский шкалевый = no, максимальная шкала = 1, width = width device"/> </head> <body> <stile>*{margin: 0; Подкладка: 0;} Body {founale:#333;}#Box {founal: url (loveimg/qioa-fxehfqi8208393.jpg) Центральный вершина без повторения; Ширина: 550px; Граница: 8px solid #ffff; -Вебкит-бокс-размер: пограничная коробка; Margin: 50px Auto;}#Пример1,#Пример2,#Пример 3,#Пример4,#Пример 5 {Margin: 20px Auto; Ширина: 100%; Предпосылки: RGBA (255,255,255, .3); Заполнение: 5px 10px; размер шрифта: 13px; Цвет:#f1f1f1; -Webkit-box-size: border-box; } </style> <div id = "box"> <div id = "example1"> </div> <script type = "text/jsx"> React.render (// Direct html <h1 classname = "classn1"> 1 Hellow Direct Html World </h1>, Document.getElementByid ('Пример 1')); type = "text/jsx"> React.Render (// напрямую создавать элемент reAct.createElement ('h1', {classname: 'classn2'}, '2 hello, напрямую создать мир! CreateEl=React.createClass({render:function(){// return <h1>hellow component creates html world </h1> //Return with or without brackets (<h1 className='classN3' >3 hellow component creates html world </h1>);}});React.render( //Create element <CreateEl/>, //Double brackets <CreateEl></CreateEl>document.getElementById('example3'));</script><div id="example4"></div> <script type="text/jsx">var JsxCreateEl=React.createClass({ // Create render in jsx directly:function(){return (React.createElement('h1', {className: "classn4"}, "4 Hello, создайте мир в JSX напрямую!"))}}); React.Render (// Создать элемент в методе компонента React.createElement (jsxcreateel, null), document.getElementbyId ('example4')); </script> <div id = "Пример 5"> </div> <script/js/js "js/js" Hello = React.createClass ({// Template Hello render: function () {return (<pan> {this.props.data} </span>)}}); var world = React.createclass ({// Template World vell: function () {return (<span> и мировое стекло шаблона </span>); Компоненты шаблона <h1 classname = "classn5"> <hello data = '5 hello'/> <world/> </h1>, document.getelementbyid ('arvess5')); </script> </div> <script src = "build/recait.min.js"> </script> <script src = "build/jsxtransformer.js"> </script> </body> </html>Вот несколько дополнительных знаний для вас:
Реагировать термины
Реагировать элементы
Объект JavaScript, представляющий HTML -элементы. Эти объекты Javascript наконец -то составлены в соответствующие элементы HTML.
Компоненты
Инкапсулируют элементы реагирования, в том числе один или несколько элементов реагирования. Компоненты используются для создания повторно используемых модулей пользовательского интерфейса, таких как пейджинг, навигация по боковой панели и т. Д.
JSX
JSX - это расширение синтаксиса JavaScript, определяемое React, аналогично XML. JSX необязательно, мы можем использовать JavaScript для записи приложений React, но JSX предоставляет более простой способ написания приложений React.
Виртуальный доми
Виртуальный DOM - это объект JavaScript, который имитирует дерево DOM. React использует Virtual DOM для отображения пользовательского интерфейса, прислушиваясь к изменениям данных в виртуальном DOM и автоматически миграции этих изменений в пользовательский интерфейс.