Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to declare react components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to declare react components" this article.

There are three ways to declare react components: 1, using functions to define stateless components; 2, using the "React.createClass ()" method to define components; and 2, using the "React.Component ()" method to define components in the form of ES6.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

How react declares (creates) components:

Since the introduction of React, there have been three ways to define react components for different reasons.

There are three specific ways:

Functional definition of stateless components

React.createClass () defines the component

React.Component () defines the component

Although there are three ways to define components of react, what is the difference between the three ways of defining components? Or why is there a corresponding definition? Here is a brief introduction.

Stateless functional component

The creation of stateless functional component forms has been around since React version 0.14. It is designed to create a pure presentation component, which is only responsible for displaying according to the incoming props and does not involve operations that want to state the state. Specific stateless functional components, which officially point out:

In most React code, most components are written as stateless components, which can be built into other components through simple composition, etc.; this design pattern is advocated through multiple simple and then merged into one large application.

A stateless functional component is formally represented as a component class with only one render method, created in the form of a function or ES6 arrow function, and the component is state-free. The specific creation form is as follows:

Function HelloComponent (props, / * context * /) {return Hello {props.name}} ReactDOM.render (, mountNode)

The creation of stateless components makes the code more readable, reduces a lot of redundant code, reduces to only one render method, and greatly enhances the convenience of writing a component. In addition, stateless components have the following remarkable features:

The creation of stateless components makes the code more readable, reduces a lot of redundant code, reduces to only one render method, and greatly enhances the convenience of writing a component. In addition, stateless components have the following remarkable features:

Components will not be instantiated, and overall rendering performance will be improved

Because the component is reduced to a function of the render method, because it is stateless, the stateless component will not be instantiated in the process of component instantiation, and the non-instantiation process does not need to allocate excess memory, thus the performance is improved to a certain extent.

Components cannot access this objects

Stateless components cannot access objects in the component this, such as this.ref, this.state, and so on, because there is no instantiation process. You cannot use this form to create a component if you want to access it.

Methods that components cannot access the lifecycle

Because stateless components do not require component lifecycle management and state management, the underlying implementation of this form of components will not implement the component lifecycle approach. Therefore, stateless components cannot participate in the lifecycle management of components.

Stateless components can only access the input props, and the same props will get the same rendering result without side effects.

Stateless components are encouraged to divide previously large components in as simple a way as possible in large projects. In the future, React will also make a series of optimizations for stateless components in areas such as meaningless checking and memory allocation, so try to use stateless components whenever possible.

React.createClass

React.createClass is the way to create components recommended by react at the beginning. This is a React component implemented by ES5's native JavaScript, which is in the following form:

Var InputControlES5 = React.createClass ({propTypes: {/ / define attributes passed into props various types initialValue: React.PropTypes.string}, defaultProps: {/ / component default props object initialValue:''}, / / set initial state getInitialState: function () {/ / component-related state object return {text: this.props.initialValue | | 'placeholder'} }, handleChange: function (event) {this.setState ({/ / this represents react component instance text: event.target.value});}, render: function () {return (Type something:);}}); InputControlES6.propTypes = {initialValue: React.PropTypes.string} InputControlES6.defaultProps = {initialValue:''}

In contrast to stateless components, React.createClass and the React.Component to be described later create stateful components that are instantiated and have access to the component's lifecycle methods. But with the development of React, the problems of React.createClass form itself are exposed:

React.createClass will self-bind function methods (unlike React.Component, which binds only functions that need to be concerned), resulting in unnecessary performance overhead and increasing the likelihood that the code will become obsolete.

React.createClass 's mixins is not natural and intuitive; the React.Component form is very suitable for high-level components (Higher Order Components--HOC), it shows more powerful features than mixins in a more intuitive form, and HOC is pure JavaScript, so don't worry about them being discarded. HOC can refer to stateless components (Stateless Component) and high-level components.

React.Component

React.Component is to create react components in the form of ES6, which is currently highly recommended by React to create stateful components, which will eventually replace the React.createClass form; code reuse can be better achieved than React.createClass. Change the above React.createClass form to React.Component form as follows:

Class InputControlES6 extends React.Component {constructor (props) {super (props); / / set initial state this.state = {text: props.initialValue | | 'placeholder'}; / / functions in the ES6 class must be manually bound this.handleChange = this.handleChange.bind (this) } handleChange (event) {this.setState ({text: event.target.value});} render () {return (Type something:);}} InputControlES6.propTypes = {initialValue: React.PropTypes.string}; InputControlES6.defaultProps = {initialValue:''} The above is all the content of the article "how to declare react components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.