Question

所以我创建了一个简单的Json搜索应用程序，您可以在codepen上查看。它搜索Json标题和标签并返回任何匹配： http://codepen.io/ghozt12/pen/LVaxLM

它基于React网站（https://facebook.github.io/react/docs/thinking-in-react.html）上给出的示例。

但是我不知道在哪里放置过滤搜索结果的逻辑。如果React只是MVC中的V，那么业务逻辑不应该进入模型吗？但React只是视图，所以你把逻辑放在哪里？

特别是对于我的应用程序，我将搜索代码放在这个反应类中，我想知道这是否是正确的位置？（有关详细信息，请参阅我的codepen。）

var Table = React.createClass({
    render: function() {

    // CODE THAT FILTERS SEARCH RESULTS GOES HERE
    // creates rowTitle array

   return ( 
         <div> 
           {rowsTitle} 
         </div>
       );
    }
});

Answer 1

正如你所说，React只是MVC中的V.那么，你把业务逻辑放在哪里了？

对于特定于视图的小型业务逻辑，可以将其放在组件上，就像您所做的那样。如果业务逻辑在组件中，它将在事件处理程序，渲染或任何其他组件方法中。

如果您具有非视图特定的业务逻辑，并且它在客户端上运行（或在客户端和服务器上运行），那么在单独的JavaScript模块上隔离它总是一个好习惯。 React对AMD没有好处，所以最好不要使用RequireJS进行模块化。您应该使用Browserify或Webpack。在这种情况下，您只需将其添加到顶部或组件文件中：var myBusinessLogic = require('./myBusinessLogic')。现在您可以将处理委托给此模块。这是首选方式，因为JavaScript模块可以使用Jest，Jasmine，Karma或Mocha轻松测试。

还有第三种情况，您将业务逻辑委派给服务器。您可以直接对服务器上的API进行Ajax调用，进行此处理，也可以采用更复杂的方式并使用Flux。有很多Flux实现，比如Alt，Redux和Fluxxor。我更喜欢使用默认的Dispatcher来实现我自己的Flux实现。在ActionCreators中，我在clientApi（一个JS模块）上调用一个方法，该方法使用Axios向服务器执行Ajax调用。此调用由Express路由处理，该路由最终将业务逻辑委派给serverApi。

编辑：我刚搬到Redux：）

Answer 2

您可以在每个类Component和App Component中推送逻辑。类中的逻辑此状态的组件和所有应用程序的App组件中的逻辑

Answer 3

我知道这个答案来晚了，但想补充一下我的想法。通常你想让演示组件保持愚蠢。这意味着您的 UI 组件没有逻辑，而是类似于可能以不同方式设置组件样式的类型。将您的逻辑拉出到反应钩子中，然后在控制组件中使用反应钩子是一个好主意。这样，所有逻辑都在您的钩子中，而不是在您的展示组件中，从而使它们更加独立和可重用。

我在哪里将编码逻辑放入我的React应用程序中

3 个答案: