复杂表单分组以及递归失去焦点bug复盘

985 阅读2分钟

场景

在问题列表中,标准化问题之后,在子问题是输入框修改提交时,需要向上修改列表以及全局的答案对象,而这一过程中可能会导致输入框的丢失焦点的问题。

存在的问题点或者风险点


1 每次修改都要改全局的答案对象,但是在某些特殊题目,比如输入框带有图片类型的时候,会是通过key修改变量的方式,而不是纯函数编程思路的返回新对象。
2 问卷中的题目都是利用的受控组件,层层遍历导致组件的修改值的性能比较低,建议使用非受控组件,自身支持修改,然后同步给store和父组件
3 组件具有交互行为特点时,它的状态不仅仅依赖于传入的数值,还有交互行为,而这些一般情况下我们是不做设计的,会导致交互的问题。

总结点


在递归复杂数据的时候,针对每个递归的子组件的状态不仅仅包括它的数据,还有一些交互状态,比如说焦点,滚动位置等,一般情况下针对这些我们是不做这些交互行为数据存储的,或者做了也会因为细节导致最终效果有些差异。所以在改变数据的时候:

  • 要注意用纯函数的方式每次都要重新赋值,而不是用指针改变值,用指针改效果上值的改变的,但在原理上与复杂数据直接用拼装的新数据是不同的
  • 针对组件需要具有除常规数据之外的状态时,需要在这个组件或者高级的容器角度为其加key,并且这个key要保证一致不变性。
  • 针对前端需要的一些数据模型增删改的操作,index是不准确的,这种情况下建议前端自定义每项的id,可以用随机数,可以用hash,来保证正常的dom操作的正确性。

同步语雀文章

原文链接:www.yuque.com/robinson/de…