On React custom function components and component usage class

1, React assembly concept

1.1, the concept of assembly

React applications are built on top of the component.

React component as a core, and is an important part of View, View each page consists of one or more components that can be said is the cornerstone React components of the application. React in the assembly configuration, the points can be divided according to the state stateful and stateless component assembly.

1.2, the characteristics of the components

In the back-end component-based concept already existed for many years, but in recent years with the development of the front end, the concept began to be mentioned frequently in the front, especially in the MV * framework.

Front-end "components" of the word, this layer is typically in the UI referred to as "tagging", that is, the bulk of the traffic interface, split into several small pieces and then assembled.

Narrowly componentization generally it refers tagged, it is a mechanism for custom tag (custom properties) as the core.

The generalized comb assembly includes service data of the logical layers, different levels of package forming ability.

• Normative

  Any components should comply with a set of standards, developers can make different regions of this standard to develop a unified standard components.

• Combination of

  Before assembly it should be combined. We know that the combination shows the front page are some of the HTML DOM, and components on the final form can also be understood as one of HTML fragments. Then form a complete interface display, certainly depends combination between different components, nested, and communication.

• Reusability

  Any component should be is a separate entity, so that it can be applied in different scenarios.

• Maintainability

  Any component should have its own set of complete stable of features, including self-only, independent of the other components of logic, to make it more easy to understand, to make it more easy to understand, while significantly reducing the chance of the bug.

2, custom components

2.1, function components

Stateless functional component showed a form having only a render()component class methods, or by a function in the form of ES6arrows functionforms created, and the assembly is no state condition. The creation of specific forms as follows

import React from 'react';

//定义一个React组件
function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

2.2, class components

React.ComponentIt is a ES6form to create components react in is extremely React currently has recommended way to create a state component in the form changed to React.Componentthe following form

import React from 'react';

//定义一个React组件
class App extends React.Component{
  render(){
    return (
      <div>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

Reference component in other files

import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2.3 distinction, class components and assembly functions

Created out of a constructor component called "stateless components";

With components created out of the class keyword, called "stateful components";

There are essential differences between the state of the component and stateless component is the presence or absence state property .

note:

Use classcomponents keywords created with its own private data (this.state) and life cycle functions;

Use functioncomponents created only props, and not have their own private data life cycle functions;

Function component class components and of course there is a difference, class components and performance than the performance of the function component is higher, because the components used when the class to be instantiated, and the function returns the assembly to take direct execution result to the function. To improve performance, make use of the function components

the difference	Function Component	class components
Is there this	No	Have
Is there life cycle	No	Have
Is there a state state	No	Have