in the past year, more and more projects continue or begin to use React and Redux development, which is a common front-end project solution in the front-end industry, but as there are more and more development projects, individuals have different feelings and ideas. Is it because we already have a relatively common and familiar technology stack of the project that we have been using it completely? is there a more suitable solution than it? Just as the team recently had a new project, bloggers began to wonder if it was possible to develop using alternative technologies. It can not only improve the development efficiency, but also expand the technology reserves and horizons. After research, we chose Mobx, and finally built a new project using React+Mobx. This article summarizes and shares the more complete process from technology selection to project implementation, hoping to make common progress. Preface when we use React to develop web applications, within React components, we can use this.setState () and this.state to process or access intra-component states, but as the project grows larger and the states become more complex, we usually need to consider the problem of communication between components, which mainly includes the following two points: A state needs to be shared (accessed, updated) among multiple components; interaction within one component needs to trigger status updates for other components; with regard to these issues, React component development practices recommend improving the state of common components: Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common…

functional programming from Immutable.js to Redux basic concepts functional programming (English: functional programming), or functional programming or functional programming, is a programming paradigm. It treats computer operations as functional operations and avoids the use of program states and mutable objects. Among them, λ calculus is the most important foundation of the language. Moreover, the function of the λ calculus can accept the function as the input parameter and the output return value. the above is Wikipedia's definition of functional programming, which can be summed up in simple words as " emphasizes the function-based software development style ". in addition to the abstract definition, JS's functional programming has the following characteristics: function is a first-class citizen embrace Pure function , reject side effects use immutable values functional programming elements The function is a first-class citizen We often hear the saying, "in JS, a function is a first-class citizen". Its specific meaning is that the function has the following characteristics: can be passed to other functions as arguments can be used as the return value of another function can be assigned to a variable functional first-class citizenship is a must for all functional programming languages, while another must-have feature is support for closures (the second point above actually uses closures a lot of times) Pure function have and only display data streams: input: parameter output: return value if a function is pure, it should conform to the following points: there can be no side effects inside the function for the same input (parameter), you must get the same output. this means that…

I. what is redux Redux is a JavaScript container for state management. Redux supports other interface libraries besides being used with React, and its volume is only about 2kb . three cores of Redux single data source the state of the entire application is stored in an object tree, and this object tree exists only in the only store . State is read-only the only way to change state is to trigger & nbsp; action , which is a normal object used to describe events that have occurred. use pure functions to perform modifications to describe how action changes state tree, you need to write & nbsp; reducers . Redux composition State status state, ui state, global state returned by the server action event is essentially a js object needs to include the type attribute describes what is going to happen, but does not describe how to update state reducer is essentially a function response to the action sent The function takes two parameters, the first initializing state and the second sending action must have a return return value Store maintain the state (status) of the application (state, ui state, global state returned by the server) provide getstate method to read state used to associate action with reducer build store through createStore register to listen through subscribe dispatch method to send action

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…

in the previous three articles, we described the composition and life cycle of react components, and the mechanism of setState. This time let's talk about the handling of React events. 1. Native event system We usually monitor the real DOM. For example, 🌰, we want to listen for the click event of the button, so we can bind the event and the corresponding callback function to the button DOM. Unfortunately, if the page is complex and the frequency of event processing is high, it is a test for the performance of the web page. 2.React event system react's event handling, no matter how dazzling it is, will eventually return to the original event system, but its encapsulation is elegant. Let's go straight to the conclusion: React implements the SyntheticEvent layer to handle events What does mean? In detail, React does not correspond events to Dom one by one like native events, but binds all events to the document of the web page, processes and distributes them through a unified event listener, finds the corresponding callback function and executes it. According to the official documentation, the event handler will pass an instance of SyntheticEvent, so let's take a look at SyntheticEvent. 3.SyntheticEvent 1. Event registration as mentioned above, since React handles events uniformly, you must first need to register the event trigger function written by the programmer. So where is this process carried out? Because we are "binding" events to "component DOM", such as a click event: <Component onClick={this.handleClick}/> undefined React has already started event handling through the _ updateDOMProperties method…

in the previous two articles, we analyzed the implementation, mounting, and lifecycle processes of React components. In reading the source code, we often see code such as transaction and UpdateQueue , which involves two concepts in React: transactions and update queues. Because we have covered all of these in the previous article, this article explores the transaction mechanism and update queues based on the all-familiar setState method. 1.setState related in the first article Analysis of React Source Code (1): implementation and mounting of components we already know The component prototype declared by class has the setState method: this method passes in two parameters partialState and callBack , the former is the new state value, and the latter is the callback function. updater is defined in the constructor: you can see that updater is passed in by the constructor, so if you find out where new ReactComponent is executed, you can find out what updater is. Taking the custom component ReactCompositeComponent as an example, we found its trail in the _ constructComponentWithoutOwner method: return new Component(publicProps, publicContext, updateQueue); undefined the corresponding parameter updater is actually updateQueue . Let's look at what enqueueSetState is in this.updater.enqueueSetState : The purpose of the getInternalInstanceReadyForUpdate method is to get the current component object and assign it to the internalInstance variable. Next, determine whether the state update queue for the current component object exists, and if so, add the partialState , that is, the new state value, to the queue; if not, create an update queue for the object, and notice that the queue exists as…

in the previous article "React source code parsing (1): component implementation and mounting , we described the implementation and mounting of React components. Now let's explore the life cycle of components. We already know that the lifecycle of the component will be triggered only after the mount process starts, and a js object of type ReactElement will be generated. By parsing the information contained in the component object, the corresponding HTML information is obtained, inserted into the specified DOM container, and the rendering of the view is finally completed. So how is the life cycle of the component triggered in this process? in fact, the study of the declaration cycle of components is a more in-depth study of the mounting process of components. Lifecycle of components at the end of the previous article, we know that the ReactDOM.render () method internally generates four different types of wrapper components through the factory method, depending on the parameters passed in: ReactEmptyComponent ReactTextComponent ReactDOMComponent ReactCompositeComponent when executing the mount process, the lifecycle is triggered by executing mountComponent methods within each encapsulated component, but it is clear that the lifecycle exists only in the React custom component, that is, ReactCompositeComponent . Because the other three components do not have a lifecycle, let's first analyze the relatively easy three internal components that do not exist lifecycle. 1.ReactEmptyComponent is created by the ReactEmptyComponent.create () method, which finally calls the ReactDOMEmptyComponent method. Take a look at the source code: because the component is empty, almost all parameters are set to null and have nothing to do with…

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…