javascript - 是否推荐把原始数据作为props参数传递给react组件让组件自己计算然后渲染？

Question

有一个Electorn 项目，里面的前端有一个组件，

在设计的时候，有一个问题想要和大家讨论一下：

在此项目内，组件需要接入props数据，目前对props做设计。
现在的情况是，需要对原始数据大量计算才能得到需要的props然后传输给组件，想要问一下：
1、是否推荐把原始数据作为props参数传递给组件让组件自己计算然后渲染？
2、是否不管在组件内还是组件外计算，对整个应用都是消耗一样的性能？
3、如果是在组件外进行计算，那么是否有推荐的方式进行做到性能提升？比如开辟线程进行处理之后传递给组件？

Answer 1

1. 是否推荐把原始数据作为props参数传递给组件让组件自己计算然后渲染？
   组件的作用就是逻辑内敛，高度抽象，降低使用成本。如果你在多处拿到的原始数据结构都是一样的，不用纠结，应该直接把数据传递给组件，让组件内部进行处理。
2. 是否不管在组件内还是组件外计算，对整个应用都是消耗一样的性能？
   是的，都是需要计算，但是组件内部可以做性能优化。
3. 如果是在组件外进行计算，那么是否有推荐的方式进行做到性能提升？比如开辟线程进行处理之后传递给组件？
   组件内部可以使用，使用多线程，可参考 https://www.electronjs.org/docs/latest/tutorial/multithreading

Answer 2

回答问题

1. 是否推荐把原始数据作为props参数传递给组件让组件自己计算然后渲染？

   不推荐直接将原始数据作为props传递给组件并在组件内部进行大量计算。这种做法有几个潜在的问题：

   • 重复计算：如果多个组件需要基于相同的数据进行计算，每个组件都会独立执行这些计算，导致计算资源的浪费。
   • 组件职责不明确：组件通常应该只关注展示逻辑和UI状态，而不是数据计算。将数据计算逻辑放在组件外部可以使组件更加专注于其职责。
   • 测试和维护难度增加：将业务逻辑与展示逻辑混合在一起会增加代码的复杂性和维护成本。

2. 是否不管在组件内还是组件外计算，对整个应用都是消耗一样的性能？

   不是。在组件外部进行计算通常更高效，因为它允许重用计算结果，避免在多个组件中重复计算相同的数据。此外，将计算逻辑与组件分离还可以更容易地并行处理或优化这些计算，例如使用Web Workers进行异步计算，以减少对主线程的影响。

3. 如果是在组件外进行计算，那么是否有推荐的方式进行做到性能提升？比如开辟线程进行处理之后传递给组件？

   是的，在组件外部进行计算并优化性能是一个好策略。以下是一些推荐的方法：

   • 使用Memoization（记忆化）：对于需要频繁计算但结果变化不大的函数，可以使用Memoization来缓存结果，避免重复计算。
   • 异步处理：对于耗时较长的计算，可以使用Web Workers或async/await等机制在后台线程中执行，避免阻塞UI线程。
   • 数据预处理：在应用启动时或数据变化前，对数据进行预处理和计算，以减少运行时的计算量。
   • 优化算法：选择更高效的算法来减少计算复杂度。

   关于开辟线程，在Electron中，你可以利用Node.js的worker_threads模块来创建工作线程，这些线程可以执行JavaScript代码，而不会阻塞主线程（即UI线程）。但是，请注意线程间通信的开销，并确保数据在线程之间安全地传递和同步。

总结

为了提升React应用的性能，建议将计算逻辑与组件展示逻辑分离。在组件外部进行计算，并通过props将计算结果传递给组件进行渲染。这样可以避免重复计算，提高代码的可维护性和可测试性。同时，可以考虑使用Memoization、异步处理、数据预处理和优化算法等技术来进一步提升性能。在Electron项目中，可以利用Node.js的线程能力来执行耗时的计算任务。