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

This article mainly introduces the ways of React to create components, which have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

After the introduction of React, there are three ways to define react components for different reasons, and there are three specific ways:

Stateless components defined by functions

Components defined by es5 Native React.createClass

Components defined by extends React.Component in es6 form

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:

1. 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.

two。 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.

3. 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.

4. 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, as follows:

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.

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 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 difference between React.createClass and React.Component

There are many important differences between the two components in addition to the different syntax formats in the code shown above, so let's describe the main differences between the two.

Function this self-binding

The this of each member function of the component created by React.createClass is automatically bound by React. Whenever you use it, you can directly use this.method, and the this in the function will be set correctly.

Const Contacts = React.createClass ({handleClick () {console.log (this); / / React Component instance}, render () {return ();}})

The member functions of the components created by React.Component will not be automatically bound to this and need to be bound manually by the developer, otherwise this cannot obtain the current component instance object.

Class Contacts extends React.Component {constructor (props) {super (props);} handleClick () {console.log (this); / / null} render () {return ();}

Of course, there are three manual binding methods for React.Component: you can bind it in the constructor, you can use method.bind (this) to do it on call, and you can use arrow function to bind it. Take the handleClick function in the example above, whose bindings can be:

Constructor (props) {super (props); this.handleClick = this.handleClick.bind (this); / / bind in constructor}

/ / use bind to bind

This.handleClick ()} > / / use arrow function to bind

The component property type propTypes and its default props property defaultProps configuration are different

When React.createClass creates a component, the property type of the component props and the default properties of the component are configured as the properties of the component instance. DefaultProps uses the method of getDefaultProps to obtain the default component properties.

Const TodoItem = React.createClass ({propTypes: {/ / as an object name: React.PropTypes.string}, getDefaultProps () {/ / return an object return {name:'}} render () {return}})

When React.Component configures these two corresponding messages when creating a component, they are configured as properties of the component class, not as properties of the component instance, that is, the so-called static properties of the class. The configuration above is as follows:

Class TodoItem extends React.Component {static propTypes = {/ / static property of class name: React.PropTypes.string}; static defaultProps = {/ / static property of class name:''};...}

The configuration of the component initial state state is different.

The state state of a component created by React.createClass is to configure the state related to the component through the getInitialState method

The state state of a component created by React.Component is declared in constructor as if it were initializing the component properties.

Const TodoItem = React.createClass ({/ / return an object getInitialState () {return {isEditing: false}} render () {return}) class TodoItem extends React.Component {constructor (props) {super (props); this.state = {/ / define this.state in constructor isEditing: false}} render () {return}}

Support for Mixins is different

Mixins (blending) is an implementation of object-oriented programming OOP, its function is to reuse the common code, the common code is extracted into an object, and then Mixins into the object to achieve code reuse.

React.createClass can use the mixins attribute when creating components to mix collections of classes in the form of arrays.

Var SomeMixin = {doSomething () {}}; const Contacts = React.createClass ({mixins: [SomeMixin], handleClick () {this.doSomething (); / / use mixin}, render () {return ();}})

Unfortunately, React.Component does not support Mixins, and so far the React team has not come up with an official solution in this form; but the React developer community offers a new way to replace Mixins, and that is Higher-Order Components.

How to choose which way to create a component

Because the React team has declared that React.createClass will eventually be replaced by the class form of React.Component. But the React.createClass form will not be abandoned until an alternative to Mixins is found. So:

Components that can be created with React.Component try not to create components in the form of React.createClass.

In addition, the choice of form for creating a component should be based on the following:

1. Whenever possible, try to use stateless components to create forms.

2. Otherwise (such as state, lifecycle method, ref, etc.), use the es6 form of `React.Component` to create the component

Thank you for reading this article carefully. I hope the article "how to create components in React" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.