Question

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

组件细分

包含和管理其他组件的父“App”组件
允许用户与页面交互的“表单”组件
“字符串视图”组件，用于将表单中的输入显示为文本
一个“视觉视图”（我知道，名字不好......）组件，它解释字符串视图并执行调整视觉的动作。

数据流

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

表单具有onChange处理程序，将新状态传递给App
应用程序将状态数据汇集到String View
String View更新并将更新后的状态传递给App
应用程序将新状态数据汇集到Visual View
最后，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

首先，我认为可以打电话给＆＃34;组件＆＃34;，而且我看到很多人都这么称呼。我将在下面回答你的问题，我认为最好让我的答案有意义。

当组件实际构建时，JSX的东西会被转化为真正的JavaScript。使用JSX有优势吗？在已编译的JavaScript中编写组件会有优势吗？

JSX有点混合JavaScript和HTML，因此，它使你的代码＆＃34;友好＆＃34;。您将创建您的组件，并且只需拨打＃34;它们作为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中使用过），是否有一种很好的方法可以区分它们？或者，跨组件重复的函数名称是否合适？

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

如果您的应用程序开始增长并且您在同一组件中重复了很多事情（例如<App>的情况），您可能会尝试拆分组件，因此，每个组件都会＆＃34;知＆＃34;关于＆＃34;域＆＃34;，它似乎没有很多重复的东西。

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

首先，React没有强制执行＆＃34;有些人说，React就是＆＃34; v＆＃34;在MVC中，你有＆＃34;演示文稿＆＃34;层被描述为组件，数据可能以您想要的方式流动。但是当你说＆＃34;组件只与父母而不是兄弟姐妹交谈时，你得到了一个观点，因为这是你可以和他人交流的方式。当您有多个组件时，组件之间。由于某个组件无法看到它的兄弟，因此您需要有人来协调这种沟通，在这种情况下，这是父母的工作。

还有其他方法可以制作组件＆＃34; talk＆＃34;相互之间（即使用refs），但有一个家长来协调，是IMO，最可靠（也是更好的可测试的）。

与我在常规JavaScript中编写此内容的方式相比，这似乎非常受限制。我错过了大局吗？这种数据流范式是否旨在防止未来出现问题（如果是这样，哪些问题？任何无法通过规范的常规JavaScript解决的问题？），还是我还缺少其他目的？

我决定回答这个问题，总结一些事情。

IMO，React很棒，你开始拥有你的＆＃34;逻辑＆＃34;在正确的地方（一个组件），你可以只是为了使你的页面运作良好（并且我的意思是它是正确的编排）。

React也让人们更容易思考＆＃34;关于如何构建接口。这篇Pete Hunt的博客文章很精彩，你应该看一下：

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

如果您要使用纯JavaScript编写代码，则必须以某种方式处理DOM（即使用模板引擎），并且您的代码最终会将 DOM操作与应用逻辑。 React只为你提取摘要。您只关心呈现内容。另一个优点是，当一切都是组件时，您可以重用这些组件，它们所在的位置并不重要。如果您正确传递道具，您的组件将按预期工作。

我知道编写这些组件似乎很详尽，但是当你开始编写更多组件时，你会发现很多好处。其中之一是永远不会想知道如何呈现您的数据（不再连接HTML字符串或调用模板函数）。另一个是它很容易分裂＆＃34;你的接口，是什么让你的代码更容易维护（这在使用普通的JavaScript时并不简单）。

老实说，你写的这个应用程序非常简单，你可能看不到使用React构建它的很多好处。我认为你应该尝试创造一个更复杂的＆＃34;一，并将其与普通JavaScript进行比较。通过＆＃34;复杂＆＃34;，我的意思是＆＃34;用户界面＆＃34;复杂。例如，创建一个允许用户提交多个＆＃34;人员的表单。和＆＃34;人＆＃34;应该有＆＃34; name＆＃34;和多个宠物＆＃34; （也有名字）。你会看到它有多难处理＆＃34;添加＆＃34;并且＆＃34;删除＆＃34;在这种情况下的操作，以及React如何轻松处理那种事情。

我想就是这样，我希望你和React＆＃34;点击＆＃34;。它改变了我对如何创建复杂用户界面的想法。

React.js数据流范例 - data.props，state和JSX如何有益？

1 个答案: