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

This article mainly shows you "what are the three attributes of React", the content is simple and clear, hoping to help you solve your doubts, let the editor lead you to study and learn "what are the three attributes of React" this article.

React three attributes props

Components are closed, and receiving external data should be implemented through props.

The function component receives data through the parameter props, props is an object, and the class component receives data through this.props.

Passing data: adding attributes to component tags

Function component const Hello = (props) = > {console.log (props); return (props: {props.name})} ReactDOM.render (, document.getElementById ('root')) class component class App extends React.Component {render () {console.log (this.props) Return (props: {this.props.name})}} ReactDOM.render (, document.getElementById ('root'))

The super function must be called in the constructor of the inherited class, and super represents the constructor of the parent class. ES6 requires that the constructor of a subclass must execute the super function once, otherwise an error will be reported. But the this in the super function points to an instance of the current class.

Whether the constructor accepts the props and passes it to the super depends on whether you want to access the props through this in the constructor.

When the props parameter is received in the constructor, super does not pass props, and this.props is undefined. Of course, you can use props normally (without this in front of it)

When the constructor receives the props parameter, the super also passes the props, and you can get the object through the this.props.

Reason: class components inherit React.Component, and the source code of Component is:

Function Component (props, context, updater) {this.props = props; / / bind props this.context = context; / / bind context this.refs = emptyObject; / / bind ref this.updater = updater | | ReactNoopUpdateQueue; / / the updater object to which the above belongs}

When we call super in a class component, we are actually executing the constructor of the parent class. If we do not pass props into the super function, then in the constructor of the subclass, this.props is undefined.

Why you can still access this.props in render and other methods. Because React will assign props to the instance object you just created after the constructor is called.

State stateful and stateless components

Function components, also known as stateless components, do not have their own state and are only responsible for the static display of data.

Class components, also known as stateful components, have their own state and are responsible for updating the UI and getting the page moving.

State is data, private data within a component, and can only be used within a component.

Each component has a state, whose value is an object type; the initialization of the component state property is placed in the constructor.

Class App extends React.Component {constructor () {super (); / initialize state this.state = {count: 0}} render () {return (counter: {this.state.count})}} ReactDOM.render (, document.getElementById ('root'))

The state is mutable: this.setState ({data to be modified})

Be careful not to modify the data in state directly through this.state.x = y, this is the wrong way of writing.

The role of etState:

1. Modify state

two。 Update UI

SetState

Where to execute setState ()?

In the callback function controlled by react: (asynchronous)

Lifecycle hook, react event listening callback (composite event)

In the non-react controlled asynchronous callback function: (synchronous)

Timer callback, native event listening callback, promise callback

Is setState asynchronous or synchronous?

The "async" of setState does not mean that it is internally implemented by asynchronous code, but the process and code executed by itself are synchronous. It's just that in the setState function implementation of React, it is determined whether to update the this.state directly or put it in the queue later based on the isBatchingUpdates (default is false) variable. Then there is a batchedUpdate function that can change isBatchingUpdates to true, and the batchedUpdate function will be called before React calls the event handler, or before the lifecycle function, so that setState will not update the this.state synchronously, but put it in the update queue for subsequent updates.

In this way, you can understand why native events and calling this.state in setTimeout/setinterval are updated synchronously, because the React called through these functions cannot call the batchedUpdate function to set isBatchingUpdates to true, so setState defaults to false at this time, and updates will be synchronized.

Differences between props and state properties

Props is the external interface of the component, and state is the internal interface of the component.

Main differences:

State is mutable and is a set of states that reflect changes in the UI of a component.

Props is read-only to components that use it, and Props can only be modified through the parent component of that component.

Refs

Refs is an elastic file system, and you can get React elements or DOM elements in React.

When we write React code, we usually don't use Refs, because we don't directly manipulate the underlying DOM element, but write our page structure in the render function, and React organizes the update of the DOM element. There are always exceptions, and there are always weird times when we need to directly manipulate the real DOM of the page, which requires us to have direct access to the real DOM, and Refs provides us with this ability.

React.createRef

After calling React.createRef, you can return a container that stores the nodes identified by ref. The container is for personal use:

Class App extends React.Component {inputRef = React.createRef (); showData = () = > {let input = this.inputRef.current; console.log (input.value)} render () {return (prompt)}} ref binding class Person extends React.Component {constructor () {super (); this.handleClick = this.handleClick.bind (this) } handleClick () {/ / use native DOM API to get focus this.refs.myInput.focus ();} render () {return ();}} ReactDOM.render (, document.getElementById ('root'))

When the ref attribute is used for the HTML element, the ref created using React.createRef () or React.useRef () receives the underlying DOM element as its current attribute.

When the ref property is used for a class component, the ref object receives the mounted instance of the component as its current property.

You can't use the ref property on function components because they don't have instances. Function components can use useRef (), which returns objects that remain unchanged throughout the component's life cycle.

These are all the contents of this article entitled "what are the three attributes of React?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.