The simplest way to define a component is to write a JavaScript function:
定義一個組件最簡單的方法是寫一個JavaScript函數(shù):
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對象參數(shù)作為數(shù)據(jù)并且返回一個React元素电媳。我們將這些組件稱為“功能”独榴,因為它們是字面上的JavaScript函數(shù)迫悠。
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.
類有一些額外的功能衰齐,我們將在下個章節(jié)進行討論润努。在此之前猿涨,我們將使用功能組件來簡化蛔外。