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

This article will explain in detail what the three ways of writing about React components are. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

React focuses on the view layer, and componentization is the foundation of React and one of its core ideas. A complete application will be assembled by independent components.

Up to now, React has been updated to v15.4.2. Due to the popularity of ES6 and the influence of different business scenarios, we will find that there are three main ways to create React components: 1. ES5 React.createClass,2. ES6 write React.Component,3. Stateless functional writing (pure component-SFC).

Which way of writing do you like best? Each team has its own code specification and development model, but React components are written on the principle of improving code readability, better component performance, and easy bug tracking. Let's talk about the differences between these three ways of writing and the best practices for the scenarios in which they apply.

ES5- Writing React.createClass

React.createClass needless to say, we first used this method to build a component "class". It accepts an object as a parameter, a render method must be declared in the object, and render returns a component instance. Here is an example of a SwitchButton component to see the specific usage of React.createClass:

Var React = require ('react'); var ReactDOM = require (' react-dom'); var SwitchButton = React.createClass ({getDefaultProp:function () {return {open: false}}, getInitialState: function () {return {open: this.props.open};}, handleClick: function (event) {this.setState ({open:! this.state.open});}, render: function () {var open = this.state.open, className = open? 'switch-button open':' btn-switch'; return ();}}); ReactDOM.render (, document.getElementById ('app'))

ES6- Writing React.Component

The class syntax of ES6 is supported after React is upgraded to v0.13. We can use class App extends React.Component {...} to create components, which is currently officially recommended to create stateful components. Rewrite the example of the above SwitchButton component with ES6:

Import React from 'react'import {render} from' react-dom'class SwitchButton extends React.Component {constructor (props) {super (props) this.state = {open: this.props.open} this.handleClick = this.handleClick.bind (this)} handleClick (event) {this.setState ({open:! this.state.open})} render () {let open = this.state.open, className = open? 'switch-button open':' btn-switch' return ()}} SwitchButton.defaultProps = {open: false} render (, document.getElementById ('app'))

Differs from React.createClass in creating components:

Import

Instead of using the require () method to import the module, ES6's import statement is used here, where import {render} can import variable names directly from the module, which is more concise and intuitive.

Initialize state

When React uses ES6's "class" inheritance implementation, the hook function getInitialState is removed, and the initialization of state is declared in the constructor method constructor.

This binding

When React.Component creates a component, the event function does not automatically bind this, we need to bind it manually, otherwise this will not point to the instance object of the current component. There are three ways to bind this:

1. Use bind () for hard binding in constructor

Constructor () {this.handleClick = this.handleClick.bind (this);}

two。 Use bind () binding directly on the element

3. ES6 has a very useful grammatical candy: Arrow Function (arrow function) it can easily make this point directly to class SwitchButton (its function is equivalent to the familiar var self = this, but the latter will confuse the code, and Arrow Function can solve this problem very well.)

This.handleClick ()} >

Stateless functional writing (pure component SFC)

Both React.createClass and React.Component can be used to create stateful components, while stateless components-Stateless Component was introduced by React after v0.14.

It appears because with the continuous increase of application complexity and the increase of the number of components, components are divided into different types according to their respective responsibilities, so there is a pure component that is only responsible for display, its characteristic is that it does not need to manage state state, and data is passed directly through props, which is also in line with the idea of React one-way data flow.

For such stateless components, functional declaration will make the code more readable and greatly reduce the amount of code, and Arrow Function is the best partner for functional writing:

Const Todo = (props) = > ({props.text})

In the Todo component defined above, the input and output data is completely determined by props and does not have any side effects. When props is of type Object, we can also use the deconstruction assignment of ES6:

Const Todo = ({onClick, complete, text,... props}) = > ({props.text})

Stateless components are generally used with high-level components (referred to as: OHC). High-level components are used to host the state,Redux framework is to manage data sources and all states through store, in which all components responsible for presentation are written in a stateless function.

This model is encouraged to segment previously large components as simply as possible in large projects, and in the future React will also make some special optimizations for such stateless components, such as avoiding meaningless checks or memory allocation. Therefore, it is recommended that you use stateless components in the project as much as possible.

Of course, stateless components are not a panacea, for example, it does not support "ref" for a simple reason, because components are not instantiated before React calls it, and naturally there is no "ref". (ref and findDOMNode actually break the convention that states are passed only through props between parent and child components, violating the principle of React and need to be avoided).

Comparison of the above three writing methods, as well as best practices

Facebook officials have long announced that ES6React.Component will replace React.createClass. As React continues to evolve, React.createClass exposes some problems:

Compared to React.Component, which can selectively bind required functions, React.createClass automatically binds functions, which results in unnecessary performance overhead.

React.createClass 's mixin,React.Component is no longer supported. In fact, mixin is not elegant and intuitive. The alternative is to use the more popular high-level component-HOC. If your project is still inseparable, you can also use react-mixin.

This is the end of this article on "what are the three ways to write React components?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.