什么是 react-renderless
react-renderless 是一个轻量级的 React 组件库，其特点是：不依赖样式，只提供组件的逻辑部分，让开发人员自由地定义样式。每个组件只包含必要的代码，确保代码的简洁和易于维护。
安装 react-renderless
使用 npm 进行安装：
--- ------- ------ ----------------
或者使用 yarn 进行安装：
---- --- ----------------
使用 react-renderless
在使用 react-renderless 之前，需要先引入 react 和 react-renderless：
------ ----- ---- -------- ------ - ---------- - ---- -------------------
然后，就可以使用 renderless 函数创建组件了。举个例子，下面是一个使用 react-renderless 实现的计数器：
----- ------- - ------------
------------- - ------ - --
-------- -
---------- ------- ------- - -- -- -- ------ ----------- - ------- ---
---------- ------- ------- - -- -- -- ------ ----------- - ------- ---
--
----- -- ------ ------- -- -- -
-----
------- ----------- -- -------------------------------
--------------------------
------- ----------- -- -------------------------------
------
--
---上述代码中，renderless 函数的参数为一个对象，包含三个属性：
- initialState：组件的初始状态，通常包含一些状态变量；
- actions：组件的行为，即对组件状态进行操作的函数；
- view：组件的 UI 部分，渲染组件的 HTML。
在 Counter 组件中，我们定义了一个名为 count 的状态变量，两个行为：increment 和 decrement，分别用于增加和减少 count 的值。在组件的 UI 部分中，我们以 HTML 标签的形式渲染了一个按钮和一个 span 标签，分别用于触发 increment 和 decrement 行为，并显示 count 的值。
接下来，我们将 Counter 组件渲染到页面上：
------------------------ --- ---------------------------------
使用 react-renderless 开发自定义组件
通过 react-renderless，我们可以方便地开发自定义组件。下面是一个例子，展示了如何使用 react-renderless 开发一个自定义的输入框组件：
----- ----- - ------------
------------- - ------ -- --
-------- -
--------- ------- ------ -- -- ----- ---
--
----- -- ------ -------- ----- -- -- -
------
-----------------
-------------------
------------- -- ---------------------------------
--
--
---
---------------------- ----------- --- ---------------------------------上述代码中，我们根据 HTML 的标准属性，在组件的 props 中添加了 type 属性，用于指定输入框的类型（text、password 等）。然后，在组件的 initialState 中定义了一个名为 value 的状态变量，记录输入框的值。最后，在 view 中以 HTML 输入框的形式渲染了组件，并将输入框的值和 onChange 事件与 value 状态变量和 setValue 行为相绑定。
总结
react-renderless 是一个轻量级的 React 组件库，其不依赖于样式，只提供组件的逻辑部分，让开发人员自由地定义样式。通过本文的介绍，相信大家已经可以掌握 react-renderless 的使用方法，并可以使用它快速开发自定义组件。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562c481e8991b448e0041