react 组件更新问题

Question

在组件A中,我需要引入一个系统运行时间,如:9天12小时56分钟12秒,然后这个时间会每秒钟更新.初始值从后台拿到之后我放在A组件的state中,然后每秒增加1.
如果我把时间这个功能放在A组件中,是不是会更新整个A组件?如果是的话,那我应该把时间这个小功能做成A的子组件B,这样就只刷新B组件?

Answer 1

确实，组件setState将导致子组件的更新，如果遇到性能问题的话，单独用一个组件去做可以避免其他子组件重新渲染，没有性能问题，这样也没有什么大问题吧

Answer 2

如果不需要把时间状态传递给其它子组件，就放进子组件里。如果要传递这个状态，可以用 shouldComponentUpdate() 来避免其它子组件不必要的更新。

Answer 3

问题本质是你不想【只】因为更新时间就调用setState，但是我不知道你仅仅是修改数据还是同时要展示，如果只修改数据的话有两种方法：

1.直接用this.state.time修改，虽然react不推荐直接修改state，但那是基于无法响应更新而言的，如果你清楚这么做的后果（具体这个需求而言没有后果），是完全可以使用的

2.不通过this.state，直接使用静态变量this.time，这样没有副作用。

另外只改变数据的话没必要每秒都更新，保留获取运行时间那一刻的本地时间，需要使用的时候再获取本地时间，获取差值，加上运行时间即可。

如果要显示的话就像题目说的直接放到一个小组件里，因为render无法避免，那就把范围缩到最小。