事情的开始
在某一天的下午，我刚开完需求会，需求也不算难。大概就是内部设计一个填报表格，大概是四个数据相同的table表格数据，然后外部则是将table中每个cell渲染成inPut输入框，进行数据交互，客户输入完成之后再进行数据验证传给后端。
乍一看，还是蛮简单的，主要是外部的渲染和数据输入，我是使用的antd中table组件，使用自定义渲染的时候，自定义渲染成Input组件，我一开始使用的是将四个数据所有的数据，通过遍历的方式，分派给每个table，然后使用父组件的数据state传入子组件，子组件的input调用方法，将父组件的state进行统一修改。
出现问题
这样也是可以实现这个需求的，但是问题是速度特别慢，如果在输入的快的话，会出现延缓一秒甚至多秒后才进行响应。这样下来明显对于用户的体验效果极差，我开始思考如何去进行优化。
因为，我使用的是父组件的数据去渲染子组件，然后子组件中input触发事件，然后去emit给父组件，父组件使用set方法更新state，然后进行页面的渲染的情况。这样下来，对于每次re-render来说，四个table均需要更新，导致更新数据缓慢。
思路出现
后面，我在思考如何进行性能优化的时候，突然想起了国家治理的方式，每个省和市和县分别进行自治，如何进行修改，盈利和招商等内容，大部分都是区域进行自治的。如果国家需要全国数据的话，只需要将命令告诉每个省，然后依次将命令往下传，等到收集完成之后，则进行数据回流，最终国家拿到全国的数据。
好了，思路有了，开始实践！
代码实现
在这个架构下面，父组件所需要的是需要一个state（flag），来告诉子组件什么时候需要进行内容自检和数据回流，同时还需要一个ref来实时获取，从子组件获取的数据是否都已经就绪
子组件则是需要监听父组件传进的（flag）,如果一旦出现flag发生改变为true的情况下，在组件内部进行自检和获取值的操作，同时使用emit的方式返回结果，传给父组件，父组件根据传过来的值判断是否所有table的数据都均以自检通过。
以上大概就是代码中的思路，下面将一步步的去修改代码。
首先，我们需要修改的是，我们不需要子组件在每次进行修改的时候，直接修改父组件的值，而是在将父组件的state传入子组件之后，将数据在子组件内使用useState复制一份。从此以后在子组件内每次修改，只需要去修改内部的state的值，因为每次更新都是仅限于组件内，所以每次Input更新的速度很快。
那么就有问题了，如何去进行提交操作呢，总得把数据拿出来吧，我使用的是监听props中的flag属性
这个属性一旦发生改变，子组件就会使用一个函数去进行自检操作，判断是否已经全部自检通过了
如果进行通过之后，子组件调用自定义emit的事件去进行数据回流，父组件接收到emit的值并修改一个ref（不可以使用useState，ref具有即时性）。
每次父组件接收到子组件中的emit的时候都要去去判断Ref的值是否已经是全的了，一旦有一个没全就去显示message提示哪个模块没有填写完全，还可以加一个errorlist 按照固定的顺序去提示。
总结
这个是我在日常开发中遇到的问题，并拿出的解决方案。可能大家有用过这样的方法，没用过的，也算是为大家提供一条性能优化的思路
原文链接：https://juejin.cn/post/7345836282066993203 作者：Coderh
