Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

React: Second way to create components

Understand the use of the class keyword in ES6

Create components based on the class keyword

  • Use the class keyword to create the component
// A class created using class is a component template after inheriting react.component.ponent via the extents keyword. // If you want to reference this component, you can import the class name as a label into JSX for use. Class Person extends React.Component{ Render (){// Render (){return <div> <h1> </h1> </div>; }} // If you want to use props, you need to define props. // If you want to use props, you need to define props. No need to pre-receive props // Note: Class Hello extends React.Component {constructor(){// When using an extension of extends, functions are read-only. To constructor the first line, be sure to display a call to super() // spuer representing the superclass's constructor, super(props); // After adding props to super(), you can use this. Props // In constructor, if you want to access the props attribute, you should not use this. To use console.log(this.props. Name); } render() { console.log(this); // this.props.name = 'ergou'; return <div> sdfsdf{this.props.name} </div> } }Copy the code

The private property state in the component

In a component, we can define state to implement a private property that is inaccessible to any component except the one that owns and sets it. State is similar to props, but State is private and fully controlled by the current component.

Constructor (){this.state = {comment:' this is a private attribute '}}Copy the code

Note: 1. Do not modify State directly

// Wrong this.state.comment = 'Hello'; Instead, use setState(): // Correct this.setState({comment: 'Hello'}); <button onClick={this.changestate}> </button> changestate=()=>{this.setState({MSG: 'MSG'}); } 2. <input type="text" value={this.state.msg} onChange={this.iptchange}/> iptchange=(event)=>{ event.persist(); console.log(event.target.value); this.setState({ msg: event.target.value }); }Copy the code

Because this.props and this. State may update asynchronously, you should not rely on their values to update the next State. So the setState method also supports passing a function as an argument, and must return an object inside the function. Function supports two parameters. The first parameter is props (old state data before data modification) and the second parameter is props, the data passed to the component

iptchange=()=>{ this.setState(function(ostate,props){ console.log(ostate); return { info:'is changed' } }); } or: this.setstate (function(ostate,props){// console.log(ostate); Return {MSG: 'MSG'}},function(){console.log(this.state); // Use the modified data. });Copy the code

3. One-way data flow. A component can choose to pass its state as props down to its child components. This is often called “top-down” or “one-way” data flow. Any state is always owned by a particular component, and any data or UI derived from that state can only affect components “below” them in the tree. If you think of a tree of components as a waterfall of props, then the state of each component is like adding additional water to the waterfall at any point, but it can only flow down.

A comparison of two ways to create components

Function (props) {function (props) {function (props) {function (props) {function (props) {function (props) {function (props) {function (props); // The class keyword is used to create a component that can read and write its own data. This. / Based on the differences above, we can define the two ways to create components:

A component created using function is called a stateless component.

A component created using class is called a stateful component. The difference between a stateful component and a stateless component is whether there is a state attribute.

Components created by class have their own life cycle functions, while components created by function do not have their own life cycle functions.

The question is: when to use stateful components and when to use stateless components? //1. If a component needs to store its own private data, or needs to execute different business logic in different phases of the component, stateful components created by class are very suitable; 1/2. If a component only needs to render a fixed structure of the page according to the props passed from the outside, then it is suitable to use stateless components created by function. The small benefit of using stateless components is that they run relatively fast because the component lifecycle is removed