Detailed explanation of component definition and usage in React

This time I will bring you a detailed explanation of the use of component definitions in React. What are the precautions for the use of component definitions in React. The following is a practical case, let's take a look.

Components

Components allow you to divide the UI into independent, reusable widgets, and design each widget individually.

Plays an important role in single page applications (SPA)

Simple implementation of components - functional components

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)

Class components-ES5 syntax

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')
)

Class component - ES6 syntax

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')
)

Effect preview

Component summary

• The first letter of the component name must be capitalized

• The function returns a virtual DOM node

• Class components must have a render method

• render must return a virtual DOM node

• In actual work, class components are a commonly used method

Component properties (Props)

Because the call of the component is In the form of html tags, and html tags can add attributes, so custom attributes can also be added to React components, and the attributes are obtained using the this.props

function Component

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')
)

Class component

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

In addition to passing values ​​in the form of DOM node attributes when calling, the properties of components can also be set to default If the corresponding attribute value is not passed when calling, the default attribute value will be used.
getDefalutProps This method will only be called once.

//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'));

Attribute type rules (propTypes)

Normally, when defining a component, the attributes are defined and some usage conditions are added, such as certain attribute values. Data type must be an array, or some properties cannot be empty. At this time, they can be set through 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 is optional by default, commonly used types:

• PropTypes.array

• PropTypes.bool

• PropTypes.func

• PropTypes.number

• PropTypes.object

• ##PropTypes.string

• PropTypes.symbol

• PropTypes.any.isRequired

Component

Components allow you to divide the UI into independent, reusable widgets, and design each widget individually.

Plays an important role in single page applications (SPA)

Simple implementation of components - functional components

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)

Class components-ES5 syntax

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')
)

Class component - ES6 syntax

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')
)

Effect preview

Component summary

• The first letter of the component name must be capitalized

• The function returns a virtual DOM node

• Class components must have a render method

• render must return a virtual DOM node

• In actual work, class components are a commonly used method

Component properties (Props)

Because the call of the component is In the form of html tags, and html tags can add attributes, so custom attributes can also be added to React components, and the attributes are obtained using the

this.props

function Component

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')
)

Class component

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

In addition to passing values ​​in the form of DOM node attributes when calling, the properties of components can also be set to default If the corresponding attribute value is not passed when calling, the default attribute value will be used.

getDefalutProps This method will only be called once.

//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'));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

前端中排序算法实例详解

The above is the detailed content of Detailed explanation of component definition and usage in React. For more information, please follow other related articles on the PHP Chinese website!