React.js是一个流行的JavaScript库，用于构建交互式用户界面。它使用组件来构建可重用的UI元素，并提供了许多内置组件，如按钮、文本框等，但在现实世界中，我们经常需要自定义组件。本文将介绍如何延伸React.js组件，以创建自定义组件。
1. 组合组件
React.js组件可以嵌套使用，通过这种方式可以组合出更复杂的UI元素。例如，考虑以下代码：
-------- -------------- -
------ -
---- --------------------
--------- ------------------- --
---- -------------------------------------------
---- -------------------------------------------
------
--
-
-------- --------------- -
------ -
---- ----------------------
---- -------------------------- --------------------- --
---- ---------------------------------------------
------
--
-在上面的代码中，Comment 组件包含了 UserInfo 组件。当渲染 Comment 组件时，也会渲染 UserInfo 组件。这种方式使得我们可以轻松地组合多个组件，形成新的组件。
2. 属性传递
React组件可以接受属性(props)，这些属性可以方便地传递数据给组件。例如，在上面的代码中，Comment 组件接受三个属性：author、text 和 date。这些属性可以通过以下方式传递：
-------- -------------- ------- ---------- ---------------------------------- ------------ ------- --------- ------- --
在组件内部，我们可以使用 props.author 来访问作者信息，使用 props.text 访问评论文本，以及使用 props.date 访问评论日期。
3. 状态管理
有时候，我们需要为组件添加一些状态（state）。状态是组件内部管理的数据，可以随着时间改变。React.js提供了一种称为“状态钩子”的特殊函数，它可以让我们在组件内部管理状态。
例如，考虑以下代码：
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------ ------- ------- ---------
------- --------------------------- -----------
------
--
-在上述代码中，我们使用 useState 钩子来创建一个名为 count 的状态，并将其初始值设置为0。然后，我们定义 handleClick 函数，每次调用该函数时都会将计数器递增1。最后，我们在渲染函数中使用 count 和 handleClick 渲染UI。
4. 生命周期方法
React.js组件有一些特殊的生命周期方法，可以在组件挂载、更新或卸载时执行某些操作。这些方法包括 componentDidMount、componentDidUpdate 和 componentWillUnmount。
例如，考虑以下代码：
----- ----- ------- --------------- -
------------------ -
-------------
---------- - ------ --- --------
-
------------------- -
------------ - ------------
-- -- ------------
----
--
-
---------------------- -
----------------------------
-
------ -
---------------
----- --- ------
---
-
-------- -
------ -
-----
---------- -----------
------ -- --------------------------------------------
------
--
-
-在上述代码中，我们定义了一个名为 Clock 的类组件，并使用 constructor 钩子和
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13358