复杂组件的组织形式，请码友帮忙甄别

Question

最近遇到开发一个层级比较深的组件；
父组件 Acomp ,
子组件 acomp,bcomp,ccomp
我的方案是：把父组件的state的数据，以props的形式传入到子组件中，并在子组件中调用父组件的回调反向同步到父组件的state ；
遇到的问题（ 问题1 ）：当我acomp中回调执行时，反向同步父组件state中分配给acomp的值。发现bcomp、ccomp视图也发生了更新，尽管数据还是一样的；理想的状态是，只有acomp发生重新渲染，bcomp、ccomp不发生重新渲染；

我的怀疑方向是：父组件的setstate会导致所有子组件刷新，所以只有在子组件的shouldUpdate里面判断是否要重渲染；

我的优化方向是：父组件不再设置数据state，而是设置props.然后把props以props的形式传入到子组件，子组件用state接收父组件传入的props.所有交互和setstate 都只在子组件内部完成，子组件对外设置方法回去子组件内部的参数；

我的请教的是：

1. 问题1（ 如上 ）是正常的吗？

2. 码友遇到这种状况一般选择怎么样的组织形式；

Answer 1

如果a的数据只是a组件用，那么就可以用你说的方法，只在a组件内部进行处理，不需要麻烦A组件。

如果a的数据A,b,c中也会用到，那么肯定需要由A组件来处理，或者至少传递给A，然后让他来分发给b和c。

如果还是无法避免a,b,c由于他们本身不需要的数据改动发生render，如果是a,b,c是很大的组件，那么可以用shouldUpdate里面做shallowEqual来进行优化。如果是小组件，由于react本身就有vdom的功能，render就render了，你做其他的验证估计还不如让他直接render。(以上仅个人意见，酌情理解。。。)

Answer 2

一定要用同一个数据字段名称吗？
比如data给acomp传值的时候，把data换成深度copy到acompData，然后再传给acomp，可以不？

Answer 3

父组件的setstate会导致所有子组件刷新，所以只有在子组件的shouldUpdate里面判断是否要重渲染

父组件的state值改变等于要重新渲染父组件，当然也会重新渲染包含在其中的子组件。
在React中的重新渲染并不代表在真实的DOM上面会整个刷新，实际运作上React会运算出不同之处，只作真实的DOM不同之处的更动而已，这是Virtual DOM的设计，默认就是交给React去运行重新渲染。

差异只在于还交给React的Virtual DOM来作真实DOM的运算，在复杂应用的情况下会有优化不足的情况，所以才在子组件自订shouldComponentUpdate生命周期方法，由开发者自行判断是否要在目前的props与state值时触发重新渲染，这样性能可以更优化。一个更简单的作法是继承React.PureComponent，有带自动判断的机制。

调用shouldComponentUpdate生命周期方法有好有坏，好的是可以优化，坏的是不易组织与管理，如果一个应用有几十或上百个子组件，每个的情况不一样时，不就很难组织与管理，反倒变成另一件麻烦事。

setState原本就有一些设计上的限制，例如现在要更动的这个状态与呈现的数据完全无关，它也可能会对呈现组件触发重新渲染。另外setState的运行有可能是异步的，某些使用情况下会得到不预期的结果。

在复杂的应用上，最理想的情况是不要用setState，状态更动的重新渲染，交给Redux或MobX这类的框架去作，它们都有针对这些情况预先作优化。

其他参考文章:

1. React官网的优化文章

2. 我写的为何说setState方法是异步的？

Answer 4

如果希望优化频繁刷新的问题，在使用 React.PureComponent，或者 shallowCompare以外，一定要用ImmutableJS。

不然没有多大意义，可以参考这篇文章：https://www.timefly.cn/react-...

ImmutableJS: https://facebook.github.io/im...