React rendering problem

Virtual DOM is the two core apis that put DOM comparison operations in the VIRTUAL DOM of the JS layer: The function h is used to generate the virtual DOM, which generates a JS object of a DOM node, and the path function, which calls the render function. There is only one render function per component, and react. render is essentially the path function in the VDOM. The path function takes two arguments. The implementation of path(container,vnode) and Path (vnode,newVnode) is also an implementation of the Diff algorithm, which creates and updates nodes on the page by calling the createElement and updateChildren methods. CreateElement is passed into the ReactElement method to generate the virtual Dom. Finally, it is returned to reactdom.render to generate the real Dom. React implements a Virtual DOM. There is a mapping between the component's real DOM structure and the Virtual DOM. React implements a diff algorithm on the Virtual DOM. React then updates the changes to the actual DOM on the browser, so instead of rendering the entire DOM tree, the Virtual DOM is a JS data structure, so it's much faster than the native DOM. So the render function does a lot of things: compare and then return to the actual DOM treehttps://blog.csdn.net/qq_36407875/article/details/84965311

Copy the code

React Scaffold file

Icon Website page icon index. HTML Home page logo2. PNG logo mainifest. Json Configuration file of the application shell robots. TXT Crawler protocol file SRC Source file app.css App.js App component app.test.js Used to test app components index. CSS index.js Entry file Logo.svg Logo reportWebVitals.js Page performance analysis files (web-vitals library support) Setuptests.js component unit test files require support from the Jest-DOM libraryCopy the code

3. React Lifecycle

React-dom.js is a react core library that provides the react extension to manipulate dom. Babel.min. js parses JSX syntax code into JS code.1.The initialization phase is triggered by reactdom.render () - the first renderconstructor
componentwillmount
render
componentdidmountThe update phase is internal to the componentthis.setStateOr parent component rerenderThe triggershouldComponentUpdate
componentWillUpdate
render
componentDidUpdateUninstall components byreactdom.unmountComponentAtNode()
componentWillUnmount
reactNew phases of the life cycle: 1. Initialization phase: Byreactdom.renderTrigger -- First renderconstructor
getDrivedStateFromProps
render
componentDidMount2. The update phase is internal to the componentthis.setStateOr parent component rerenderThe triggergetDerivedStateFromProps
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate
componentDidUpdate3. Uninstall componentsreactdom.unmountComponentAtNode()
componentWillUnmount() Important hooks:renderCalled when a render is initialized or updatedcomponentDidMountEnable listening and sendajaxrequestcomponentWillUnmount: Do some finishing touches like cleaning timersgetDerviedStateFromProps
getSnapshotBeforeUpdate

Copy the code

5.axios

The relevant API1.Get request axios. Get ('user? ID=12345')
   .then(function(response){
      console.log(response.data);
   })
   .catch(function(error){
      console.log(error);
   });
 axios.get('/user', {params: {ID:12345
    }
   })
   .then(function(response){
    console.log(response.data)
   })
   .catch(function(error){
     console.log(error);
   });
   2.Post request axios. Post ('/user', {firstName:'Fred'.lastName:'Flintstone'
   })
   .then(function(response){
    console.log(response)
   })
   .catch(function(error){
     console.log(error)
   });
Copy the code

6. Message subscription-publish mechanism

  • Tool library: PubSubJS
import PubSub from 'pubsub-js'The introduction of PubSub. Subscribe ('delete'function(data){}); Subscribe to the Pubsub. The publish ('delete',data) release informationCopy the code

7.fetch

  • Native function that no longer uses the XMLHttprequest object to submit Ajax requests
  • Older browsers do not support possible
Fetch fetch(URL). Then (function(response){
  return response.json()
  }).then(function(data){
    console.log(data)
  }).catch(function(e){
    console.log(e)
  });
  2.Post requests the fetch (url, {method:'POST'.body:JSON.stringify(data),
   }).then(function(data){
    console.log(data)
   }).catch(function(e){
    console.log(e)
   })
Copy the code

7. The react routing

  1. Understanding of SPA
  • One-page Web application SPA
  • The entire page has only one complete page
  • Clicking on a link in a page will not refresh the page, only make partial page updates
  • The data needs to be retrieved via Ajax requests and presented asynchronously on the front end
  1. An understanding of routing
What is routing:1.A route is a mapping2.Key is the path, and value may befunctionorcomponentRoute classification: 1. Back-end routesvalueisfunctionIs used to process the request registration route submitted by the client:router.get(path,function(req,res)) Work process: WhennodeWhen a request is received, the matching route is found according to the request path, the function in the route is called to process the request, and the response data 2 is returned. Front-end routing Browser-side routing,valueiscomponentIs used to display page contents.Router path= '/test' component={Test}> Work process: when the browserpathA /testThe current routing component becomesTestComponent so we're going to use a libraryreact-router-domPlug-in library, specifically to implement onespaApplications - Related in this libraryapiBuilt-in components are: <BrowserRouter> <HashRouter> <Route> <Redirect> <Link> <NavLink> <Switch> andhistoryObject,matchObject,withRouterfunctionCopy the code

8.redux

  • Redux is a js library dedicated to state management, but not the React plugin library
  • React Angular Vue can be used in projects like React Angular Vue, but it basically works with React
  • Function: Centrally manages the state shared by multiple components in the React application
  1. When should YOU use Redux
  • The state of a component needs to be readily available to other components (when shared)
  • One component needs to change the state of another component (communication)
  • General principle: don’t use it if you can, and only consider using it if you don’t have to work hard
The three core concepts of Redux1.Action The action object contains two properties: type identifies the property, the value is a string, unique, necessary property data Data property, the value type is arbitrary, optional property {type:'ADD_STUDENT'.data: {name:'tom'.age:18}}
  2.Reducer is used to initialize the state and produce a pure function of the new state according to the old state and action during the process3.Store How to get this object that is linked together by the state Action Reducer:import {createStore} from 'redux'
     import reducer from './reducers'
     constStore =createStore(Reducer) What this object does: GetState () gets the state dispatch(action) and sends the action. The reducer call is triggered, and a new state Subscribe (listener) is generated to register and listen. When a new state is generated, the reducer call is automatically called.4.The core API createstore() of REdux creates store objects that contain a reducer. Store objects are the core managed objects of the Redux library, which internally maintains the state ReducerCopy the code

I still have a little bit left to add to the redux of higher order functions and pure functions and so on