如何在 JSX 中使用对象

Question

THIS QUESTION MIGHT NOT HAVE A CERTAIN ANSWER...

Which approach is better to use for using an object in JSX.

1- declare an object and use that in all usages:

            const object = GlobalState.getInstance().getObject()
            <Component1 prop1={object}></Component1>
            <Component2 prop2={object}></Component2>
            <Component3 prop3={object}></Component3>

2- pass complete reference to object we want each time we use that

                <Component1 prop1={GlobalState.getInstance().getObject()}></Component1>
                <Component2 prop2={GlobalState.getInstance().getObject()}></Component2>
                <Component3 prop3={GlobalState.getInstance().getObject()}></Component3>

which one is considered to be convention? do they have any performance difference?

Answer 1

It's generally considered to be a good practice to:

1. Keep your code DRY ;
2. To store results of intermediate calculations in separate variables, so, you can document it & let other know what's that.

This way, number one wins . It's also better for performance. Flawless victory!