Components are at the heart of React! Understand components and value transfer functions between components

Component concepts and applications

Components allow you to break up the UI into separate reusable pieces of code and think about each piece individually. Similar in concept to JavaScript functions. It accepts arbitrary inputs (” props “) and returns a React element that describes the page presentation, divided into function components and class components.

To get started, install a VS Code plugin, search react, and choose the most downloaded app.

Function components versus class components

As the name implies, a function component is a component created using a function, and a class component is a component created using a class. After installing the plug-in, you can directly create the corresponding plug-in using the shorthand completion function.

Note that the first letter must be capitalized.

Function component creation

Editor shortcut: RFCE

Import React from 'React' function ComponentFun() {return (<div> <h2>)} export default ComponentFunCopy the code

Declare the function, return JSX in the function, and finally export the function.

Class component creation

Editor shortcut: RCE

import React, {Component} from 'react' export class Component extends Component {render() {return (<div> <h2> </div> ) } } export default ComponentClassCopy the code

Class components need to inherit from Component, so they need to import, or if they don’t, they need to inherit from React.component.render (), in which return returns the corresponding JSX.

Introduction and use of components

Components are also easy to use, introduced in modular syntax and used directly as tags in JSX.

Import ComponentClass from 'React' // Import ComponentFun from 'React' './ComponentFun' function App() {return (<div> {/* use component */} <ComponentClass /> </div>)} export default AppCopy the code

Because JSX must have a root node, when introduced, multiple divs can be nested in the result of rendering, such as the following:

< div id = "root" > < div > < div > < h2 > single file class component < / h2 > < / div > < div > < h2 > single file function component < / h2 > < / div > < / div > < / div >Copy the code

To fix this, React provides a “Fragment” component called Fragment, which allows you to group sublists without adding additional nodes to the DOM:

import React, { Component,Fragment } from 'react' export class ComponentClass extends Component { render() { return ( <Fragment> <h2> Single file class </h2> </Fragment>)}} export Default ComponentClassCopy the code

It’s easy to use, just replace the root div node in JSX, and render the DOM as follows:

< div id = "root" > < div > < h2 > single file class component < / h2 > < h2 > single file function component < / h2 > < / div > < / div >Copy the code

conclusion

Both Class and function components are composed of logical code and JSX. Components are also the basic unit of React. An application is composed of multiple components nested and stacked.

Value pass between components Props

Parent component passing to child component – Normal passing

The parent component passes data

By default, the parent component passes data to the child component. We write the data that needs to be passed to the component in the form of properties, as follows:

Import PropsClass from 'React' // Introduce single-file components import PropsClass from './PropsClass' import PropsFun from './PropsFun' // Data to pass Const toData = [{id:1,name:" liu Nen ",age:66}, {id:2,name:" liu Nen ",age:16}] function App() {return (<div> {/* To pass data as an attribute, Write the component */} <PropsClass toClass={toData} /> <PropsFun toFun={toData} /> </div>)} export default AppCopy the code

This completes the task of passing data from parent to child components. So components are divided into function components and class components. Next, we show how class components and function components get the data passed in.

Let’s look at how the class component is acquired:

Class child components receive data

The class component uses the this.props. Xx attribute name to get data passed by the parent component:

import React, { Component, Fragment} from 'react' export class PropsClass extends Component {render() {return (<Fragment> <h1> accept Props data </h1> {console.log(this.props. ToClass)} {/* Printouts data */ /} {this.props. ToClass. Map (item => (<div key={item.id}> <span>{item.name}</span><span>{item.age}</span> </div> ) )} </Fragment> ) } } export default PropsClassCopy the code

In class components this is relatively easy, so React by default places the parent component’s incoming data in the props property. In class components, as shown in the code, we can use this.

Function subcomponents receive data

In the function component, the Props data is passed to the function by default, so you need to obtain it from the function parameter.

import React, Function PropsFun(Props) {return (<Fragment> <h1> function accept Props </h1> {the console. The log (props. ToFun)} {/ * * traversal data /} {props. ToFun. The map (item = > (< div key = {item. Id} > < span > {item. The name} < / span > < / div >) )} </Fragment> ) } export default PropsFunCopy the code

Previously, we learned how the parent component passes data to different child components and how the child components receive and process the data. However, when the parent component passes more complex data, we need to learn more about how to pass the data and how to use it in the child components.

Parent component passes value to child component – Deconstructs the value

The parent component passes data

Passing ordinary data, as we’ve already seen, what if the data being passed is an array or an object?

The most direct way to do this is to deconstruct the data in the parent component first, because the deconstructed data is exactly the same as the “properties” of the component:

Import PropsClass from 'React' // Introduce single-file components import PropsClass from './PropsClass' import PropsFun from './PropsFun' // Data to pass Const toData = [{id:1,name:" liu Nen ",age:66}, {id: 2, name: "wide kun", the age: 16}] function App () {return (< div > {/ * structure data and the incoming * /} < PropsClass {... toData[0]} /> <PropsFun {... toData[1]} /> </div> ) } export default AppCopy the code

The above is the deconstruction of the parameters, and in the child component application, and the ordinary application is no different, according to the deconstruction of the corresponding format can be received, below we respectively show the class component and function component to obtain the deconstruction of the parameters.

Class child components receive data

Still use props to get the pass parameter.

import React, { Component, Fragment} from 'react' export class PropsClass extends Component {render() {const {name,age} = This. Props return (<Fragment> <h1>Class to accept props Data </h1> {console.log(name,age,'--')} {/* Print data */} </Fragment>)}} export default PropsClassCopy the code

Function subcomponents receive data

Function parameters are still used to get the data.

Import React, {Fragment} from 'React' // function function_props () function PropsFun({name, function) Age}) {return (<Fragment> <h1> function Props </h1> fun  {console.log(age, name)} <div> <span>{name}</span> <span>{age}</span> </div> </Fragment> ) } export default PropsFunCopy the code

Setting defaults

Under certain conditions, even without the parent component incoming data, children still need to display the related content, so at this point, we can set the default values to fill in the child components, when the parent component no incoming data, child components using the default data, and if the parent component has the incoming data, replace the default values.

The parent component may or may not pass in data:

Import PropsClass from 'React './PropsClass' import PropsFun from './PropsFun' function App() {return (<div> {/* If the parent component does not pass a value, use the default value of the child component. Replace */} <PropsClass names=" LLLL "/> <PropsFun /> </div>)} export default AppCopy the code

Class component sets default values

The class subcomponent uses the static defaultProps as the default value. Of course, we still need to get this. Props.

Import React, {Component, Fragment} from 'React' export class PropsClass extends Component {// Static defaultProps = {names:' props ', age:18} render() {// Get the data passed by the component, which may be the default, Const {names,age} = this. Props return (<Fragment> <h2> <p>{names}</p> <p>{age}</p> </Fragment>)  } } export default PropsClassCopy the code

Function components set default values

The function component needs to use the component name. DefaultProps sets an object as the default, still using the parameter:

Import React, {Fragment} from 'React' // function function_props () function PropsFun({name, function) Age}) {return (<div> <h2> function component </h2> <p>{name}</p> <p>{age}</p> </div>)} // Function component needs to use the component name Propsfun. defaultProps = {name:' props ', age:16} export default PropsFunCopy the code

You can also get props directly if you don’t want to deconstruct the parameters of the child component when they are received

import React, Function PropsFun(Props) {return (<div> <h2> function component </h2> <p>{props. Name}</p> <p>{props. Age}</p> </div>)} // Function components need to use the component name. Name :' west Ridge ', age:16} export default PropsFunCopy the code

Pass JSX to child components

The parent component passes JSX

In the parent component, you need to pass the JSX to the child component, and you need to write the JSX inside the component’s double tag

Import PropsClass from 'React './PropsClass' import PropsFun from './PropsFun' function App() {return (<div> <h1> I am App</h1> {/* Need to pass JSX, written inside the component double tag */} <PropsClass> {/* Can pass multiple tags */} <p> JSX, p tags passed in the parent component, App-class component </p> < SPAN > JSX, SPAN tag, app-class component </span> </PropsClass> <PropsFun /> </div>)} export default AppCopy the code

The class child component receives JSX

Use this.props. Children to receive all JSX passed in from the parent component

import React, { Component, Fragment} from 'react' export class PropsClass extends Component {render() {return (<Fragment> <h2> class Component </h2> {/* */} {this.props. Children} </Fragment>)}} export default PropsClassCopy the code

Function subcomponent receives JSX

Function component to get the JSX, you can use props directly to receive the parameters

import React, Function PropsFun(props) {return (<div> <h2> function component </h2> <p>{props. Name}</p> <p>{props. Age}</p> {props Propsfun. defaultProps = {name:' props ', age:16} export default PropsFunCopy the code

conclusion

Components are at the heart of React, and the data maintained in components determines how the UI renders. The formula UI = render(data/state) describes the relationship between components. Therefore, data is very important in React. The content of this article, we have a simple understanding of the data transfer between components and the way of use, data transfer between components and a professional term called ‘data flow’, this content is very much, I will write later!