了解React.js中的组件和道具

React应用程序由组件组成。组件一般都使用react元素。组件可以是独立的,可重复使用的组件。

有两种类型的组件-

  • 无状态组件(基本上是JavaScript函数)

  • 有状态组件(使用JavaScript类功能)

两种组件类型都接收一个通常称为props的属性对象。

无状态组件在函数中具有return语句,而有状态组件具有用于返回react元素的render方法。

要显示在页面上的简单react元素是-

const message=<h1>Hello</h1>;
ReactDOM.render( message, document.getElementById(‘root’) );

它在屏幕上显示Hello消息。

创建功能组件-

function Message(props){
   return (
      <h1> {props.message} </h1>
   );
}

上面的JavaScript函数接受一个名为props的属性对象。props对象包含消息。

Creating class bases Stateful component:
class Message extends React.component{
   render(
      return (
         <h1>{this.props.message} </h1>
      );
   )
}

以上两个组件在功能上是相同的。基于类的组件具有其他生命周期功能。

渲染组件

React元素可以包含简单的html标签。示例-

const player =<h2> Steve </h2>;

类似地,react元素可以容纳基于功能或基于类的组件-

const message=<Message message=”hello”/>;

传递给组件的属性可以作为props对象的属性来访问。道具对象看起来像-

{ message: Hello}

组件的名称必须使用大写字母,以便React能够区分html元素还是用户定义的元素。

组成多个组件

组件可以在其他组件中使用,也可以嵌套组件。我们可以创建最小的函数组件或使用抽象级别很有用。

这些道具本质上是只读的,不应在组件内部进行修改。

如果组件在任何时间点为相同的输入返回相同的输出,则将它们称为纯组件。

纯成分的例子 

function Multiplication(i, j){
   return i*j;
}