什么是 react-renderless
react-renderless 是一个轻量级的 React 组件库，其特点是：不依赖样式，只提供组件的逻辑部分，让开发人员自由地定义样式。每个组件只包含必要的代码，确保代码的简洁和易于维护。
安装 react-renderless
使用 npm 进行安装：
npm install --save react-renderless
或者使用 yarn 进行安装：
yarn add react-renderless
使用 react-renderless
在使用 react-renderless 之前，需要先引入 react 和 react-renderless：
import React from 'react';
import { renderless } from 'react-renderless';然后，就可以使用 renderless 函数创建组件了。举个例子，下面是一个使用 react-renderless 实现的计数器：
-- -------------------- ---- -------
----- ------- - ------------
------------- - ------ - --
-------- -
---------- ------- ------- - -- -- -- ------ ----------- - ------- ---
---------- ------- ------- - -- -- -- ------ ----------- - ------- ---
--
----- -- ------ ------- -- -- -
-----
------- ----------- -- -------------------------------
--------------------------
------- ----------- -- -------------------------------
------
--
---上述代码中，renderless 函数的参数为一个对象，包含三个属性：
- initialState：组件的初始状态，通常包含一些状态变量；
- actions：组件的行为，即对组件状态进行操作的函数；
- view：组件的 UI 部分，渲染组件的 HTML。
在 Counter 组件中，我们定义了一个名为 count 的状态变量，两个行为：increment 和 decrement，分别用于增加和减少 count 的值。在组件的 UI 部分中，我们以 HTML 标签的形式渲染了一个按钮和一个 span 标签，分别用于触发 increment 和 decrement 行为，并显示 count 的值。
接下来，我们将 Counter 组件渲染到页面上：
ReactDOM.render(<Counter />, document.getElementById('root'));使用 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