recently I saw some useful React tool libraries, summed up and shared them with you to avoid duplicating wheels. I hope it will be helpful to you ~ I. basic 1. React Infinite Scroller React Infinite Scroller is used to load content indefinitely in a React project. npm address: www.npmjs.com/package/rea... 2. react-dnd React DnD is a set of React high-level components created by React and Dan Abramov, the core author of Redux, that can help build complex drag-and-drop interfaces while keeping components separate. It is mainly used for drag and drop of components. npm address: www.npmjs.com/package/rea... 3. react-beautiful-dnd react-beautiful-dnd is a beautiful and easy-to-use React list drag-and-drop library. ​ npm address: www.npmjs.com/package/rea... 4. react-icons using react-icons, you can easily include popular icons in React projects. ​ npm address: www.npmjs.com/package/rea... 5. react-share react-share is a React social media sharing button and sharing library. ​ npm address: www.npmjs.com/package/rea... 6. create-react-app Create React App is a command line interface tool that allows you to quickly create and run React applications without any configuration. ​ npm address: www.npmjs.com/package/cre... 7. react-intl React Intl provides a React component and Mixin for internationalizing React Web applications. It provides a description of formatted date, number, and string messages. ​ npm address: www.npmjs.com/package/rea... 8. react-router react-router is a routing solution routing solution for React.js. It can easily synchronize your app and URL while providing first-class support for nesting, transformation, and server rendering. ​ npm address: www.npmjs.com/package/rea... 9. React Virtualized react-virtualized is a responsive component that renders large list and table data efficiently and can be used to solve long…

Preface Dropdown drop-down menu import import Dropdown from '@/components/Dropdown/Dropdown' The use of subcomponents is as follows: const MenuItem = Dropdown.MenuItem; const SubMenu = Dropdown.SubMenu; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. onClickMenu Type: func default value: no description: click to trigger the callback function to change the classname of the sub-component. Input parameters: {string} trigger drop-down trigger mode 3. title Type: string default value: no description: drop-down button prompts for title MenuItem child content components import import Dropdown from '@/components/Dropdown/Dropdown'; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. className Type: string (required) default: click | hover description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover' 3. disabled Type: bool default value: false Note: the sub-content of the drop-down is grayed out, true is grayed out, false is normal 4. onClickMenuItem Type: func (required) default value: no description: click on a single sub-content to perform the action. Input parameters: {string | number} value | some item selected by key parent of SubMenu child content import import Dropdown from '@/components/Dropdown/Dropdown'; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. className Type: string (required) default: click | hover description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover' 4. title Type: string default value: no description: drop-down button prompts for title Let's implement dropdown.js import React from 'react';…

controlled and uncontrolled components React the concept of controlled and uncontrolled components is relative to the form. In React , the form element usually holds the internal state , so it works differently from other HTML elements. The different implementation of state within the form element results in controlled and uncontrolled components. controlled components in the HTML form elements, they usually maintain a set of state and update UI as the user inputs. This behavior is not controlled by our program. If we establish a dependency between the state attribute and the value of the form element in React , then update the state attribute through the onChange event and setState () . You can control what happens to the form during user input. React form input elements that control values in this way are called controlled components. & nbsp; if a input input box is defined in React , it does not have the same bi-directional binding function as v-model in Vue , that is to say, we do not have an instruction to combine the data with the input box, and the user enters the content in the input box, and then the data is updated synchronously. class Input extends React.Component {   render () {     return <input name="username" />   } } when users enter content in the input box on the interface, it maintains a state . This state is not the this.state that we usually see, but the abstract state on each form element, so that we can update the UI according to…

difference between memo and useMemo react Let's start with the conclusion: React.memo () is a high-level component that we can use to wrap components that we don't want to re-render unless the props in it changes useMemo () is a React Hook that we can use to wrap functions in the component. We can use it to ensure that the value in this function is recalculated only when one of its dependencies changes React.memo () & nbsp Is a high-level component (HOC) , which takes a component An as a parameter and returns a component B if the props (or the value in it) of component B has not changed Component B prevents component A from re-rendering. The difference is that useMemo is a hook, and its idea is similar to that of memo, while the second parameter of useMemo is an array, which is used to determine whether to update the callback function .

how to optimize the performance of web pages? For front-end performance optimization, here are five tips for improving website loading speed: compress and merge files: compress HTML, CSS, JavaScript, and then merge them to reduce HTTP requests. Latency loading: loads content only when needed. lazy loading: images and other media are loaded only when the user scrolls the page. use caching: use browser caching to reduce resource loading time. compressed images: use compressed image formats, such as JPEG, to reduce file size and speed up loading. 1. Compress and merge files you can use tools and plug-ins (such as Gulp, Grunt, Webpack, and so on) to automatically compress and merge files. HTML compression: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML compression exampl</title> </head> <body> <h1>This is the title.</h1> <p>This is a passage.</p> </body> </html> CSS compression: body { background-color: #f8f8f8; font-family: Arial, sans-serif; font-size: 16px; } h1 { color: #333; font-size: 28px; } p { color: #666; font-size: 18px; } JavaScript compression: (function() { var message = "Hello World!"; console.log(message); }()); 2. Delayed loading delayed loading can be achieved using JavaScript. <img data-src="image.jpg" alt="Picture"> <script> // wait for the page to be fully loaded before executing the script window.onload = function() { // get all picture tags var images = document.querySelectorAll('img[data-src]'); // traversing the picture tag Array.prototype.forEach.call(images, function(image) { // modify src image.setAttribute('src', image.getAttribute('data-src')); }); }; </script> 3. Lazy load lazy loading can be implemented using JavaScript and plug-ins. Here we use the jQuery plug-in to implement lazy loading. <img data-src="image.jpg" alt="Picture"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> <script> $(function() { $("img").lazyload({…

Why did the React team discard defaultProps ? in functional components come to a conclusion first, because it is not necessary. in functional components, we can declare default properties in the form of JS default parameters, as follows: function Foo({foo = 1, bar = "hello"}) { let props = {foo, bar}; //... } The advantage of this is that React 's defaultProps is a black box for most teams. if we put the behavior of the default property in the function component definition, it is more controllable from the point of view of code quality. so what was defaultProps designed for? React the team thinks defaultProps is very useful in classes. because props objects are passed to many different methods: life cycle, callback, and so on. Each function has its own context that requires an initial default value. This makes it difficult to implement using the JS default parameter, because you have to copy the same default value in each function. The following is an example: class Foo { static defaultProps = {foo: 1}; componentDidMount() { let foo = this.props.foo; console.log(foo); } componentDidUpdate() { let foo = this.props.foo; console.log(foo); } componentWillUnmount() { let foo = this.props.foo; console.log(foo); } handleClick = () => { let foo = this.props.foo; console.log(foo); } render() { let foo = this.props.foo; console.log(foo); return <div onClick={this.handleClick} />; } } to sum up, the role of defaultProps is that in class components, new default values can be used in each lifecycle and scope of methods. therefore, it has been implemented in subsequent updates of the React team: using…

Preface recently started a new project, want to do a good job of code specifications and constraints, in fact, there are a lot of scaffolding, project templates can be used directly, but do-it-yourself, can be completely self-matching. install eslint install and execute yarn add-- dev eslint add .eslintrc.js to the project directory module.exports = { root: true, // specify root as true,eslint to check only the current project directory env: { // provide default global variables to prevent eslint from checking for errors, such as window browser: true, node: true, es6: true, }, extends: [ // inherit the inspection rules recommended by eslint 'eslint:recommended', ], parserOptions: { ecmaVersion: 'latest', // specify the ECMAScript syntax as up-to-date sourceType: 'module', // specify the code as ECMAScript module ecmaFeatures: { jsx: true, // enable jsx }, }, }; add .eslintignore to the project directory, ignoring some directories and files that do not require eslint detection .eslintrc.js node_modules dist .DS_Store *.local install typescript-eslint since the project uses Typescript , you need to change the eslint interpreter. Refer to typescript-eslint . install and execute yarn add-- dev @ typescript-eslint/parser @ typescript-eslint/eslint-plugin change .eslintrc.js module.exports = { root: true, // specify root as true,eslint to check only the current project directory env: { // provide default global variables to prevent eslint from checking for errors, such as window browser: true, node: true, es6: true, }, extends: [ // share the recommended configuration style 'eslint:recommended', 'plugin:@typescript-eslint/recommended', ], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], parserOptions: { ecmaVersion: 'latest', // specify the ECMAScript syntax as up-to-date sourceType: 'module', // specify the…

recently, t3dotgg, a foreign netizen, suggested that React officially use Create React App to create a new project instead of in the document . It is recommended to use Vite to create a new project . Most netizens agree with this: React's new official document is about to be released (99% is now complete). However, Create React App is still recommended in the Beta version of the official document to create a new project. Two additional alternatives are provided: Vite , Parcel . looking at Create React App's Github repository, we can see that it has not been updated for 5 months, accumulating 1500 + issues . on January 31, Dan Abramov, a core member of the React team, responded to this suggestion, explaining the tradeoffs made by React team members and providing some options. Let's take a look at the details (you can skip to the final conclusion)! Evolution of Create React App when Create React App was released in 2016, the environment of the tool was decentralized. If you want to add React to an existing application, you need to add a & lt;script> tag or import from npm, and then adjust the existing build tool configuration. However, if you want to create a new application built only using React from scratch, there is no clear way to do this. before Create React App, you must install a bunch of tools and connect them together, provide correct presets to use JSX, make different configurations for development and production environments, provide correct settings for resource caching, configure linter, etc.,…