javascript - React.js数据流范例-data.props，state和JSX有何好处？

Question

我是React的新手。我已经完成了一些教程，并创建了一个小页面，其中包含4个组件（React类，首选术语是什么？在本文中将其称为组件）：

组件故障


父“应用”组件，其中包括和管理其他组件
一个“表单”组件，允许用户与页面进行交互
一个“字符串视图”组件，以文本形式显示来自表单的输入
一个“视觉视图”（我知道，名字不好...）组件，它解释字符串视图并执行调整视觉效果的动作。




数据流

使用状态和道具的这些组件的通信如下：


表单具有onChange处理函数，这些处理函数将新状态传递给App
该应用程序将状态数据漏斗到字符串视图中
字符串视图将更新并将更新后的状态传递给应用
该应用程序将新状态数据集中到可视视图
最后，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>
    );
  }
});

问题

这是我要回答的实际问题的地方：


这是否是React试图强制执行的正确数据流范例（组件仅与父母交谈，而不与兄弟姐妹交谈）？
与我只用普通的JavaScript编写代码相比，这似乎受到了极大的限制。我是否错过了大局？这个数据流范式旨在防止将来出现问题（如果有的话，是哪一个？有纪律的常规JavaScript无法解决的任何问题？），或者还有其他目的吗？
我有很多重复的函数名称（例如，handleFormChange，它在App和Form View中使用），有没有一种很好的方法可以使这些区别？或者，是否希望在各个组件之间使用重复的功能名称？
在实际构建组件时，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，它在App和Form View中使用），有没有一种很好的方法可以使这些区别？或者，是否希望在各个组件之间使用重复的功能名称？


也不错，您的应用程序是一个“演示”应用程序，如果它是“真实的”应用程序，它的组件名称会更好一些（即<FormView>为<ContactForm>），也许您的方法也可以名称会有所不同。但这一点都不坏。例如，在<ContactForm>内部，您可以将submit处理程序称为onSubmit，但是在外部（您传递的prop），您可以调用onContactFormSubmit，或者以更语义的方式，调用onContactFormFilled 。

如果您的应用程序开始增长，并且同一组件中重复了很多事情（例如<App>），则可以尝试拆分您的组件，因此，每个组件都会“知道”“域”，并且似乎没有很多重复的内容。


  这是否是React试图强制执行的正确数据流范例（组件仅与父母交谈，而不与兄弟姐妹交谈）？


首先，React不会“强制”执行任何操作，正如某些人所说，React是MVC中的“ v”，因此，您将“表示”层描述为组件，并且数据可能会以您想要的方式流动。
但是，当您说“组件只与父母交谈，而不是兄弟姐妹交谈”时，您有一个要点，因为当您拥有多个组件时，这就是您可以在组件之间进行“交流”的方式。由于组件看不到其同级，因此您需要有人来协调此通信，在这种情况下，这是父级的工作。

还有其他方法可以使组件彼此“交谈”（即使用refs），但是让IMO协调父进程是最可靠（且可测试性更高）的组件。


  与我只用普通的JavaScript编写代码相比，这似乎受到了极大的限制。我是否错过了大局？这个数据流范式旨在防止将来出现问题（如果有的话，是哪一个？有纪律的常规JavaScript无法解决的任何问题？），或者还有其他目的吗？


我决定作为最后一个回答，总结一下。

IMO，React很棒，您可以在正确的位置（一个组件）开始使用“逻辑”，并且可以编写一些东西来使您的页面正常工作（而我的意思是正确地组织了页面）。

React还使“思考”构建界面的方式变得更加容易。皮特·亨特（Pete Hunt）的博客文章很棒，您应该查看以下内容：

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

如果要使用普通JavaScript编写代码，则必须以某种方式处理DOM（即使用模板引擎），并且代码最终会将DOM操作与应用程序逻辑混合在一起。 React只是为您摘要。您只关心展示内容。另一个优点是，当所有内容都是一个组件时，您可以重复使用这些组件，无论它们位于何处。如果正确传递道具，则组件将按预期工作。

我知道编写这些组件似乎很详尽，但是随着您开始编写更多组件，您开始看到很多好处。其中之一是永远不要怀疑如何显示数据（不再需要串联HTML字符串或调用模板函数）。另一个问题是，很容易“拆分”您的界面，这使您的代码更易于维护（在使用纯JavaScript时，这并不容易）。

老实说，您编写的这个应用程序确实非常简单，并且您可能看不到使用React构建它的许多优势。我认为您应该尝试创建一个更“复杂”的脚本，并将其与普通JavaScript进行比较。所谓“复杂”，是指“用户界面”复杂。例如，创建一个允许用户提交多个“人”的表格。并且“人物”应具有“名称”和多个“ pet”（也具有名称）。您将看到在这种情况下处理“添加”和“删除”操作有多么困难，以及React如何轻松地处理这种事情。

我想就是这样，希望您和React达成“点击”。它改变了我关于如何创建复杂用户界面的想法。