1 useUpdate how do I force a component to refresh in a react function component? Although react does not provide a native method, we know that when the state value changes, the react function component will be refreshed, so useUpdate takes advantage of this. The source code is as follows: import { useCallback, useState } from 'react'; const useUpdate = () => { const [, setState] = useState({}); return useCallback(() => setState({}), []); }; export default useUpdate; you can see the return value function of useUpdate, which calls setState with a new object each time, triggering the update of the component. 2 useMount although the react function component does not have the life cycle of mount, we still have this requirement, that is, the requirement of executing once after the component is rendered for the first time can be encapsulated by useEffect. If you only need to set the dependency to an empty array, then you can only perform a callback after the rendering is completed: import { useEffect } from 'react'; const useMount = (fn: () => void) => { useEffect(() => { fn?.(); }, []); }; export default useMount; 3 useLatest react function component is an interruptible, repeatable function, so every time there is a change in state or props, the function will be re-executed. We know that the scope of the function is fixed when the function is created. If the internal function is not updated, then the external variables obtained by these functions will not change. For example: import React, { useState, useEffect } from 'react';…
Preface in the react project, we usually use the axios library, which is a promise-based http library, to interact with the background to obtain data. It can be run on the browser side and in node.js. It has many excellent features, such as intercepting requests and responses, canceling requests, converting json, client defense XSRF, and so on. install / / install using npm Npm install axios / / install using yarn Yarn add axios Undefined introduce in the project root, create a new request folder, and then create a new index.js and an api.js file in it. The index.js file is used to encapsulate our axios,api.js to uniformly manage our interface. / / introduce axios into index.js import axios from 'axios'; / / introduce qs module to serialize data of type post import QS from 'qs'; / / message prompt component of antd, which can be changed according to your own ui component. import { message } from 'antd' switching of environment our project environment may have a development environment, a test environment and a production environment. We match our default interface url prefix through the environment variable of node. Here you need the global variable process of node, and process.env.NODE_ENV to distinguish between a development environment and a production environment. / / Save environment variables const isPrd = process.env.NODE_ENV == 'production'; / / distinguish the basic URL of development environment or production environment export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com' the basic URL is exported here to prevent resources from being used differently in other places, and…
introduction to Axios Axios is a promise-based HTTP library that can be used in browsers and node.js. Features supports node side and browser side supports advanced configurations such as interceptors use Promise to manage asynchrony, bid farewell to traditional callback mode automatically convert JSON data client supports defense of XSRF install yarn installation $ yarn add axios npm installation npm install axios -D 3.bower installation $ bower install axios easy to use aixos can be loaded directly through cdn, for example: <html> <head> <title>The use of Axios</title> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> </head> <body> <input type="button" onclick="getList()" value="Click get"/> <div id="content"> </div> <script type="text/javascript"> function getList(){ axios.request({ url:'/article/home/index', method:'get', baseURL:'http://test.mediastack.cn/' }).then( res => { console.log("get res:",res); var str=JSON.stringify(res); document.getElementById("content").innerHTML = str; },error => { console.log("get request failed:",error); document.getElementById("content").innerHTML = error; } ); } </script> </body> </html> axios is encapsulated in react Axios can be encapsulated into a file in react. Through control operations, unified handling of errors, logic, and validation can be achieved, reducing the redundancy and readability of the code. request encapsulation / * * * Network request configuration , / import axios from "axios"; axios.defaults.timeout = 100000; axios.defaults.baseURL = "http://test.mediastack.cn/"; / * * * http request interceptor , / axios.interceptors.request.use( (config) => { config.data = JSON.stringify(config.data); config.headers = { "Content-Type": "application/json", }; return config; }, (error) => { return Promise.reject(error); } ); / * * * http response interceptor , / axios.interceptors.response.use( (response) => { if (response.data.errCode === 2) { console.log("out of date"); } return response; }, (error) => { console.log("request error:", error); } ); / * * * encapsulate the…
