这次给大家带来react中组件定义使用详解，react中组件定义使用的注意事项有哪些，下面就是实战案例，一起来看一下。
组件组件使你可以将 ui 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
在单页面应用(spa)中扮演着重要角色
组件简单实现 —— 函数式组件import react from 'react'
import reactdom from 'react-dom'
let component1 = () => {
return <h1>react component</h1>
}
reactdom.render(
<component1 />,
document.getelementbyid('app')
)
类组件 —— es5 语法var react = require('react');
var reactdom = require('react-dom')
var component1 = react.createclass({
render: function(){
return (
<p>
<h1>tom</h1>
<h1>sam</h1>
</p>
)
}
})
reactdom.render(
<component1 />,
document.getelementbyid('app')
)
类组件 —— es6 语法import react from 'react'
import reactdom from 'react-dom'
class component1 extends react.component{
render(){
return (
<p>
<h1>tom</h1>
<h1>sam</h1>
</p>
)
}
}
reactdom.render(
<component1 />,
document.getelementbyid('app')
)
效果预览
组件小结组件名首字母必须为大写
函数返回一个虚拟 dom 节点
类组件必须要有 render 方法
render 必须返回一个虚拟 dom 节点
实际工作中，类组件是常用的方式
组件属性(props)因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 react 的组件当中也是可以添加自定义的属性，而属性的获取则用 this.props
函数式组件import react from 'react'
import reactdom from 'react-dom'
let component1 = (props) => {
return <h1>name-{props.name}</h1>
}
reactdom.render(
<component1 name="sam"/>,
document.getelementbyid('app')
)
类组件import react from 'react'
import reactdom from 'react-dom'
class component1 extends react.component{
render(){
return <h1>name-{this.props.name}</h1>
}
}
reactdom.render(
<component1 name="sam"/>,
document.getelementbyid('app')
)
默认属性(defaultprops)组件的属性除了可以通过调用的时候以 dom 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
getdefalutprops 这个方法只会被调用一次。
//es5
var react = require('react');
var reactdom = require('react-dom');
var component1 = react.createclass({
getdefaultprops: function(){
return {
name: 'tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import react from 'react';
import reactdom from 'react-dom';
class component1 extends react.component{
static defaultprops = {
name: 'tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
component1.defaultprops = {
name: sam,
age: 22
}
//使用
reactdom.render(<component1/>, document.getelementbyid('p1'));
属性的类型规则(proptypes)通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 proptypes 来设置。
import react from 'react';
import reactdom from 'react-dom';
import proptypes from 'prop-types'
class component1 extends react.component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
component1.proptypes = {
name: proptypes.string
}
reactdom.render(<component1 name="tom"/>, document.getelementbyid('p1'));
prop 默认情况下是可选，常用的类型：
proptypes.array
proptypes.bool
proptypes.func
proptypes.number
proptypes.object
proptypes.string
proptypes.symbol
proptypes.any.isrequired
组件组件使你可以将 ui 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
在单页面应用(spa)中扮演着重要角色
组件简单实现 —— 函数式组件import react from 'react'
import reactdom from 'react-dom'
let component1 = () => {
return <h1>react component</h1>
}
reactdom.render(
<component1 />,
document.getelementbyid('app')
)
类组件 —— es5 语法var react = require('react');
var reactdom = require('react-dom')
var component1 = react.createclass({
render: function(){
return (
<p>
<h1>tom</h1>
<h1>sam</h1>
</p>
)
}
})
reactdom.render(
<component1 />,
document.getelementbyid('app')
)
类组件 —— es6 语法import react from 'react'
import reactdom from 'react-dom'
class component1 extends react.component{
render(){
return (
<p>
<h1>tom</h1>
<h1>sam</h1>
</p>
)
}
}
reactdom.render(
<component1 />,
document.getelementbyid('app')
)
效果预览
组件小结组件名首字母必须为大写
函数返回一个虚拟 dom 节点
类组件必须要有 render 方法
render 必须返回一个虚拟 dom 节点
实际工作中，类组件是常用的方式
组件属性(props)因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 react 的组件当中也是可以添加自定义的属性，而属性的获取则用 this.props
函数式组件import react from 'react'
import reactdom from 'react-dom'
let component1 = (props) => {
return <h1>name-{props.name}</h1>
}
reactdom.render(
<component1 name="sam"/>,
document.getelementbyid('app')
)
类组件import react from 'react'
import reactdom from 'react-dom'
class component1 extends react.component{
render(){
return <h1>name-{this.props.name}</h1>
}
}
reactdom.render(
<component1 name="sam"/>,
document.getelementbyid('app')
)
默认属性(defaultprops)组件的属性除了可以通过调用的时候以 dom 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
getdefalutprops 这个方法只会被调用一次。
//es5
var react = require('react');
var reactdom = require('react-dom');
var component1 = react.createclass({
getdefaultprops: function(){
return {
name: 'tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import react from 'react';
import reactdom from 'react-dom';
class component1 extends react.component{
static defaultprops = {
name: 'tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
component1.defaultprops = {
name: sam,
age: 22
}
//使用
reactdom.render(<component1/>, document.getelementbyid('p1'));
属性的类型规则(proptypes)通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 proptypes 来设置。
import react from 'react';
import reactdom from 'react-dom';
import proptypes from 'prop-types'
class component1 extends react.component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
component1.proptypes = {
name: proptypes.string
}
reactdom.render(<component1 name="tom"/>, document.getelementbyid('p1'));
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react实现选中li高亮步骤详解
前端中排序算法实例详解
以上就是react中组件定义使用详解的详细内容。