React提交表单触发全应用重渲染？Mobx购物车逻辑问题排查

• MobX observable状态变更触发关联组件重渲染
  调用cartStore.handleSubmit往observable属性cartItems中新增元素时，会触发MobX的状态变更通知。所有用observer包裹、且渲染逻辑中直接读取了cartStore.cartItems的组件都会自动重渲染。如果应用顶层根组件是observer且直接引用了cartItems，或是多个跨层级的组件都监听了cartItems的变化，就会表现为整个应用大范围重渲染。
• 表单默认提交行为导致页面重载
  提交按钮放在<form>标签内，未指定type="button"，浏览器默认会将form内未声明type的button识别为提交按钮，点击时会触发form的默认提交行为，导致整个页面刷新，表现和全应用重渲染一致。
• 顶层状态变更触发父级全量重渲染
  点击提交按钮时同步调用了setActiveModal(false)，如果activeModal状态定义在应用顶层组件中，状态变更会触发顶层组件重渲染。若顶层组件没有做渲染性能优化，会连带所有子组件一起重渲染，看起来就像整个应用都重渲了。

• 阻止表单默认提交行为：给提交按钮加上type="button"属性，或是在点击事件回调中调用e.preventDefault()，避免页面刷新。
  修改示例：

<button 
  type="button"
  onClick={(e)=>{
    e.preventDefault();
    cartStore.handleSubmit({modalName, modalDesc, modalSize, modalPrice}); 
    setActiveModal(false);
    console.log(cartStore.cartItems);
  }}
>Добавить</button>

• 缩小MobX状态监听范围：不要在顶层组件直接引用cartItems，把对购物车数据的读取下沉到真正需要该数据的组件（比如购物车列表、购物车数量徽标组件）中，避免顶层组件因cartItems变更触发全量重渲染。
• 优化上层组件渲染性能：如果activeModal必须定义在顶层，可以将不需要跟随activeModal变更的子组件用React.memo包裹，过滤不必要的重渲染。

内容的提问来源于stack exchange，提问作者aspiringdev