React：如何创建组件
组件是任何 React 应用不可或缺的一部分。在本文中，我们将学习如何创建组件来实现我们想要的功能。
把组件想象成应用程序里可以反复使用的小模块。假设我们正在做一个社交网络，想在每篇文章下方添加点赞、分享和评论按钮。我们可以把这些按钮的代码分别写在每个需要的地方，但如果要在六个不同的地方显示，而且每次都需要修改，那就太麻烦了。
通过创建一个组件，我们可以编写一次实际代码，然后将其放置在我们想要的任何位置。
创建类组件
为了创建一个类组件，我们需要给它命名。在下面的代码中，我们将类组件命名为“Example”。组件的所有代码都将放在省略号（“...”）所在的位置。
import React from 'react';
class Example1 extends React.Component {
...
}
这很简单！需要注意的是，如果这是一个独立文件中的组件，则必须将其导出。有两种方法可以做到这一点。我们可以在类实例化之前添加“export default”，或者直接在类之后添加一行导出语句。示例如下：
export default class Example2 extends React.Component {
...
}
or
class Example3 extends React.Component {
...
}
export default Example3;
向类组件添加状态
类组件的另一个巨大优势在于状态管理。正如我之前提到的，状态管理允许我们在组件内部管理数据。状态管理是使用 React 的一大优势（尽管这个概念并非 React 独有），而要使用它，我们需要一个类组件。
要开始使用状态管理，我们需要给类组件添加一个构造函数。你可以在这里阅读更多关于构造函数的信息，但现在你只需要知道，这是给组件添加状态所必需的。通常，我们会看到“props”作为构造函数的参数传入，这样我们就可以使用传递给该组件的任何 props。下面的示例对此进行了说明。
class Example4 extends React.Component {
constructor(props) {
super(props);
this.state = {
...
}
}
}
export default Example4;
使用 render 方法渲染我们的 JSX。
在构造函数之后，我们可以添加一个 render 方法，它会返回我们的 JSX 代码。需要注意的是，在 React 中，无论组件类型如何，return 属性只能返回一个直接元素。这意味着我们用来创建该组件的所有 JSX 代码都必须包裹在一个外部元素中，例如 `<div>`。下面的示例展示了如何构建这样的组件。
class Example5 extends React.Component {
...
render() {
return (
<div>
<p>Hello World!</p>
</div>
)
}
}
我们组件中的自定义函数
类组件的另一个优点是能够编写供组件内部使用的函数。这非常简单。我们可以在构造函数和渲染方法之间编写一个函数。我们可以像其他 JavaScript 函数一样，传递任何必要的参数。不过，要实现这一点，还需要一个额外的步骤。在构造函数内部，我们需要将 `this` 关键字绑定到该方法，以便它可以在任何地方使用。为此，我们可以使用以下代码：
this.customFunction = this.customFunction.bind(this);
本文末尾的一个例子将对此进行更详细的说明，以便您更好地了解这些事物是如何结合在一起的。
使用组件
如果组件位于不同的文件中，我们首先需要将组件导入到想要使用它的文件中。我们可以使用以下代码：
import Example6 from './path/to/component';
导入完成后，我们可以使用导入时指定的名称将其添加到 JSX 中。例如，我们可以按如下方式添加上面导入的组件：
<Example6 />
道具
如果我们想将数据传递给组件，而又不想在组件内部硬编码或进行任何查询，该怎么办呢？这时就需要用到 props 了。Props 是我们可以传递给组件实例的数据片段，我们可以随意命名这些数据，以便在组件内部访问它们。
假设我们要将字符串“Hello World”传递给组件。在赋值 prop 时，我们需要给 prop 起个名字。这个名字应该能够准确地告诉我们它代表什么。由于这是一个示例，我这里就用“text”吧，但在实际应用中，名字应该更具描述性。我们可以这样做：
<Example6 text="Hello World" />
组件内部接收 props
好的，现在我们已经将 props 传递给了组件，接下来该怎么做呢？我之前说过，在创建组件的构造函数时，我们通常会将 props 放入参数中。这样组件就能接收到我们传递的 props。接收到 props 后，我们就可以在 JSX 中使用 `this.props.NameOfProp` 来访问它们，如下所示：
<p>{ this.props.text }</p>
上面的代码会在 ap 标签中渲染“Hello World”。很简单，对吧？
完整代码
// First we create our class
class Greeting extends React.Component {
// Then we add our constructor which receives our props
constructor(props) {
super(props);
// Next we establish our state
this.state = {
name: '',
greeting: `Good ${this.props.time}, `
}
// To use the 'this' keyword, we need to bind it to our function
this.onChange = this.onChange.bind(this);
}
// A custom function to change the name in our state to match the user input
onChange(e) {
this.setState({
name: e.target.value
})
}
// The render function, where we actually tell the browser what it should show
render() {
return (
<div>
<section className="section">
<label className="label">Name:</label>
<input className="input" name="name" placeholder="Enter your name..." onChange={this.onChange} />
</section>
<section className="section">
<p>{this.state.greeting} {this.state.name}</p>
</section>
</div>
)
}
}
ReactDOM.render(<Greeting time="morning" />, document.getElementById('app'));
您也可以在这里看到该组件的实际运行效果。
结论
虽然这些只是基础知识，但它们足以让你在 React 中构建应用。尝试进行各种尝试，例如向新组件传递 props，或者向组件添加 state 来展示数据。这些都是 React 的基础构建模块。
另外，我很想看看你们用 React 开发的作品，请在下面的评论区留言！