Why Umi?

It mainly has the following functions: expandable, out of the box, enterprise-class, a large number of self-research, complete routing, for the future.

  • Why not create-react-app?

Create-react-app is a webpack-based packaging layer solution, including build, dev, Lint, etc. It takes the packaging experience to the extreme, but it does not include routing, is not a framework, and does not support configuration. So, if you want to modify part of the configuration based on it, or want to do technical convergence outside of the packaging layer, you run into difficulties.

Code warehouseGithub

React core content review and custom component development

/ SRC /pages/class

One, attention or skills

  • File directories cannot be named by keywords
  • Vscode plugin project-tpl; Quickly generate page modules
  • Vscode plugin JavaScript and TypeScript Nightly

The React component lifecycle

component-old.js component-new.js pure-component.js

React Component Communication (props and State)

Directory: pages/class/lists

  • Parent component passes values to child components (parent component binds props to child components)
  • Child components pass values to parent components (parent components provide methods for child components to call)
  • Passing values between sibling components (using the parent as an intermediate item)

Consider: This approach is not appropriate when sibling hierarchies are too deeply nested. dva

Prop-types Functions: Checks and limits the data types in props

Import PropTypes from 'prop-types' // reference // Basic usage to check data type ComponentsName. PropTypes = {parameter variable: PropTypes. MyComponents.PropTypes = {name: proptypes.string}Copy the code

Dva data processing and data mock

Dva is a data flow solution based on Redux and Redux-Saga. In order to simplify the development experience, DVA also has additional built-in React-Router and FETCH, so it can also be understood as a lightweight application framework.

Demo DVA involves directories

dva: {}, SRC /pages/class/dva // page logic/SRC /models/search.js // data/SRC /services/search.js // request /mock/search.js / / the mock dataCopy the code

Example flow: Asynchronous invocation: Type aaa in dva/search.js, press Enter, call the models/search.js asynchronous method getListsAsync, The asynchronous method then calls the getLists method in services/search to initiate a mock request and receives the data returned by /mock/search.js Mock. The models/search.js method getLists is called and the data is re-rendered to the page. Synchronous call: in dva/search.js, it is also possible to synchronously call getLists thinking: How to develop when closing mock? Then the proxy real test environment server at.umirc.ts closes the mock to add proxy configuration

Mock: false, proxy: {'/ API ': {target: 'http://127.0.0.2:7002/', changeOrigin: true,},},Copy the code

React Context API to implement data flow management

Context is designed to share data that is “global” to a component tree, such as the currently authenticated user, topic, or preferred language. Context is mainly used when many components at different levels need to access the same data. Use caution because this makes components less reusable. Component composition is sometimes a better solution than context if you just want to avoid passing properties through layers. Common scenarios for using a context include managing the current locale, theme, or some cached data.

Demo Context involves directories

/ SRC /pages/class/context // page logic/SRC /models/search.js // SRC /services/search.js /mock/search.jsCopy the code

To understand:

  • React. CreateContext: Creates a container (component) for context. DefaultValue can set the default data to be shared
const {Provider, Consumer} = React.createContext(defaultValue);
Copy the code
  • Provider: Same as his name. A place to produce shared data. What are they producing? So it depends on what value defines. Value: places shared data.
<Provider value={/* share data */}> /Copy the code
  • Consumer: This can be interpreted as a Consumer. It is specialized in consuming data generated by providers (Provider mentioned above). The Consumer needs to be nested under the producer. To retrieve the shared data source through a callback. Of course, it can also be used alone, so that only the defaultValue mentioned above can be consumed
<Consumer> {value => /* Render content according to context */} </Consumer>Copy the code

【 Lazy load components Based on Lazy and Suspense Implementation 】

  • Enable load on Demand: This configuration is for page level load on demand
dynamicImport: {},
Copy the code
  • Lazy loading at the component level

Implementation based on lazy and suspense; Example directory/SRC /pages/class/lazy-load

  • Further encapsulation

Wrapper component directory components/use the LazyLoad: in/SRC/pages/class/context/index lists under the js component implementation lazy loading

  • To understand:

Suspense lets your components “wait” before rendering and show fallback content while waiting.

Vii. Development of ErrorBoundary components 【 components implemented based on React ErrorBoundary technology 】

Common problem: introduce non-existent variables in render, resulting in a blank screen

  • Core API: getDerivedStateFromError

The ErrorBoundary component can only detect errors in child components, not in itself. Example: pages/class/context

This is not universal, when the click event internal function, asynchronous function internal function error is not detected.

Create a custom popover component based on createPortal

Example directory/SRC /pages/class/modal => /components/ modal => / Components /CreatePortal

The core reactdom.createPortals (Child, container) method takes two parameters, the first parameter being the component instance to mount and the second parameter being the DOM node to mount to. In general, the first argument might pass this.props. Children, which needs to be mounted

Use the REF API to manipulate dom and components

Refs provides a way to access DOM nodes or React elements created in the Render method.

In a typical React data flow, the props is the only way for the parent component to interact with its children. To modify a child component, you need to re-render it using new props. However, in some cases, you need to force changes to subcomponents outside of the typical data flow. The child component being modified may be an instance of the React component or a DOM element. React offers solutions in both cases.

Core: createRef and forwardRef

Ref forwading is a technique for automatically passing a reference Ref from a component to a child component.

When to use Ref? Here are a few situations where refs are appropriate:

  • Manage focus, text selection or media playback. (Example/SRC /pages/class/refs)
  • Trigger the forced animation.
  • Integrate third-party DOM libraries.

React-hooks: React-hooks: New in 16.8

/ SRC /pages/function

React Hook API – New component development mode

/ SRC /pages/function/hook

  • UseState method

  • UseEffect method

The first parameter: function second parameter: no second parameter page changes will refresh; []: execute only once at render time; [count]: useEffect is re-executed when the count value changes

You can write more than one without affecting each other

  • UseEffect and useLayoutEffect?

UseEffect: performs asynchronous operations. UseLayoutEffect: operates on a DOM object or changes the display effect. This function has the same signature as useEffect, but it calls Effect synchronously after all DOM changes. You can use it to read DOM layouts and trigger rerenders synchronously. The update schedule inside useLayoutEffect is refreshed synchronously before the browser performs the drawing

  • useMeno

You can use useMemo as a means of performance optimization, but not as a semantic guarantee.

  • useCallback

For performance optimization, pass an inline callback function and an array of dependencies to useCallback as arguments. It returns an Memoized version of the callback function that is updated only when a dependency changes. This is useful when you pass callback data to child components that are optimized and use reference equality to avoid unnecessary rendering (such as shouldComponentUpdate).

UseCallback (fn, deps) is equivalent to useMemo(() => FN, deps).

UseContext and useReducer implement data flow management

  • useContext

Receives a context object (the return value of React. CreateContext) and returns the current value of the context. The current context value is determined by the < MyContext.provider > value prop of the upper-layer component closest to the current component.

When the most recent <MyContext.Provider> update is made to the component’s upper layer, the Hook triggers a rerender and uses the latest context value passed to MyContext Provider. Even if the ancestor uses React. Memo or shouldComponentUpdate, it will be rerendered when the component itself uses useContext.

Remember that the argument to useContext must be the context object itself: Correct: useContext(MyContext) Error: useContext(mycontext.consumer) Error: UseContext (myContext.provider) components that call useContext are always rerendered when the context value changes. If rerendering components is expensive, you can optimize them by using Memoization.

  • useReducer

An alternative to useState. It receives a Reducer of the form (state, action) => newState and returns the current state and its accompanying dispatch method. (If you’re familiar with Redux, you already know how it works.)

UseReducer can be more useful than useState in some situations, such as when the state logic is complex and contains multiple subvalues, or when the next state depends on the previous state. Also, using useReducer can optimize performance for components that trigger deep updates because you can pass dispatches to child components instead of callbacks.

useTitleHook

  • directory

pages/function/customize src/hooks/useTitleHook

  • Core: Use useLayoutEffect

UseHttpHook [Wrapper custom hook with monitoring function based on FETCH API]

  • directory

pages/function/customize src/hooks/useHttpHook

React Context: Use think-react-store

think-react-store

  • directory

pages/function/store

  • The installation
yarn add think-react-store
Copy the code
  • Use the middleware think-react-store/middlewares/log to print logs
import log from 'think-react-store/middlewares/log'; <StoreProvider store={store} middleware={[log]}> <User /> </StoreProvider>Copy the code
  • Have a problem

useDispatchHook(‘user’); An error is reported

The Fiber architecture

Fiber is the new coordination engine in React 16. Its main purpose is to enable incremental rendering of the Virtual DOM. The React scheduling algorithm Fiber architecture divides the entire rendering phase into scheduling phase and commit phase

  • What problems does the Fiber architecture solve

React 15 causes frames to drop when a page has many elements and needs to be refreshed frequently. The root cause is that a large number of synchronous computing tasks block UI rendering in the browser. By default, JAVASCRIPT operations, page layout, and page drawing are all run in the main thread of the browser, and they are mutually exclusive. If JS operations continue to occupy the main thread, the page will not be updated in a timely manner. When we call setState to update the page, React will iterate over all the application nodes, calculate the differences, and then update the UI. The whole process is uninterrupted and cannot be interrupted. If the page has a lot of elements, the whole process can take longer than 16 milliseconds, making it easy to drop frames.

To solve this problem, the React team optimized the web page operation mechanism from the framework level, and achieved good results.

  • The realization of the Fiber

The inner workings of the React framework can be divided into three layers:

The Virtual DOM layer describes what the page looks like. The Reconciler layer is responsible for calling component lifecycle methods, performing Diff operations, and more. Renderer layers, which render pages for different platforms, are common ones such as ReactDOM and ReactNative. The biggest changes are to the Reconciler layer, which the React team has also given a new name, Fiber Reconciler. This brings us to another key word: Fiber.

Take a look at how React works under stack-Reconciler. React creates (or updates) elements in the code, creates (or updates) the Virtual DOM based on those elements, and then modifies the real DOM based on the difference between the Virtual DOM before and after the update. Note that under the Stack Reconciler, UPDATES to the DOM are synchronous, which means that during the Virtual DOM comparison process, when an Instance is found to be updated, the DOM operation is immediately executed.

With the Fiber Reconciler, operations can be broken up into many small pieces and can be interrupted, so synchronizing the DOM may result in the fiber-Tree being out of sync with the actual DOM. For each node, it not only stores the basic information of the corresponding element, but also stores some information for task scheduling. Thus, fiber is just an object representing the smallest unit of work that can be split in the Reconciliation phase, corresponding to the React Instance in the figure above. Manage Instance’s own features through the stateNode attribute. The next unit of work of the current unit of work is represented by child and Sibling, and return indicates the target to be merged when the result is returned after the processing is complete, usually pointing to the parent node. The entire structure is a linked list tree. After each unit of work (fiber) completes, it checks to see if it still has the main thread time slice, if it continues to the next one, if it does not, it first processes other high-priority transactions, and continues to execute when the main thread is idle.

Fiber is a data structure that can be represented as a pure JS object:

Const fiber = {stateNode: {}, const fiber = {stateNode: {}, const fiber = {stateNode: {}, const fiber = {stateNode: {}, Return: {}, // represents the target to be merged after the result is returned, usually pointing to the parent node}Copy the code

SetState => put in the update queue => use requestAnimationFrame to handle high priority tasks (e.g. User clicks, mouse clicks, etc.)/Use requestldleCallback to handle low-priority tasks (find the root node, Or forward to FiberNode) => find the root node and convert it to FiberNode => process the next FiberNode(depth-first traversal) => Browser idle

=> No => Task paused => Continue when idle => process the next FiberNode => Generate a complete Diff effectList => Apply the Diff DOM, Update view => Yes => Process the next FiberNode => generate a complete Diff effectList => apply the Diff DOM and update the view

  • The sample

The current page contains a list that renders a button and a set of items that contain a div containing numbers. You can square all the numbers in the list by clicking on the button. There is also a button that you can click to adjust the font size.

Once the page is rendered, it initializes into a fiber-tree, similar to initializing a Virtual DOM tree.

React also maintains a workInProgressTree that computes updates and completes the reconciliation process.

When the user clicks the square button and calls setState with the squared list of each element, React will place the current update in the list’s update queue. React, however, does not immediately compare and modify the DOM. Instead, scheduler processes it. Scheduler processes the update based on the current main thread usage. To implement this feature, the requestIdelCallbackAPI is used. React adds Pollyfill to browsers that don’t support this API.

Generally speaking, client threads perform tasks in the form of frames, and most devices are controlled at 30-60 frames without affecting the user experience; The main thread usually has a short Idle Period between execution frames. RequestIdleCallback can call IdleCallback during this Idle Period to perform some tasks

1. Low-priority tasks are handled by requestIdleCallback; High priority tasks such as animation-related tasks handled by requestAnimationFrame 3. RequestIdleCallback can call the idle period callback in multiple idle periods to execute tasks; 4. The requestIdleCallback method provides the deadline, that is, the task execution limit time, in order to split the task, avoid long execution, blocking UI rendering and resulting in frame drop;

The entire process, in simple terms, is to get the available timeslice through requestIdleCallback, then check the node’s Update queue to see if it needs to be updated, check whether the timeslice is used up after each node is processed, and process the next node based on the information it holds for the next unit of work.

  • The influence of Fiber on Hook

  • The impact of the Fiber architecture on the component lifecycle

Scheduling stage (as far as possible do not use the scheduling phase method is not recommended, such as request interface operations) componentWillMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate

ComponentDidMound componentDidUpdate componentWillUnmount

  • The document reference

React Fiber