What is componentized development? The idea of componentized development

If we need to develop a large page now, if we put all the processing logic together, the logic of the page will become extremely complex and unmanageable. But if we break down an interface into smaller modules and functions. Each function block performs its own independent function, and then the management and maintenance of the entire page becomes very easy.

So, we use componentization when developing React or Vue

advantage

  1. Split a page into multiple components for easy management and maintenance
  2. Components can be reused
  3. Each component has its own logic and functionality

React components and Vue components

React components are more flexible than Vue components and can be divided into many classes of components in different ways. For example:

  • Depending on how components are defined: function components and class components
  • Maintenance depends on whether a component has state: stateless components and stateful components
  • According to different responsibilities: presentation components and container components

Class components

Class components must meet the following requirements:

  1. The component name starts with an uppercase character
  2. Class components need to inherit from react.component
  3. The render function must be implemented

Functional component

Functional components have the following characteristics:

  1. No this object
  2. No internal state
  3. No life cycle

Component communication

Both Vue and React need to transfer data to each other during component-based development. The most basic is that the parent component transfers data to its child component. How does React implement this?

The parent component passes data to the child component using props, as shown in the following example:

/ / the parent component
/ /..
class Father extends React.Component {
    render(){
    	return (
        	<Childcpn name="fengan" age="18" height="185cm" />
            <Childcpn2 name="fengan" age="18" height="185cm" />)}}// Class component demo code - child components
class Childcpn extends React.Component {
    render(){
    	let { name,age,height } = this.props
    	return (
        	<div> { name+age+height } </div>)}}// Function component demo code - child components
function Childcpn2(props) {
	const {name,age,height} = props
	render(){
    	return (
        	<div> { name+age+height } </div>)}}Copy the code

PropTypes property validation

Use the propTypes library to validate or set default values for incoming component values when a component is passed:

The following code provides a simple guide to using the propTypes library: see the React website for details

Import the prop-types library
import PropTypes from 'prop-types'

//2. Validate child components
// The name of the component when declared. attribute
Childcpn.propTypes = {
	name:PropTypes.string.isRequired,
    age:PropTypes.number,
    height:PropTypes.number,
    names:PropTypes.array,
}

// You can specify default values in addition to validation
Childcpn.defaultProps = {
	name:"fengan".age:18.height:1.85.names: ['aaa'.'bbb']}Copy the code

The child component passes data to the parent

Now that we know how the parent passes data to the child, we often need the child to pass data to the parent as we develop. So how does React work?

React uses props to pass messages to its parent component. The parent component passes a callback function to the child component. Look at the following code in detail

How to use prop transfer functions:

// Child communicates with parent
/ / child component
class Btnclick extends Component {
    render() {
        let { addClick } = this.props
        return <button onClick={ addClick} >+ 1</button>}}/ / the parent component
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count:0}}render() {
        let { count } = this.state
        return (
            <div>
                <div>{ count }</div>// Use the child component and pass the parent component's function to the child component<Btnclick addClick={() = >{ this.addClick() } } />
            </div>
            
        );
    }

    addClick() {
        let { count } = this.state
        count += 1
        this.setState({
            count
        })
    }
}

export default App;
Copy the code

Case: To pass from child to father

/ / the parent component
import React, { Component } from 'react'
import TabControl from './TabControl'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titles: ['new'.'select'.'popular'].currentTitle:'new'}}render() {
        let { titles,currentTitle } = this.state
        return (
            <div>
                <TabControl titles={ titles }  itemClick={ (index) = > { this.getTitle(index) } } />
                <h2>{ currentTitle }</h2>
            </div>)}getTitle(index) {
        let { titles,currentTitle } = this.state
        currentTitle = titles[index]
        this.setState({
            currentTitle
        })
    }
}
Copy the code
/ / child component
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './style.css';

export default class TabControl extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex:0}}static propTypes = {
        titles: PropTypes.array.isRequired,
        itemClick: PropTypes.func.isRequired,
    }

    render() {
        let { titles,itemClick } = this.props
        let { currentIndex } = this.state

        return (
            <div>
                <ul className="tab-control">
                    { titles.map( 
                        (item,index) => 
                        <li key={index} 
                            className= { currentIndex= = =index ? 'active tab-item' : 'tab-item'}
                            onClick={ e= > { 
                                this.itemClick(index);
                                itemClick(index)
                            } }
                            >
                            {item}
                        </li>)}</ul>
            </div>)}itemClick(index) {
        this.setState({
            currentIndex:index
        })
    }
}
Copy the code
// style file.tab-control {display: flex; padding: 0; margin: 0; } .tab-item { flex: 1; list-style: none; text-align: center; line-height: 44px; height: 44px; } .tab-control .active { border-bottom: 2px solid orange; color: orange; }Copy the code

The parent component passes functions to the child component using props, and the child component calls this function. In the child component, put the data to be passed into the function parameters received by props. Then the parameter of the function of the parent component is the data of the parameter of the child component, and then the corresponding code of the data passed by the child component is realized in the function.

React implements Vue slots

When using a subcomponent, you can use a double tag. The content written in the double tag is automatically passed to the props. Children property of the subcomponent

/ / the parent component
class App extends Component {
	render() {
    	return (
        	<div>// Double label form using subcomponents<NavBar>
                	<a>aaa</a>
                    <span>bbb</span>
                </NavBar>
            </div>)}}/ / child component
class NavBar extends Component {
	render() {
    	return (<div>
        	<div>{this.props.children[0]}</div>
            <div>{this.props.children[1]}</div>
        </div>)}}Copy the code

Most of the cases mentioned above are recommended when only one component is passed in. However, if multiple components need to be passed in, the disadvantage of the above method is that labels need to be written in a certain order. Therefore, we provide another way to pass multiple slots: we use props to pass properties that need to insert tags in the corresponding places. To achieve the role of named slot.

Communicate Context across components

Context is an API that React provides for sharing such values between components without explicitly passing props layer by layer through the component tree.

Please refer to the official documentation for details