javascript - javascript - React props:我应该传递对象还是它的属性?这有什么不同吗?

105 1

当传递道具时,我应该把整个对象传递给子组件,还是应该先在父组件中创建道具,然后将这些道具传递给子组件?

传递整个对象:


<InnerComponent object={object} />



单独创建需要的道具:


<InnerComponent name={object.name} image={object.image} />



哪一个是首选的,如果取决于它,我应该用什么方法来使用?

时间: 原作者:

60 0

你应该更喜欢你的第二个例子,单独传递道具。在那里可以明确看到哪些参数被传递,并且可以快速地与需要的参数进行比较,这使得协作更加容易,使应用程序的状态更加清晰。

如果不需要,我亲自尝试避免传递整个对象,它就像扩展操作符,可以有任何属性inside,在较大范围内调试要困难得多。

对纯React (如prop-types或typescript )的一些补充,可能有助于在大型应用程序中定义清晰的属性

原作者:
74 1

将多个道具传递给子组件是将道具传递给子组件的首选方法,这会帮助你跟踪子组件中应用程序的状态,另外,你还可以使用prop-types模块,它在Java中表现像泛型,为传递的道具提供了类型安全。

原作者:
127 3

如果不使用对象中的所有属性,最好单独传递所需的属性,因为当child component是apurecomponent of use shouldComponentUpdate 在这种情况下,只有当Child组件使用的props更改时,它才会重新呈现,而不是当对象中未使用的属性发生更改时。

但是,如果你正在使用对象中的所有属性,如果你将对象作为道具传递下去,如果你正确处理对象的突变,则它不会产生很大的差异事件。

原作者:
123 5

由于JavaScript没有类型注释,第二种选择更可取,如@mstruebing所述,代码会更加易于维护,但是,如果使用typeScript React (支持类型注释),这两种选择都是同样清晰,但是请记住,第一个选择会促进视图和模型之间的紧密耦合,这样就可以快速开发了,第二种选择可能会降低开发速度,但是你对未来变更有更高的灵活性和宽容度。

所以,标准是如果你喜欢开发速度而不是灵活性请选择1,如果你喜欢灵活的开发速度,请选择2.

额外备注

好的,我们什么时候应该考虑开发速度优于灵活性? 这是我的2美分。

如果项目是短期使用(例如,开发一个在选举期间收集选票的应用程序),那么就选择第一个选项。

如果项目是长期使用(例如,网上银行交易门户),那么应该选择第二个选项。

原作者:
120 3

根据最小权限原则,这是正确的方法:


<InnerComponent name={object.name} image={object.image} />



这限制InnerComponent意外修改原始对象或访问不属于它目的的属性。

或者,可以从原始对象中选取属性,并且作为道具传递:


<InnerComponent {...pick(object, 'name', 'image')} />



如果列出的属性很多,则可能会有单个支持对象的支持:


<InnerComponent object={pick(object, 'name', 'image')} />



原作者:
75 5

我使用扩展操作符传递所有的道具,如果我需要的话,它是最聪明的方法,

原作者:
...