了解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;
}