Ant Design v4.0.0 发布，顺手更新体验一下

<h1 id="ant-designv4">Ant Design升级到v4版本</h1>
<blockquote>
<p><strong>设计规范调整</strong></p>
<ul>
<li>行高从 1.5(21px) 调整为 1.5715(22px)。</li>
<li>基础圆角调整，由4px 改为 2px。</li>
<li>Selected 颜色和 Hovered 颜色进行了交换。</li>
<li>全局阴影优化，调整为三层阴影区分控件层次关系。</li>
<li>气泡确认框中图标的使用改变，由问号改为感叹号。</li>
<li>部分组件选中颜色统一改为 @blue-1: #E6F7FF，对应 hover 颜色改为 @gray-2: #FAFAFA。</li>
<li>报错色色值调整，由 @red-5: #F5222D 改为 @red-5: #FF4D4F。</li>
<li>分割线颜色明度降低，由 #E8E8E8 改为 #F0F0F0。</li>
<li>DatePicker 交互重做，面板和输入框分离，范围选择现可单独选择开始和结束时间。</li>
<li>Table 默认背景颜色从透明修改为白色。</li>
<li>Tabs 火柴棍样式缩短为和文字等长。</li>
</ul>
</blockquote>
<p>由于一些代码修改较大，因此需要对已有代码进行修改</p>
<h2 id="icon-">Icon 修改</h2>
<p>这次图标从原先的全量引入改为了按需加载，对于确定只需要单个图标的地方，可以通过按需引入只加载单个图标的svg，共计能节省150KB</p>
<p><strong>但是！</strong> 由于左侧的导航部分使用了动态图标，因此这里不能按需加载，因此需要使用<code>import { Icon } from '@ant-design/compatible';</code>来引入原本的<code>Icon</code>以供使用（<code>@ant-design/compatible</code>需要单独下载）</p>
<h2 id="form-">Form 修改</h2>
<p>原本Ant Design的<code>Form</code>使用<code>Form.create()</code>、<code>this.props.form.getFieldDecorator()</code>等函数对各种表单进行修改，可以说是<strong>非常不优雅</strong>的一种写法，这次更新将<code>Form</code>改写成了更符合直觉的写法<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
<p>首先，删掉导出的<code>Form.create()</code>部分，原先使用<code>this.props.form.getFieldDecorator()</code>设置的名称、规则直接通过<code>Form.Item</code>的参数设置</p>
<p>而获得<code>Form</code>实例有两种方式，首选的方案为使用<code>const [form] = Form.useForm();</code>，但是这种写法在class component中无法使用，因此应该使用另一种方案<code>formRef = React.createRef&lt;FormInstance&gt;();</code>，并使用<code>&lt;Form ref={this.formRef}&gt;</code>来绑定<br>
需要调用form相关函数时，可以使用<code>this.formRef.current.getFieldsValue()</code></p>
<p>字段的初始值设置，移入了<code>&lt;Form  initialValues={{&quot;name&quot;:&quot;OhYee&quot;}}&gt;</code>，同时字段对应属性<code>valuePropName</code>则移入<code>Form.Item</code></p>
<h2 id="row-">Row 修改</h2>
<p>新版本的栅格组件将flex从<code>Row</code>移入<code>Col</code>，因此所有涉及到布局的内容都应该重新修改</p>
<h2 id="table-">Table 修改</h2>
<p>Table基本上没有太大的修改，只不过改了下表格背景色及一些细节<br>
但是最大的问题在于引入了一个新的Bug：在<code>column</code>中的<code>setState()</code>不会触发表格重新渲染（但是值确实已经改变了）。对于可编辑的表格来说，将导致功能不可用。</p>
<p>临时的解决方案时，把对应行的 key 值修改成别的值，然后再修改回去，从而触发行重新渲染，相关Issue见参考资料<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup> <sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<p>不过由于这里后台深度依赖于该功能，以及设计拓展字段也依赖于该功能，这种深层次的修改更为复杂，因此还是等待官方更新。</p>
<h2 id="heading">参考资料</h2>
<section class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1" role="doc-endnote">
<p><a href="https://ant.design/components/form/v3-cn/">从 v3 到 v4 —— Form</a> <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p><a href="https://github.com/ant-design/ant-design/issues/21573">Table - Column render not working on state changing</a> <a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:3" role="doc-endnote">
<p><a href="https://github.com/ant-design/ant-design/issues/21541">升级到4.0后,class table setState(editable,columns) 失效</a> <a href="#fnref:3" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</section>
