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

Today, I would like to share with you the relevant knowledge of what the three core attributes of React are. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

1. State attribute

React treats components as a state machine (State Machines). Achieve different states by interacting with the user, and then render the UI to keep the user interface and data consistent.

In React, simply update the state of the component, and then re-render the user interface according to the new state (do not manipulate DOM).

Import React from 'react'; import ReactDom from 'react-dom'; class Student extends React.Component {constructor () {super (); this.state= {name:' flower less north'}} render () {this.state.name=' old tomato'; return {this.state.name} ReactDOM.render (, document.getElementById ('root'))

In React, a component needs to access this.state to read the current state, and state can be modified, but it is not feasible to update data to assign values directly to this.state, and setState () must be used.

This.setState () {name:' some fantasy'}

(1) setState does not immediately change the value of state in the React component.

(2) setState triggers a redrawing by triggering an update of the component.

(3) the effects of multiple setState function calls will be merged.

2. Props attribute

The one-way data stream value in react refers to props. According to this feature, it also has a function: communication between components. Props itself is immutable, but there is a situation where it seems to be changeable, that is, it takes the state of the parent component as the props of the child component. When the state of the parent component changes, so does the props of the child component. In fact, it still follows this law: props is immutable.

Characteristics of props attribute

1. Each component object will have a props (short for properties) property

two。 All attributes of the component tag are stored in props

3. Read an attribute value internally: this.props.propertyName

4. Purpose: passing data from outside to inside the component through tag attributes (read-only read only)

5. Type restrictions and necessity restrictions on attribute values in props

Class components:

Import React from 'react'; import ReactDom from 'react-dom';// function component function Student (props) {return

{props.name} {props.address}

} const Stu= {name:' some fantasy', address:' Qingdao'} ReactDOM.render (, document.getElementById ('root'))

Function components:

Import React from 'react'; import ReactDom from 'react-dom';class Student extends React.Component {render () {return (

{this.props.name} {this.props.address}

)} const Stu= {name:'', address:' Qingdao'} ReactDOM.render (, document.getElementById ('root'))

The difference between props property and state property

All the data in props is transmitted by the outside world.

The data in state is private to the component; (the data obtained through Ajax is usually private data)

The data in props is read-only and cannot be reassigned.

The data in state is all readable and writable.

Subcomponents can only pass data through props

3. Refs attribute

Definition: tags within components can define ref attribute classes to identify themselves, similar to id in JS

React documents repeatedly emphasize that please do not overuse refs, so when we can use dom native objects to solve the problem, try not to use refs according to the previous writing, the first is to give the writing of refs in class components and function components

Three forms of ref

(1) string form

[officially not recommended]

Class App extends React.Component {changeInput = () = > {const {input} = this.refs} render () {return ()}} (2) function callback form class App extends React.Component {changeInput = () = > {console.log (this.inputRef) } render () {return ({this.inputRef = el}} / >)}} (3) createRef create ref container

[the one most recommended by officials at present]

Class App extends React.Component {inputRef = React.createRef () changeInput = () = > {console.log (this.inputRef.current);} render () {return ()}

The writing of function components

Function App () {const inputRef = useRef ("") return ()} above is all the content of the article "what are the three core attributes of React?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.