Tag:old and new

  • Diff algorithm

    Time:2021-2-3

    Diff Diff compares vnode At the same time, DOM rarely moves across levels, so the comparison is only carried out in the same level The diff algorithms of Vue and react are basically the same VNode The vnode of Vue is as follows { El: div // a reference to a real node, in this […]

  • Implementation of purecomponent in react

    Time:2021-1-7

    ComponentandPureComponentThe biggest difference is thatPureComponentadoptshouldComponentUpdate()To comparepropandstateTo determine whether to update the component. Of course, the comparison here is shallow(shallowEqual)Here is an implementationPureComponentCode: import React, { Component } from ‘react’ export default class PureComponent extends Component { shouldComponentUpdate(nextProps, nextState) { return ( !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState) ) } } function shallowEqual(obj1, obj2) { if (obj1 […]

  • Toyreact project summary

    Time:2020-11-22

    Webpack configuration optimization: { minimize: false}: each file will be placed in theevalBysourceURLThe way to open it in the browser becomes a separate file eval(‘console.log(“1″);\n\n//# sourceURL=webpack:///./main.js?’); @babel/preset-envPut the higher versionesThe grammar is translated into a lower versionesgrammar @babel/plugin-transform-react-jsxstayjsYou can usejsxgrammar let a = <MyComponent name=”a” />; //Translated into var a = createElement(MyComponent, { name: “a”, […]

  • Autorun and observe functions of mobx response to new values

    Time:2020-10-27

    Autorun response function, commonly used for printing log, persisting or updating UI code var numbers = observable([1,2,3]);var disposer = autorun(() => console.log(sum.get())); //Output ‘6’ numbers.push(4); //Output ’10’ disposer(); numbers.push(5); //No more values are output. Observe can listen to the new and old values newvalue and oldvalue import {observable, observe} from ‘mobx’; const person = observable({ […]

  • Vue virtual DOM diff

    Time:2020-6-28

    Virtual element node vnode What is a virtual element node?The virtual element node is the description of the real DOM node. Contains label name, label attribute description object, and child node collection. // example { tag:’div’ props:{ Key: ‘UUID’, // vnode unique key, useful when new and old vnode diff ID: ‘div’, // vnode ID […]

  • React-redux summary

    Time:2020-5-10

    React-redux summary 1.Provider function Provider({store, context, children}){ //Contextvalue initialization const contextValue = useMemo(()=>{ const subscription = new Subscription(store); subscription.onStateChange = subscription.notifyNestedSubs; //Custom subscription model for subcomponent subscription return { store, subscription } }, [store]) const previosState = useMemo(()=> store.getState(),[store]); useEffect(()=>{ const { subscription } = contextValue; //The root node subscribes to the original store, and […]