Why should we use React-Redux Redux itself is a separate state library, and it can be used in any UI framework, such as React , Angular , Vue , Ember , and vanilla JS , although Redux is usually used with React, they are actually independent of each other. if we are using Redux in any UI framework, we usually need a UI binding library to bind Redux to the UI framework we use, rather than manipulating the store state directly from our UI code. React-Redux is actually the official Redux UI binding library. So, when we are in React and Redux, we also need to use React-Redux to bind the two libraries together. While it is possible to write Redux store subscription logic by hand, doing so would become very repetitive. In addition, optimizing UI performance would require complicated logic. although you can manually write the logic of Redux's status subscription, doing so is a repetitive task. In addition, optimizing the performance of UI requires complex logic. The process of subscription status, checking for data updates, and triggering re-render can become more generic and reusable. UI binding libraries such as React Redux can handle the logic of state interaction, so we don't need to write the relevant code ourselves. Why is my component not re-rendered, or why is my mapStateToProps not running? accidentally changing or modifying the state directly is the most common reason why components do not re-render after a scheduled operation. Redux wants our reducers to be "immune" to update its status, which in effect means always…

when we are proficient in using React for front-end development, we will inevitably have a strong interest in the internal mechanism of React. What are the components? Is it the real DOM? What is the basis for the execution of lifecycle functions? in this article, let's first study the implementation and mounting of React components. 1. What is the component first write the simplest component: after the above code is written, we get the & lt;A / & gt; component, so let's figure out what & lt;A / & gt; is. Print it out with console.log : you can see that & lt;A / & gt; is actually a js object rather than a real DOM. Notice that props is an empty object at this time. Next, let's print & lt;A> , which is component A & lt;/div> , and see what the console outputs: We see that props has changed. Because div and div are nested in the & lt;A / & gt; component, the children attribute is added to the props describing the & lt;A / & gt; object, whose value is the js object describing div . By the same token, if we do multi-level component nesting, we are actually adding children fields and corresponding description values to the props of the parent object, that is, the multi-level nesting of js objects. the above description is based on the React development model of ES6. In fact, the components created by the React.createClass ({}) method in ES5 are exactly the same as those in ES6, and can also…

on March 17, one year after the launch of the Beta version of the new React document, React finally officially released the new React official document! The new document enables a new domain name: react.dev/ . However, at present, the new document has only been released in English at present When accessing Beta documents ( beta.reactjs.org/ ) and English documents ( reactjs.org/ ) Will be redirected to the new domain name ( react.dev/ ). The new document does not currently provide access to documents in other languages. to access the old Chinese version of the document, you can visit zh-hans.reactjs.org/ . to access the old English version, you can visit legacy.reactjs.org/ . the new document mainly contains the following sections: tutorials and guides : a large number of tutorials and guides are available to help developers learn React from scratch or delve into specific topics. Code samples and demos : provides a series of code examples and demos that demonstrate the power and flexibility of React. Best practices and techniques : learn the latest React best practices and techniques and learn how to optimize your code for better performance. Community Forum : contact other React developers to get help on the project or share expertise in the community. News and updates : get the latest versions, updates, and news from the React development team for the first time. Let's take a look at the features of the new React document! full hug Hooks when Hooks was released in 2018, the Hooks document assumed that the reader was already familiar with…