The simplest way to define a component is to write a JavaScript function:
定义一个组件最简单的方法是写一个JavaScript函数:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>
}
This function is a valid React component because it accepts a single "props" object argument with data and returns a React ele1ment. We call such components "functional" because they are literally JavaScript functions.
这是一个有效的React组件因为它访问了一个单独的props对象参数作为数据并且返回一个React元素。我们将这些组件称为“功能”,因为它们是字面上的JavaScript函数。
You can also use an ES6 class to define a component:
你同样可以使用ES6的类去定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
The above two components are equivalent from React's point of view.
前面两个组件就React视图这点来讲是相同的。
Classes have some additional features that we will discuss in the next sections. Until then, we will use functional components for their conciseness.
类有一些额外的功能,我们将在下个章节进行讨论。在此之前,我们将使用功能组件来简化。