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

Most people do not understand the knowledge points of this article "how to use refetch in react", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use refetch in react" article.

Use react-refetch to simplify the code for api to get data

Const List = ({data: gists}) = > {return ({gists.map (gist = > ({gist.description})})} const withData = url = > Part = > {return class extends Component {state = {data: []} componentDidMount () {fetch (url) .then (response = > response.json? Response.json (): response) .then (data = > this.setState ({data}))} render () {return} const ListWithGists = withData ('https://api.github.com/users/gaearon/gists')(List)

In the above code, we extract the logic of fetching data from api with high-level components, and then we use react-refetch to simplify the asynchronous code above.

Import {connect as refetchConnect} from 'react-refetch'const List = ({gists}) = > {if (gists.pending) {return loading... } else if (gists.rejected) {return {gists.reason}} else if (gists.fulfilled) {return (gists.fulfilled & & {gists.value.map (gist = > ({gist.description}))}} const ListWithGists = refetchConnect (() = > ({gists: `https://api.github.com/users/gaearon/gists`}))(List))

It is much more refreshing in an instant. By the way, using the properties provided by react-refetch, the loading logic has also been added.

Separate the responsibilities of lists and projects

Obviously, the List component is a component of a rendering list, and its responsibility is to render the list, but we also deal with the logic of a single Item here, and we can separate its responsibilities. List only does list dyeing, and Gist only renders itself.

Const Gist = ({description}) = > ({description}) const List = ({gists}) = > {if (gists.pending) {return loading... } else if (gists.rejected) {return {gists.reason}} else if (gists.fulfilled) {return (gists.fulfilled & & {gists.value.map (gist = >)})}}

Use react-refetch to add functionality to Gist

React-refetch 's connect method takes a function as an argument, and this function returns an object. If the value of the resulting object is a string, a request is made for the string after getting the prop, but if the value is a function, it is not executed immediately, but is passed to the component for later use.

The value is a string

Const connectWithStar = refetchConnect (() = > ({gists: `https://api.github.com/users/gaearon/gists`})))

The value is a function

Const connectWithStar = refetchConnect (({id}) = > ({star: () > ({starResponse: {url: `https://api.github.com/gists/${id}/star?${token}`, method: 'PUT'})})) const Gist = ({description, star}) = > ({description} + 1)

When processing the Gist component, the star function is passed to the prop of Gist, and then it can be used in Gist

ConnectWithStar (Gist) above is about the content of this article on "how to use refetch in react". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.