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