简介
@emotion/is-prop-valid 是一个可以帮助开发者在 React 中验证是否支持该 HTML 属性的 npm 包。相比较于其他类似的包，这个包的优势在于其在 React 中使用非常便捷，并且可以支持自定义组件的验证。
安装方法
在项目中使用 npm 安装 @emotion/is-prop-valid：
--- ------- ----------------------
或者使用 yarn：
---- --- ----------------------
使用方法
在 React 中使用
在 React 中使用 @emotion/is-prop-valid 非常简单，只需要引入该包并调用其函数即可：
------ ----------- ---- -------------------------
----- ----------------- - ------- -- -
------ -
---- -----------
-- ---
------
--
-
-- ------ ---------- --
-------------------------- -- ----
-- ----------- ---------- --
------------------------- - ---------- ----------------- --- -- ----上面的示例中，我们定义了一个自定义组件 MyCustomComponent，并使用 isPropValid 函数验证是否支持 background 属性。当然，我们也可以传入一个自定义组件供其验证该组件是否支持该属性。
React.memo 优化
在使用 React.memo 来优化组件性能时，由于 React.memo 默认会对所有 props 进行 shallow equal 比较，因此如果传入了不支持的 props，就会导致组件不必要的重新渲染。
使用 @emotion/is-prop-valid 可以帮助我们解决这个问题，示例代码如下：
------ ----- ---- --------
------ ----------- ---- -------------------------
----- ----------- - ------------------ -- -
-- ---- ----------- ------- ----- ---
----- ---------- - ------------------------------- ---- -- -
-- ------------------ -
-------- - -----------
-
------ ----
-- ----
------ -
---- ----------------
-- ---
------
--
---通过使用 isPropValid 函数，我们可以在 React.memo 的 props 进行浅比较之前，先将所有不支持的 props 过滤掉，从而避免不必要的重新渲染。
组件库中使用
如果你是在开发一个组件库，并且需要使用该 npm 包进行属性验证，建议你采用以下方式：
------ ----------- ---- -------------------------
------ ------- -------- ------------------------ -
----- ----------- - ------------------------------- ---- -- -
-- ------------------ -
-------- - -----------
-
------ ----
-- ----
-- ---
-我们需要对该组件的传入 props 进行过滤，只留下已经被支持的 props。
结论
@emotion/is-prop-valid 是一款非常方便实用的 npm 包，可以大大减少开发者在 React 中属性验证的繁琐工作，让开发更加快速简便。
同时，我们也需要注意在 React.memo 中使用时，应该使用该包过滤掉所有无法被支持的属性，来提高组件的性能表现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/164333