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

This article mainly introduces the knowledge points of React what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have some gains after reading this React knowledge points, let's take a look at it.

The data mount mode of the component, the props props is normally passed in externally, and the internal setting of the component can also be initialized in some ways. The property cannot be changed by the component itself, but you can pass in the new props through the parent component's active re-rendering.

Properties describe the nature and characteristics, and the components themselves cannot be changed at will.

In the previous component code, there is a simple use of props. In general, when using a component, you can put the parameters in the properties of the tag, and all the properties will be used as the key values of the component props object. Components created by the arrow function need to receive props through the parameters of the function:

Import React, {Component, Fragment} from 'react'import ReactDOM from' react-dom'class Title extends Component {

Render () {

Return (

Welcome to the {this.props.name} world

)

}} const Content = (props) = > {

Return (

{props.name} is a library for building UI

)} class App extends Component {

Render () {

Return (

)

}} ReactDOM.render (

Document.getElementById ('root'))

Set the default props for the component

Import React, {Component, Fragment} from 'react'import ReactDOM from' react-dom'class Title extends Component {

/ / use the component created by the class, write the static method directly here, and create defaultProps static defaultProps = {

Name: 'React'

}

Render () {

Return (

Welcome to the {this.props.name} world

)

}} const Content = (props) = > {

Return (

{props.name} is a library for building UI

)} / / for components created using the arrow function, you need to write the defaultProps attribute Content.defaultProps = {directly on this component

Name: 'React.js'} class App extends Component {

Render () {

Return (

{/ * because defaultProps is set, props can work normally without passing it. If it is passed, the value of defaultProps will be overwritten * /}

)

}} ReactDOM.render (

Document.getElementById ('root'))

Props.children

We know that when using components, they can be nested. To use nested structures in custom components, you need to use props.children. In actual work, we need to write components in this way almost every day.

Import React, {Component, Fragment} from 'react'import ReactDOM from' react-dom'class Title extends Component {

Render () {

Return (

Welcome to the {this.props.children} world

)

}} const Content = (props) = > {

Return (

{props.children}

)} class App extends Component {

Render () {

Return (

React

React.js is a library for building UI

)

}} ReactDOM.render (

Document.getElementById ('root'))

Use prop-types to check props

React is actually created to build large applications. In a large application, you have no idea what parameters will be passed when others use the components you write, which may cause the application not to run, but will not report an error. To solve this problem, React provides a mechanism that allows the component writer to set a parameter check for the component's props, which requires the installation and use of prop-types:

$npm I prop-types-S

Status (state)

State is the data in which the component describes a certain display situation, which is set and changed by the component itself, that is, it is maintained by the component itself. The purpose of using the state is to make the display of the component different in different states (self-management).

Define state

The first way

Import React, {Component} from 'react'import ReactDOM from' react-dom'class App extends Component {

State = {

Name: 'React'

IsLiked: false

}

Render () {

Return (

Welcome to {this.state.name} world.

{

This.state.isLiked? '❤️ cancel': 'collection'

}

)

}} ReactDOM.render (

Document.getElementById ('root'))

Another way (recommended)

Import React, {Component} from 'react'import ReactDOM from' react-dom'class App extends Component {

Constructor () {

Super ()

This.state = {

Name: 'React'

IsLiked: false

}

}

Render () {

Return (

Welcome to {this.state.name} world.

{

This.state.isLiked? '❤️ cancel': 'collection'

}

)

}} ReactDOM.render (

Document.getElementById ('root'))

This.props and this.state are pure js objects. In vue, the data property is handled by Object.defineProperty. Changing the data of data will trigger the getter and setter of the data, but there is no such processing in React. If you change it directly, react cannot know, so you need to use a special method to change the state, setState.

SetState

The isLiked is stored in the state object of the instance, and the render function of the component displays "cancel" or "favorite" content according to the isLiked in the component's state. The following adds click-to-click event monitoring to button.

Import React, {Component} from 'react'import ReactDOM from' react-dom'class App extends Component {

Constructor () {

Super ()

This.state = {

Name: 'React'

IsLiked: false

}

}

HandleBtnClick = () = > {

This.setState ({

IsLiked:! this.state.isLiked

})

}

Render () {

Return (

Welcome to {this.state.name} world.

{

This.state.isLiked? '❤️ cancel': 'collection'

}

)

}} ReactDOM.render (

Document.getElementById ('root'))

SetState has two parameters

The first parameter can be either an object or a method return, which we call updater

Parameter is an object

This.setState ({

IsLiked:! this.state.isLiked})

The parameter is the method

This.setState ((prevState, props) = > {

Return {

IsLiked:! prevState.isLiked

}

})

Note that this method takes two parameters, the first is the previous state, and the second is props

SetState is asynchronous, so if you want to get the latest state, there is no way to get it, so you have a second parameter, which is an optional callback function.

This.setState ((prevState, props) = > {

Return {

IsLiked:! prevState.isLiked

}}, () = > {

Console.log ('callback', this.state.isLiked)}) console.log ('setState external', this.state.isLiked)

Property vs status

Similarities:

All are pure js objects, and all will trigger render updates with certainty (same state / attribute, same result)

Differences:

00001. The property is obtained from the parent component, and the state cannot be obtained.

00002. The property can be modified by the parent component, and the state cannot

00003. Attribute performance sets the default value internally, and the status can also be

00004. The property is not modified within the component, and the state needs to be changed

00005. It belongs to the initial value of the performance setting subcomponent, and the state cannot be

00006. Property can modify the value of a child component, but the state cannot

The main function of state is for components to save, control, and modify their own variable state. State is initialized within the component and can be modified by the component itself, while the external cannot be accessed or modified. You can think of state as a local data source that can only be controlled by the component itself. The state in state can be updated through the this.setState method, and setState causes the component to re-render.

The main purpose of props is to allow the parent component that uses the component to pass in parameters to configure the component. It is an external configuration parameter that cannot be controlled or modified within the component. Unless an external component actively passes in a new props, the props of the component remains the same forever.

If you don't understand the usage scenarios of state and props, remember a simple rule: use state as little as possible and use props more.

A component without state is called a stateless component (stateless component), and a component with state set is called a stateful component (stateful component). Because state brings administrative complexity, we write as many stateless components as possible and as few stateful components as possible. This will reduce the difficulty of code maintenance and enhance the reusability of components to some extent.

# # status improvement

If multiple components share a single data, put the data into a common parent component to manage

Controlled and uncontrolled components

Whether the data rendering of the React component is completely controlled by the props passed by the caller, the control is a controlled component, otherwise it is not a controlled component.

Render data

Conditional rendering

{

Condition? '❤️ cancel': 'favorites'}

List rendering

/ / data const people = [{

Id: 1

Name: 'Leo'

Age: 35}, {

Id: 2

Name: 'XiaoMing'

Age: 16}] / / rendering list {

People.map (person = > {

Return (

{person.name}

Age: {person.age}

)

})}

The efficiency of React depends on the so-called Virtual-DOM, try not to touch DOM. There is a problem for list elements: elements may change position in a list. To do this, you just need to swap the DOM position, but React doesn't know we're just changing the location of the element, so it renders the last two elements (and then Virtual-DOM), which greatly increases the DOM operation. But if you add a unique identity to each element, React will know that the two elements have only exchanged positions, the logo is key, and the key must be the unique identity of each element.

DangerouslySetHTML

For the content created by rich text, the data obtained by the backend is as follows:

Content = "

React.js is a library for building UI

"

For security reasons, the contents of all expressions in React are escaped, and if entered directly, the tag is treated as text. At this point, you need to use the dangerouslySetHTML property, which allows us to set innerHTML dynamically

Import React, {Component} from 'react'import ReactDOM from' react-dom'class App extends Component {

Constructor () {

Super ()

This.state = {

Content: "

React.js is a library for building UI

"

}

}

Render () {

Return (

)

}} ReactDOM.render (

Document.getElementById ('root'))

Event handling bind event

Use the on+ event name to bind an event. Note that there is a difference between the original event and the original event. The native event is all lowercase onclick, and the event in React is the hump onClick,React event, not the native event, but the composite event.

How to write event handler

Write inline arrow functions directly in render (not recommended)

Define a method within a component using the arrow function (recommended)

Define a method that is not an arrow function directly in the component, and then use > (not recommended) directly in render.

Define a method that is not an arrow function directly in the component, then bind (this) in constructor (recommended)

Event object

Like a normal browser, the event handler is automatically passed into an event object, which contains basically the same methods and properties as the normal browser event object. The difference is that the event object in React is not provided by the browser, but is built internally. It also has common methods such as event.stopPropagation and event.preventDefault.

Parameter passing of event

Wrap a layer of arrow functions around the place where the method is called in render

It is passed through this.handleEvent.bind (this, parameter) in render.

Pass through event

It is recommended to be a child component, define the method in the parent component, pass it to the child component through props, and then call it through this.props.method in the child component.

# # processing user input

Import React, {Component} from 'react'import ReactDOM from' react-dom'class App extends Component {

Constructor () {

Super ()

This.state = {

Xing:''

Ming:''

}

}

HandleInputChange = (e) = > {

This.setState ({

[e.target.name]: e.target.value

})

}

Render () {

Const {

Xing

Ming

} = this.state

Return (

Last name:

First name:

Welcome: {xing} {ming}

)

}} ReactDOM.render (

Document.getElementById ('root'))

This is the end of the article on "what are the knowledge points of React?" Thank you for your reading! I believe you all have a certain understanding of "what are the knowledge points of React". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.