What are the three ways to create components in react?

Introduction to the three ways to create components in React and their similarities and differences:

1. Functional components

(Recommended tutorial: react tutorial)

1. Grammar

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

2. Features

You can go to the official website to learn about the new hooks API. It used to be stateless. Components can now be stateful

Components cannot access this object

Cannot access life cycle methods

3. Suggestions:

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

2. es5 way React.createClass component

1. Syntax

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

3.es6 method 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 automatically bind this, and developers need to bind 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 for creating components:

1. The first letter of the component name must be capitalized

2. The component can only contain one root node (if this root node If you don’t want tags to wrap it up, you can introduce Fragment

3. Try to use functional components to keep them simple and stateless.

Finally, let’s compare functional components and class components for the same Difference in how functions are written:

Comparison of state controlled by parent component

Function component:

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-maintained state

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>
	}
}

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!