Skip to content

v0.5.0
Compare
Choose a tag to compare
@qiqiboy qiqiboy released this 18 Mar 04:46
· 161 commits to master since this release
0.5.0
6d61c18

v0.5.0 (March 19, 2019)

👏经过将近一个月的开发迭代，我们终于发布了里程碑式的v0.5.0版本。

与v0.4.x版本相比，v0.5.0在保持API稳定的前提下，对于react@16乃至未来开启异步渲染的react@17都保持了很好的支持，同时也新增了对于Hooks的支持。但是，v0.5.0也同样向下兼容react@15版本，所以如果你还在使用v0.4.x版本，并且没有升级项目中react版本的计划，你依然可以更新到最新的v0.5.0!!

Installation

# npm
npm install react-formutil@latest --save

# yarn
yarn install react-formutil@latest

BREAK CHANGE

如果你在使用上一版本，0.5.0的一些变动可能会造成一些兼容错误，整理了下，可以参考以应对可能出现的错误：

$getField()遇到TSC报告类型错误

这是由于$getField()的返回值被声明为undefined | $Fieldutil导致的。你可以参考下方<Form />组件的更新说明，关于类型声明变化所给出的解决办法。

Warning: The second parameter(xxx) of parsePath() must be a string. OR Uncaught TypeError: path.match is not a function

这种一般是由于调用的方法被传递了错误的参数值。极有可能出现的一种情况是，调用$formutil.$validates()时：

// error
<Field name="username" $onFieldChange={this.props.$formutil.$validates} />

0.5.0中的$formutil.$validates()可以接受一些参数了，而$onFieldChange回调会传递Field的新值、旧值，这会导致$validates内部在解析这些参数时遇到错误。所以如果要对所有表单项进行校验，应当修改为：

// good
<Field name="username" $onFieldChange={() => this.props.$formutil.$validates()} />

$parser和$formatter可能没有按照预期运行

这是因为0.5.0起，区分了$value和$viewValue，相应的$parser和$formatter的行为也略作调整。大多数情况下，这没有什么影响。如果有与预期不一致的情形，请根据最新文档更新$parser和$formatter的使用。

CHANGE LOG

👉新增 是指增加了新的组件属性配置、新的访问调用API等。这些变动不影响之前版本。
💪增强 是指，在之前版本的API基础上，增加了新的调用或者传值方式，但是原本的调用方式保持不变，所以同样不影响之前版本使用。
🤘调整 是指与之前版本相比，有一定的API变化，如果有用到，可能需要在升级时特别注意。

All

  • 移除react@16.3开始deprecated的组件生命周期👏
  • 替换使用新版本的context API👏
  • 部分API增加错误调用警告⚠️

<Form />

  • 👉新增$processer属性，用来做Form-Level的状态修改。
  • 👉新增$validator属性，用来做Form-Level的校验。支持同步和异步模式。
  • 👉新增$formutil.$onValidates()，用于确保当前表单所有校验已执行完毕。注：该方法并不会触发校验，如果要触发表单校验，请使用$formutil.$validates()。From v0.5.1
  • 💪增强$formutil.$validates()，现在可以对全部、指定name的Field触发校验；运行校验全部Field还会触发Form的$validator校验。
  • 🤘调整$getField() $validate()的TS类型声明，这两个方法如果指定的name参数所对应的Field没有注册或者已经取消注册，将会返回undefined。你可以通过下面两种办法，来略调整代码以兼容新的类型声明：
    • 使用非空类型断言(Non-null assertion operator)调整报错的代码：this.props.$formutil.$getField('some_name')!.$validate()
    • 使用非空类型保护(Non-null and non-undefined type guards)来调整报错代码：const handler = this.props.$formutil.$getField('phone'); handler && handler.$validate();
  • 💪增强$formutil的所有更新状态方法，现在都将返回Promise，并且传递渲染完成后的新的$formutil对象；回调方法中也会传递渲染完成后的新的$formutil对象。
  • 🤘调整$formutil的TS类型声明，所有属性都被标记为readonly。

<Field />

  • 👉新增$viewValue状态，用来表示视图值。现在模型值$value和视图值$viewValue将分开保存。
  • 👉新增$validateLazy属性，用来控制是否启用懒校验模式。
  • 👉新增$reserveOnUnmount属性，用来控制是否在Field组件销毁时，将其一并从Form控制器中移除（默认情况是移除，你可以通过该属性设置为true来保留该Field状态）；下次该组件恢复时，会继承之前的所有状态，完全恢复如初！！From v0.5.1
  • 🤘更新$parser和$formatter的影响范围，两者将只会单向调用，即$parser只影响$viewValue => $value，$formatter反之。
  • 💪增强异步校验逻辑：连续触发的异步校验，都会采用最后一次校验的结果（前面触发的调用结果会被忽略，但是不会自动取消，如果有必要，需要自己实现取消逻辑，例如abort网络请求）
  • 🤘调整Field注册由之前的组件constructor实例化时，改为组件挂载DOMcomponentDidMount后。
    • 这是为了更好兼容未来Fiber开启异步后，组件mount前，都有可能被打断，避免重复注册，或者无法取消注册。
    • 在绝大多数情况下，这个改动对于使用都没有任何影响。如果你有在表单初始化时就访问Field实例，那么可能需要将这个逻辑改到表单组件的compoenntDidMount后运行。
  • 👉新增$fieldutil.$onValidate()，用于确保当前Field的校验已执行完毕。注：该方法并不会触发校验，如果要触发Field的校验，请使用$fieldutil.$validate()。From v0.5.1
  • 💪增强$fieldutil.$validate()，现在该方法传递回调函数将支持异步校验后回调（之前总是同步模校验完成后即回调）；并且该校验方法调用时，如果遇到异步校验被打断（值被更新，再次触发校验），回调方法会延迟到新的校验完成后调用（之前版本不会执行被打断的校验回调），并且会保持调用顺序！
  • 💪增强$fieldutil的所有更新状态方法，现在都将返回Promise，并且传递渲染完成后的新的$fieldutil对象；回调方法中也会传递渲染完成后的新的$fieldutil对象。
  • 🤘调整$fieldutil的TS类型声明，所有属性都被标记为readonly。

<EasyField />

  • 💪重构EasyField实现

Hooks

参考Hooks

Assets 2
Loading