脚本宝典收集整理的这篇文章主要介绍了

【译】组件与Props

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

下面是react官方文档的个人翻译,如有翻译错误,请多多指出
原文地址:https://facebook.github.io/re...

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

组件能让你把UI切割成独立的,可重用的部件,并且能让你独立的思考每一个部件。

Conceptually, components are like JavaScript functions.

从概念上看,components 就像Javascript 的函数。

They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

他们都允许任意的输入(叫"props")然后返回React elements ,描述元素应该怎么显示在屏幕。

Functional and Class Components

函数以及类组件

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 element.

这个函数是一个合法的React element,因为他接收一个props对象参数并且返回一个React element。

We call such components "functional" because they are literally JavaScript functions.

我们叫这样的组件为函数式组件,因为他们跟Javascipt的函数一样。

You can also use an ES6 class to define a component:

你通常可以使用ES6的class来定义一个组件:

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.

现在,我们会因为函数式而使用它。

Rendering a Component

渲染组件

Previously, we only encountered React elements that represent DOM tags:
以前,我们只鼓励用React element来表示dom 标签: