React.jsデータフローパラダイム - data.props、state、およびJSXはどのように有益でしょうか？

Question

私はReactを初めて使う人です。

コンポーネントの内訳

：私はカップルのチュートリアルを経て、4つの成分がある小さなページ作成しました（？クラスを反応させるのが、望ましい用語が何である私は、この記事のコンポーネント、それらを呼ぶことにします）含まれており、他のコンポーネントを管理

• 親「アプリケーション」コンポーネント
• ユーザーがページ
• テキストとしてフォームからの入力を表示する「文字列表示」のコンポーネントと対話することができます「フォーム」コンポーネント
• は、文字列ビューを解釈してビジュアルを調整するアクションを実行する「ビジュアルビュー」（わかります、悪名...）コンポーネントです。

---

データフロー

次のように状態や小道具を使用して、これらのコンポーネントの通信は、次のとおり

1. フォームアプリ
に新しい状態を渡すハンドラONCHANGEました
2. アプリケーションは状態データを文字列ビューに転送します
3. ストリングビューが更新され、アプリケーションに更新された状態が渡されます
4. アプリケーションは新しい状態のデータをビジュアルビューに移します
5. 最後に、ビジュアルビューは新しい状態に基づいて更新されるようになりました。

---

サンプルコード

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では、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を、それはアプリケーションやフォームビューで使われているに）、さこれらを区別できるようにする良い方法はありますか？または、コンポーネント間で繰り返される関数名が望ましいですか？

それが一つの「本物」であるかどうまた、あなたのアプリが1を「デモ」、それは部品のためのいくつかのより良い名前を持つ（すなわち<FormView>は<ContactForm>だろう）と、おそらく考えている、悪いことではありませんあなたのメソッド名は異なるでしょう。しかし、それは全く悪くない。たとえば、<ContactForm>の内部では、submitハンドラをonSubmitと呼びますが、外側には（propを渡します）、onContactFormSubmit、またはより意味のある方法でonContactFormFilledを呼び出すことができます。

アプリケーションが大きくなり、同じコンポーネント（つまり、<App>の場合）で多くのことが繰り返される場合、コンポーネントを分割しようとする可能性があります。そのため、各コンポーネントは「ドメイン」であり、繰り返しのものがたくさんあるようには見えません。

これはReactが実施しようとしている正しいデータフローのパラダイムですか（コンポーネントは兄弟ではなく親にしか話しません）。

まず第一に、Reactは何も強制しません。リアクトはMVCの「v」ですから、コンポーネントとして記述された「プレゼンテーション」レイヤーがあります。あなたが望む方法で流れます。 しかし、複数のコンポーネントを持っているときにコンポーネント間で "通信する"方法であるため、 "コンポーネントは兄弟ではなく親としか話しません"と言うときには、ポイントがあります。コンポーネントはその兄弟を見ることができないので、このコミュニケーションを調整する人が必要です。この場合、これは親の仕事です。

コンポーネント同士を「話す」（つまりrefsを使用する）他の方法もありますが、IMOは最も信頼性が高く（よりテスト可能な）ものです。

普通のJavaScriptでこれをどのように記述したのと比べると、これはひどく制約されているようです。私は大きな写真が欠けていますか？このデータフローのパラダイムは、将来の問題を防ぐために設計されていますか（もしそうなら、規律された通常のJavaScriptで解決できないもの）、あるいは私が見逃している他の目的がありますか？

私は最後のものとしてそれに答えることを決めました。

IMO、Reactは素晴らしいです。あなたは正しい場所（コンポーネント）にあなたの "ロジック"を持ち始めます。あなたのページをうまく機能させるためには、ちょっと作ってみてください。正しくオーケストレーションされます）。

リアクションを使用すると、インターフェイスの構築方法を「考える」ことが容易になります。テンプレートエンジンを使用して

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

を使用すると、プレーンのJavaScriptを使用してコードを書くことになるならば、あなたはいくつかの方法でDOMを処理しなければならない（すなわち：このピート・ハントのブログ記事は素晴らしいです、そしてあなたがそれをチェックアウトする必要があります）あなたのコードは、DOM操作とアプリケーションロジックを混ぜ合わせることになります。あなただけのためにそれを控えてください。あなたはのお手入れ品しか気にすることができません。もう一つの利点は、すべてがコンポーネントである場合、それらのコンポーネントを再利用できることです。どこにあるかは関係ありません。小道具を正しく渡すと、コンポーネントは正常に動作します。

私はそれらのコンポーネントを書くことは徹底しているようですが、より多くのコンポーネントを書くようになると、多くの利点が見られるようになります。それらのうちの1つは、データをどのように表示するか（HTML文字列を連結したり、テンプレート関数を呼び出すことはもうありません。もう1つは、インターフェイスを「分割する」ことが容易で、コードを簡単に保守することができます（単純なJavaScriptを使用すると簡単ではありません）。

あなたが書いたこのアプリケーションは本当にシンプルなので、Reactを使ってビルドするのには多くの利点がありません。私はより複雑なものを作成し、それを単純なJavaScriptと比較しようとするべきだと思います。 「複合」とは、「ユーザーインターフェイス」の複合体を意味します。たとえば、ユーザーが複数の「人」を送信できるようにするフォームを作成します。また、「人」には「名前」と複数の「ペット」（名前も）が必要です。この場合、「追加」と「削除」操作を処理することがどれほど難しいのか、どのように簡単にそのような処理を行うことができるのかがわかります。

私はそうだと思いますが、あなたとリアクションの「クリック」を願っています。それは複雑なユーザーインターフェイスを作成する方法について私の心を変えました。