Shulou(Shulou.com)06/01 Report--

This article introduces the case analysis of React and Redux development, the content is very detailed, interested friends can refer to, hope to be helpful to you.

I. Technical introduction

1.React is a declarative, efficient, flexible JavaScript library that creates a user interface.

Declarative: you can change the user interface simply by using React to describe what the component looks like

Efficient: virtual DOM benefiting from React and its Diff algorithm

Flexibility: means that React can be used as a view layer with other technology stacks

2.Universal rendering: a set of code that can render on both the server side and the client side

3.Redux is an JavaScript state container that provides predictable state management based on three basic principles:

Single data source: the state of the entire application is stored in an object tree, and this object tree exists only in a unique store

State read-only: it doesn't mean that we can't change state, it means that we can't directly override the assignment to state.

Use pure functions to perform modifications: updating state's reducer is just pure functions that receive the previous state and action and return the new state

Benefits of 4.Redux: predictable, easy to organize and manage code, support for Universal rendering, excellent scalability, easy testing, development tools, communities and ecosystems

Run React in Node.js

1.Require Hook is a built-in tool for Babel to compile and run Node.js programs in a test environment

Run React in the browser

1. A React component can render either in Node.js or in a browser

two。 The rendering component to the DOM node uses the render () function of react-dom

3. Currently, browsers cannot run Javascript scripts written in ES2015 and JSX syntax directly. They need to be packaged and compiled using Webpack and babel-loader.

IV. Development server and hot replacement

1.react-hmre mainly includes two functions: hot replacing React templates and catching errors.

2.webpackDevMiddleware: merge the Webpack packaging function with the resource service function of the Express server. Express is packaged through middleware and read into memory.

3.webpackHotMiddleware: hot replacement

Fifth, the innovative grammar of React: JSX

1.class and for need to be written as className and htmlFor in JSX

2.JavaScript expressions must be wrapped in {} in JSX, and must have a return value. You cannot use if else statements directly. To use if else statements, you can put them in functions.

The attribute value of 3.style cannot be a string but must be an object. The attribute name in the object uses the hump naming method, for example, font-size is fontSize.

4. Comments are written in {}

5. Arrays automatically expand all members, but if each item in an array or iterator is a HTML tag or component, they must have a unique key attribute

6.React can render HTML tags or React components, HTML tags are signed with lowercase letters, while the first letter of the React component's tag name needs to be capitalized

VI. Data carriers of React: state, props and context

1.State: it should be called internal state or local state. It can initialize internal state in constructor, update internal state through this.setState method, and obtain internal state using this.state. Some user interaction functions can be realized when these internal states cooperate with React event system.

2.Props: meaning of attribute, you can use props to pass data to the React component, and the React component takes the data from the props and returns to the view

3.context is very similar to global variables. In most scenarios, we should try our best to avoid using props. Suitable scenarios include passing login letters, current language and topic information. If you only pass data from some functional modules, it will be clearer and easier to understand.

7. Two objects of React: ReactElement and component instance

1.ReactElement is an immutable ordinary object, which describes an instance of a component or a DOM node. It only contains information about the type of the component (such as H2 or APP), attributes and child elements. It is not an instance of the component and cannot call any method of the React component in ReactElement.

two。 For a component, props is the input and ReactElement is the output

3.Refs is a special property, which can be a callback function or a string

4. Birth and death of component instance:

ComponentWillMount is called before and after rendering

ComponentDidMount is called after each rendering

ComponentWillReceiveProps is called when the component receives a new prop and is not called the first time it is rendered

ShouldComponentUpdat returns a Boolean value. Called when the component receives a new props or state

ComponentWillUpdate is called when the component receives a new props or state but does not have a render, and will not be called during initialization

ComponentDidUpdate is called immediately after the component has been updated and will not be called during initialization.

ComponentWillUnmount is called as soon as the component is removed from the DOM

The this in the 5.React component lifecycle function points to the component instance. The this of the custom component method varies with the "caller". In order to obtain the component instance in the component's custom method, you need to manually bind the this to the component instance.

Get to know Redux for the first time

1.Reducer is a pure function of the form (state,action) = > state that describes how action transforms state into the next state

two。 Pure function (Pure Function): input / output data streams are all explicit (Explicit). It explicitly means that there is only one channel for the function to exchange data with the outside world-parameters and return values; all input information received by the function from outside the function is passed inside the function through parameters; all information output from the function to the outside of the function is passed outside the function through the return value

3. The pure function cannot access the external variables, the "outsiders" it can contact only come from the external parameters, and the pure functions cannot modify the parameters, because doing so may bring some information to the outside world through the input parameters.

4.Action is a JavaScript object, which is the only source of store data

5.Reducer is a pure function. Don't do these things in reducer: modify incoming parameters, perform operations with side effects, and call impure functions.

9. Action creation function and Redux Thunk middleware

1.Redux Thunk middleware allows the action creation function to return a function instead of an action object.

The 2.Action creation function is the function that creates the action. If you want to initiate the action creation function, you just need to pass the result back to dispatch ()

Connection between React and Redux: manual connection

1. Manual connection has two obvious disadvantages: it is impossible to pass state and methods directly to the components inside; any change in state will lead to the re-rendering of the entire component tree without optimizing performance.

2.react-redux not only binds state and methods to any component in the component tree, but also optimizes performance to avoid unnecessary re-rendering

11. Connection between React and Redux: connect using react-redux

1. Use react-redux

The function of 2.Provider is to pass store to subcomponents through context

3.connect is a nested function. After running, a high-order component (Higher-order Components) is generated. If you accept a component as a parameter and run it again, a new component will be generated.

4. In most cases, we should connect the Redux to the top level of the component, so that the components inside don't feel the presence of Redux.

12. Implement undo / redo

1. High-order function is a concept in functional programming. It can take other functions as arguments and then return a new function. High-order functions and high-order components are designed to enhance the function of a function or component. In general, the generated new function or component will not lose its original function

2.Redux is not inefficient, it brings us clear state management and a very good development experience.

XIII. Testing

1. Test tools:

Mocha: you only need to write and run tests in the global functions provided by Mocha (such as describe, it) to generate exquisite test reports

Enzyme: a JavaScript test tool designed specifically for React to render components and manipulate DOM code in components

Expect: assertion library, which provides commonly used assertion functions

14. The global state of Redux and the internal state of React components

The global state of 1.Redux is the internal state of the state,React component obtained through store.getState () is the state obtained through this.state (this here refers to the component instance)

two。 Ideally, all the data of the program should be placed in the global state of Redux

3. If some states are only temporarily used within a component, you can also use the internal state of the component

Array processing in React and Redux

1. It's all JS grammar.

The 2.reduce () method receives a function as an accumulator (accumulator), and each value in the array (from left to right) starts merging and ends up as a value.

The 3.filter () method tests all elements using the specified function and creates a new array of all elements that pass the test

The 4.map () method returns a new array of values returned after each element in the original array calls a specified method.

The 5.every () method is used to test whether all elements in the array have passed the test of the specified function.

The 6.some () method is used to test whether at least one element in the array passed the test of the specified function.

7. The expansion operator allows an expression to expand somewhere. Common scenarios include function parameters, array elements, and deconstruction assignments.

The big stage of Redux: async

1.JS is an event-driven programming language. If a piece of code is registered for a particular event, it will be executed when the event is triggered. It is the event-driven feature that allows JS to execute asynchronous code without blocking the execution of subsequent programs.

2.Promise is an excellent solution for handling asynchrony. It can not only help us get out of callback hell through chained operations, but also catch exceptions at any time during chained operations.

3.Redux can only implement synchronous operations, but it can be implemented asynchronously through Thunk middleware

XVII. Custom Redux middleware

1. Custom Redux middleware only needs to write a three-tier nested function

two。 An asynchronous request usually requires three action to be written, which are initiated when the request starts, when the request succeeds, and when the request fails

Eighteen. Universal rendering

1. Preloading data refers to rendering the page after the server has prepared the data, so that the browser receives the page that carries the data. If you request data on the client, there is often a "splash screen" problem.

two。 In order to be consistent with the pages spit out by the server, the client needs to share components and state with the server

XIX. Universal rendering artifact: Webpack isomorphism tool

1. In essence, Universal rendering is a technology that simulates each other between the server and the client.

The 2.Webpack isomorphism tool works by changing the require () method of Node.js to have the same functionality as the client

Implementation of multi-page: routing

1. Routing is essentially just a component of a multi-valued graph.

two。 Configure route matching information to tell the route how to run and display the appropriate components according to URL

The function of the 3.Link component is similar to the tag, but it supports some properties that can be used to activate the state.

4. To implement server-side routing, you only need to add a function that matches the route to the Express middleware and render it in its callback

21. Asynchronous operations under multiple pages

1.redux-amrc encapsulates repetitive asynchronous operations in Redux. Just pass the Promise and key values to redux-amrc, and it will complete all subsequent asynchronous operations.

two。 Initiates the redux-amrc custom action creation function in the onEnter of the routing component, which can realize data preloading

3. Initiating the redux-amrc customized action creation function in the function triggered by the user operation, which can load the data manually.

4. If you want to manipulate the data in redux-amrc, you should combine the reducer that processes action into an object, and then pass the object into reducerCreator as a parameter

22, use Bootstrap

1.bootstrap-loader is a Webpack loader used to load Bootstrap. It uses Sass to handle CSS styles and supports Bootstrap 3 / 4.

2.PostCSS is a tool that uses JS plug-ins to transform styles, and Autoprefixer is one of the most popular PostCSS plug-ins

3.React-Bootstrap is an available front-end component library that allows you to get the look and feel of Bootstrap through more concise React components.

23. Build large-scale projects

1. In the development environment, the development server is usually used to provide resource services for programs to achieve hot replacement of code.

two。 In a production environment, you should first compile a Node.js program using Babel, and then run it using node

3. In a production environment, you do not need to use a development server to provide resources, but package them directly to a static resource directory, and then introduce an entry file into the page

This is the end of the case analysis on the development of React and Redux. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.