初始状态的最佳风格因人而异。

时间:2015-07-15 20:52:30

标签: javascript user-interface reactjs

我是新手,我想知道我在做什么是好的风格,也是有道理的。

我们有一个非常古老的应用程序,它是用PHP编写的,它使用了聪明的模板/一堆jquery用于前端渲染。我们最近开始实施react.js,我正在开发一个功能,用户可以查看不完整的候选人列表。此列表取决于站点和测试。

随着网站和测试请求调用php脚本。这个php脚本中有一些函数,然后返回一个智能模板呈现的不完整候选数组。

现在我已经重构了,所以在smarty模板中有一个div我在其中实现了一个jsx脚本标记,其中包含一个包含不完整候选列表的面板。

我的问题有两个:

  1. 使用“site”和“test”作为状态是否有意义,然后使用某种AJAX脚本来获取不完整候选者的数组,或者将不完整候选者数组简单地设置为状态更好。
  2. 如何在不使用Ajax的情况下设置此初始状态? (有没有一种方法可以直接将状态从PHP传递给我的react.js组件,或者将一个变量从smarty传递给react.js。
  3. 关于我的第一个问题,我认为我需要更好地掌握状态,但是从我的理解和我读过的内容here如果一个组件需要在某个时刻改变其中一个属性时间,该属性应该是其状态的一部分,否则它应该只是该组件的支柱。

    从我的角度来看,这个状态是访问和测试,它决定了应该列出哪些用户。

    如果我的想法有缺陷,我会喜欢一些意见。我仍然围绕着反应。

    干杯。

1 个答案:

答案 0 :(得分:2)

  

使用" site"是否有意义?和"测试"作为国家

如果它们在运行时发生变化,它们应该是状态,并且该组件应该在逻辑上拥有它们(没有父组件关心它们的当前值,或者没有父组件)。

如果此组件是逻辑所有者并且它们不会影响渲染,则它们应该是实例属性。

否则:道具。

  

然后使用某种AJAX脚本来获取不完整的候选数组,或者是将其更简单地设置为不完整候选数组的状态

如果您需要根据更改的参数获取新数据,则可以使用ajax。我不确定这里的问题是什么,因为你说" ...或者它的风格是否更好......"但你是ajax,然后将结果置于状态。

  

如何在不使用Ajax的情况下设置此初始状态?

将它放在一个全局变量(脚本标记中的json)或元素的data-foo属性中,JS读取它并在getInitialState中使用它。

  

我已经实现了jsx脚本标记

如果你在客户端上使用JSXTransformer,它必须加载一堆代码,然后搜索脚本标记,标记化并将脚本解析为AST,对代码执行一些转换,从中生成一个字符串修改后的AST,然后执行它。

它是一个很好的开发工具,但不适合生产。替代方案不是使用JSX,或者提前将其编译为普通JS并且让php发送它。