React.js Парадигма потока данных - как полезны data.props, state и JSX?

Question

Я новый, чтобы реагировать. Я прошел через пару учебники, и создал небольшую страницу, которая имеет 4 компонента (? React классы, что является предпочтительным термином я буду называть их компоненты в этой должности):

компонентов Разбивка

• родительский компонент «App», который включает в себя и управляет другими компонентами
• компонент «Form», который позволяет пользователю взаимодействовать со страницей
• качестве компонента «Строка Вид», который отображает входные данные из формы в виде текста
• компонент «Визуальный вид» (я знаю, плохое имя ...), который интерпретирует представление строки и выполняет действия по настройке визуального.

---

Dataflow

Связь этих компонентов с использованием состояний и реквизита выглядит следующим образом:

1. Форма OnChange обработчики, которые передают новое состояние в App
2. Приложение переводит данные состояния в строковый вид
3. String View обновляет и передает обновленное состояние в приложение
4. Приложение переводит новые данные состояния в визуальный вид
5. Наконец, Visual View теперь обновляется на основе нового состояния.

---

Пример кода

var App = React.createClass({ 
    handleFormChange: function(formData) { 
    this.setState({formData:formData}); 
    }, 
    handleStringChange: function(stringData) { 
    this.setState({stringData:stringData}); 
    }, 
    render: function() { 
    return (
     <div className="app"> 
     <FormView onFormChange={this.handleFormChange}/> 
     <StringView formData={this.state.formData} onStringChange={this.handleStringChange}/> 
     <VisualView stringData={this.state.stringData}/> 
     </div> 
    ); 
    } 
}); 

var FormView = React.createClass({ 
    handleFormChange: function(e) { 
    this.props.onFormChange(e.target.value); 
    } 
    render: function() { 
    return(
     <div className="formView"> 
     <select onChange={this.handleFormChange}> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
     </select> 
     </div> 
    ); 
    } 
}); 

var StringView = React.createClass({ 
    componentDidUpdate: function() { 
    this.props.onStringChange({newString:'newStringState'}); 
    }, 
    render: function() { 
    this.props.formData; 
    // process formData and update state 
    return (
     <div className="stringView"> 
     {this.props.formData} 
     </div> 
    ); 
    } 
}); 

var VisualView = React.createClass({ 
    render: function() { 
    var selection = this.props.stringData, 
     output = ''; 
    if (selection === 1) { 
     output = 'Hooray, 1!'; 
    } else { 
     output = 'Yes! 2!'; 
    } 
    return (
     <div className="stringView"> 
     {output} 
     </div> 
    ); 
    } 
}); 

---

Вопросы

Вот где я получаю на мой актуальный вопрос (ы):

1. Является ли это правильной парадигмой потока данных, которую React пытается применить (компоненты говорят только с родителями, а не с братьями и сестрами)?
2. По сравнению с тем, как я написал бы это только в обычном JavaScript, это кажется ужасно ограниченным. Мне не хватает большой картины? Является ли эта парадигма потока данных, предназначенной для предотвращения будущих проблем (если да, какие из них не могут быть решены с помощью дисциплинированного обычного JavaScript?), Или есть ли какая-то другая цель, которую мне не хватает?
3. Я получаю много имен функций повторения (handleFormChange, например, используется в приложении и виде формы), есть ли хороший способ сделать их различимыми? Или, повторяются ли названия функций по желательным компонентам?
4. Когда компоненты фактически строятся, материал JSX переводится в реальный JavaScript. Есть ли преимущество в использовании JSX? Имеет ли преимущество в написании компонентов в уже скомпилированном JavaScript?

---

Благодаря передовой, я знаю, что был вид стены текста. Я просто хочу удостовериться, что я правильно понял свою основу.

Answer 1

Для начала я думаю, что нормально называть «компоненты», и я видел, как многие люди так называли. Я отвечу на ваши вопросы ниже, в порядке, который, я думаю, лучше сделать мои ответы понятными.

Когда компоненты фактически строятся, материал JSX передается в реальный JavaScript. Есть ли преимущество в использовании JSX? Имеет ли преимущество в написании компонентов в уже скомпилированном JavaScript?

JSX kinda смешивает JavaScript и HTML, поэтому он делает ваш код «дружественным». Вы создадите свои компоненты и просто «назовете» их как HTML-теги. Ниже вы можете увидеть разницу между написанием JSX и чистым JavaScript.

return <div className="my-component"><p>Awesome</p></div>; 

return ReactDOM.div({ 
    className: 'my-component' 
}, ReactDOM.p({}, "Awesome")); 

Я не знаю, но я бы устать, чтобы написать этот объем кода только для визуализации DIV с абзаца.

Вы можете проверить больше преимуществ использования его здесь:

https://hchen1202.gitbooks.io/learning-react-js/content/benefits_of_jsx.html

Я получаю много имен функции повтора (handleFormChange, например, он используется в App и форме View), является есть ли хороший способ сделать их различимыми? Или, повторяются ли названия функций по желательным компонентам?

Это не плохо, также, ваше приложение является «демо» один, если это будет «реальной» один, он будет иметь некоторые лучшие имена для компонентов (т.е. <FormView> бы <ContactForm>) и, возможно, ваши имена методов будут разными. Но это неплохо. Например, внутри <ContactForm> вы можете вызвать обработчик submit как onSubmit, но снаружи (prop, который вы передаете), вы можете позвонить по телефону onContactFormSubmit или, более семантическим образом, onContactFormFilled.

Если ваше приложение начинает расти, и у вас есть много вещей, повторяющихся в одном компоненте (то есть в случае вашего <App>), вы можете попытаться разделить свои компоненты, поэтому каждый ваш компонент будет «знать» о «домен», и у него, похоже, не было много повторяющихся материалов.

Является ли это правильной парадигмой потока данных, которую Реагент пытается обеспечить (компоненты говорят только с родителями, а не с братьями и сестрами)?

Прежде всего, React не «применять» ничего, как говорят некоторые люди, React это «v» в MVC, поэтому, у вас есть слой «презентации» описаны как компоненты, и данные могут поток так, как вы хотите. Но у вас есть точка, когда вы говорите, что «компоненты разговаривают только с родителями, а не с братьями и сестрами», потому что именно так вы можете «обмениваться» между вашими компонентами, когда у вас есть несколько компонентов. Поскольку компонент не может видеть своего родного брата, вам нужно, чтобы кто-то организовал это общение, и в этом случае это работа родителя.

Есть другие способы заставить компоненты «разговаривать» друг с другом (т. Е. Использовать refs), но наличие родителя для оркестровки - это ИМО, самый надежный (и лучше проверяемый).

По сравнению с тем, как я написал бы это только в обычном JavaScript, это кажется ужасно ограниченным. Мне не хватает большой картины? Является ли эта парадигма потока данных, предназначенной для предотвращения будущих проблем (если да, какие из них не могут быть решены с помощью дисциплинированного обычного JavaScript?), Или есть ли какая-то другая цель, которую мне не хватает?

Я решил ответить на это как последнее, подвести итоги.

IMO, React просто отлично, вы начинаете иметь свою «логику» в нужном месте (компоненте), и вы можете просто скомпоновать вещи, чтобы ваша страница работала хорошо (и хорошо я имею в виду, что это правильно организован).

React также упрощает «думать» о том, как вы будете строить свои интерфейсы. блог этого Пита Ханта удивительна, и вы должны проверить это:

https://facebook.github.io/react/docs/thinking-in-react.html

Если бы писать код с простой JavaScript, вы должны обращаться с DOM каким-то образом (т.е. с использованием шаблона двигателя), и ваш код закончится смешением DOM-манипуляция с помощью вашей прикладной логики . Реагируйте только на тезисы, которые для вас. Вы можете только заботиться о представляя материал. Другим преимуществом является то, что когда все является компонентом, вы можете повторно использовать эти компоненты, неважно, где они находятся. Если вы правильно передадите реквизит, ваш компонент будет работать, как ожидалось.

Я знаю, что для написания этих компонентов кажется исчерпывающим, но по мере того как вы начинаете писать больше компонентов, вы начинаете видеть много преимуществ. Один из них - никогда не задумываться о том, как представить свои данные (не более конкатенации строк HTML или вызова функций шаблона). Другим является то, что легко «разделить» ваши интерфейсы, что упрощает работу с вашим кодом (и это не так просто при использовании обычного JavaScript).

Если честно, это приложение, которое вы написали, действительно прост, и вы можете не увидеть много преимуществ использования React для его создания. Я думаю, вам следует попытаться создать более «сложный» вариант и сравнить его с простым JavaScript. Под «сложным» я имею в виду комплекс «пользовательский интерфейс». Например, создайте форму, которая позволяет пользователю отправлять несколько «людей». И «люди» должны иметь «имя» и несколько «домашних животных» (которые также имеют имя). Вы увидите, как трудно обрабатывать операции «добавить» и «удалить» в этом случае и как легко реагировать на такие вещи.

Я думаю, что это, я надеюсь, вы и ответьте «нажмите». Это изменило мое мнение о том, как создавать сложные пользовательские интерфейсы.