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

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

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

\n