react 判断整个表单/state数据是否有变化 从而实施不同的操作逻辑解决方案【潦草版】

产品说需要判断整个表单的数据 如果只有某两个值变化不会走这个逻辑，其他值变化了那就需要走这个逻辑

如果使用的antd 的from ，可以直接进行整个表单的数据监听onchange，判断这个key 是否是排除之外的值 如果不是则给haschange 打上标记

但是这次 他没有使用 antd 的 form 组件 全局使用类组件进行，
我们可以重写setState 方式，只要他调用我们的setState参数 则 进行haschange打标记

     // 重写setState 方法在我们的构造函数生命周期中
     const that  = this as any;
      // 保存原生的setState引用
      that._setState = this.setState.bind(this);
      // 自定义setState方法以追踪变化
      this.setState = (newState, callback) => {
        // 深比较新旧状态，找出变化的key
        const keysChanged = Object.keys(newState).filter(key => newState[key] !== this.state[key]);
        if(!this.isFirst){
        /* 如果除了竟媒信息/名称发生改变则需要给予提示信息 */
        const filterList = keysChanged?.filter(item=>(item!=='xxx' && item!=='xxx' && item!=='xxx'))
        if(filterList?.length>0){
          this.hasChanged = true
        }
        }
  
        // 调用原始的setState方法更新状态
        that._setState(newState, () => {
          if (callback) {
            callback();
          }
          // 这里可以添加更多基于状态变化的操作
        });
      };

	// 在 componentdidiUpdate 中判断 当前页面state 数据是否已经稳定
    /* 某个最后一次更新的数据 xxxxx 目前是最后一个更新的 判断数据是否已稳定 稳定则不再执行 开启监听state变化  */
    if(this.isFirst){
      const isEqual = checkJonsEqual(prevState,this.state,['xxxx'])
      if(isEqual){
        this.isFirst = false
      }
    }

/**
 * 
 * @param preJson json1
 * @param nextJson json2
 * @param exceptList 排除的字段
 */
export const checkJonsEqual = (preJson, nextJson, exceptList = []) => {
    const preJsonObj = _.cloneDeep(preJson);
    const nextJsonObj = _.cloneDeep(nextJson);
    for (let i = 0; i < exceptList.length; i++) {
        delete preJsonObj[exceptList[i]];
        delete nextJsonObj[exceptList[i]];
    }
    return _.isEqual(JSON.stringify(preJsonObj), JSON.stringify(nextJsonObj));
}

这个只是粗略的监听 并没有实质性监听某个值真的是否发生变化
比如从 1 => 0 又从 0 =>1 本质上是没有变化 但是我们依旧判断为变化了