What are the three ways to create components in react

The following are three ways and characteristics of react components. I hope they can be helpful to everyone.

1. Functional components:

(1) Syntax:

function myConponent(props) {
	return `Hello${props.name}`
}

(2) Features:

Added hooks API can be found on the official website Understand, it used to be a stateless component, but now it can be stateful

The component cannot access this object

Cannot access the life cycle method

(3) Suggestions:

If possible, try to use stateless components to keep them simple and stateless. [What the author means is to try to use parent components to control child components, child components are used for display, and parent components are responsible for logic]

2. es5 way React.createClass component

(1 ) Grammar:

var myCreate = React.createClass({
	defaultProps: {
		//code
	},
	getInitialState: function() {
		return { //code };
	},
	render:function(){
		return ( //code );
	}
})

(2) Features:

This method is relatively old and will gradually be eliminated

(free video tutorial recommendation: javascript video tutorial )

3, es6 mode class:

(1) Syntax:

class InputControlES6 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			state_exam: props.exam
		}
		//ES6类中函数必须手动绑定
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange() {
		this.setState({
			state_exam: 'hello world'
		});
	}
	render() {
		return( //code )
	};
}

(2) Features:

Member functions will not be automatic Binding this requires developers to bind it manually, otherwise this cannot obtain the current component instance object.

State state is initialized in the constructor

The props attribute type and component default attribute are used as attributes of the component class, not the attribute of the component instance, so the static configuration of the class is used.

Please remember the basic principles of creating components:

• The first letter of the component name must be capitalized

• Components can only Contains a root node (if you don’t want the label to wrap this root node, you can introduce Fragment. It doesn’t matter if you don’t know how to use Fragment. You can read the author’s basic knowledge of react (1) in this article)

• Use functional components as much as possible to keep them simple and stateless.

Finally, let’s compare the differences between function components and class components for writing the same function:

Comparison of state controlled by parent components

Function components :

function App(props) {
	function handleClick() {
		props.dispatch({ type: 'app/create' });
	}
	return <div onClick={handleClick}>{props.name}</div>
}

class component:

class App extends React.Component {
	handleClick() {
		this.props.dispatch({ type: 'app/create' });
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div>
	}
}

Comparison of self-maintenance status

import React, { useState } from 'react';
function App(props) {
	const [count, setCount] = useState(0);
	function handleClick() {
		setCount(count + 1);
	}
	return <div onClick={handleClick}>{count}</div>
}

class component:

class App extends React.Component {
	state = { count: 0 }
	handleClick() {
		this.setState({ count: this.state.count +1 })
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>
	}
}

Related recommendations: react tutorial

The above is the detailed content of What are the three ways to create components in react. For more information, please follow other related articles on the PHP Chinese website!