Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what is the role of useState in react", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the role of useState in react" can help you solve your doubts.

UseState

UseState adds some internal state to the component by calling it in the function component. React retains this state when it renders repeatedly. UseState

Returns a pair of values: the current state and a function that allows you to update it, which you can call in the event handler or somewhere else. It is similar to the class component

This.setState, but it does not merge the new state with the old state.

Let's take a look at how to use useState with an example.

There is a need to load external web pages in iframe.

In the initial code, we implement this requirement through functional components, simply rendering an iframe:

Import React, {useState} from 'react';import styles from'. / index.less';function Link (props) {const {match: {params: {link ='} = {}} = props; const enCodeUrl = decodeURIComponent (link); const url = enCodeUrl.startsWith ('http')? EnCodeUrl: `http://${enCodeUrl}`; return ();} export default Link

A new requirement is coming, and we need to add a loading effect to the page, which is achieved simply by listening to the load event of iframe to set the start and end of the loading.

To achieve this requirement, we need to store the state of loading, and functional components do not have their own state, so we have to transform them into class components:

Import React from 'react';import {Spin} from' antd';import styles from'. / index.less';export default class Link extends React.Component {state = {/ / store loading status iLoading: true,}; linkLoad () {/ / update loading this.setState ({iLoading: false});} render () {const {match: {params: {link ='} = {}} = {}} = this.props Const {iLoading} = this.state; const enCodeUrl = decodeURIComponent (link); const url = enCodeUrl.startsWith ('http')? EnCodeUrl: `http://${enCodeUrl}`; return ();}}

In order to achieve a page of loading, we need to use class, but also need bind binding this and other tedious behavior, this is only a simple requirement, but we can solve these problems through hooks, but also solve the problem of state reuse between components, we use useState to achieve.

Import useStateimport React, {useState} from 'react'; defines the parameters of state / / useState as the initial state value, and setInitLoading is the method const [initLoading, setInitLoading] = useState (true) to change the state value; the complete code for updating the status onLoad= {() = > setInitLoading (false)} is as follows: import React, {useState} from' react';import {Spin} from 'hzero-ui';import styles from'. / index.less' Function Link (props) {const {match: {params: {link ='} = {}} = {}} = props; const [initLoading, setInitLoading] = useState (true); const enCodeUrl = decodeURIComponent (link); const url = enCodeUrl.startsWith ('http')? EnCodeUrl: `http://${enCodeUrl}`; return (setInitLoading (false)} title= {link} src= {url} style= {{width: '100% style=, verticalAlign:' top'}} frameBorder= "0" / >);} export default Link

Let's take a look at the useState considerations.

Parameters of useState

The parameters of useState can be either a basic type or an object type. When updating the object type, remember to merge the old state, otherwise the old state will be lost

Const [params, setParams] = useState ({rotate: 0, color: "# 000000"}); const handleInputChange = event = > {const target = event.target; setParams ({... params, [target.name]: target.value});}; state dependency

If the current state needs to be calculated based on the value of the state that was last updated, a function is passed to the function that updates the state, and the first parameter of this function is the value of the last update. Then the calculated result is returned as a return value.

After reading this, the article "what is the role of useState in react" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, 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.