preface

Due to work reasons, it is necessary to customize the Taro function to achieve some custom functions. So Taro principle and a little understanding of the source code.

But based on my experience interviewing in 2021, people didn’t care about the principles of an Taro type framework.

However, Taro framework, after I sorted out the source code, it is found in the domestic open source works, should be a better handful.

For work reasons, our application only involves H5 / applets dual-end compatibility. In this context, I will talk about Taro.

Why do I think Taro is such a handful?

  1. The grinding time is longer, and the community has a certain response speed.
  2. Perfect startup project mode and contribute mode, convenient community participation.
  3. Complete unit test coverage. (Very rare, very conscientious)
  4. The open Ecology, Taro Native was not even developed by the Bump team after 3.X. When this paper is second edited, it is still actively connected to hongmeng ecology.
  5. Good development mentality, timely learn from the community’s new excellent implementation, feedback to the community.

But maybe I still feel a little bit bad about it.

  1. There is no killer component library to match.
  2. Community roadmap does not provide for more participants in bug fixes rather than feature contributions.
  3. The materials market is more or less in name only.

There is no comprehensive and detailed analysis of this article, and source-code reading notes are not intended to be available.

Taro 1.x

The original Taro version is an adaptation based on Nerv JS.

React code to wechat applet code point-to-point conversion.

(Nerv features make compiled code even IE8 compatible)

Taro3.x

It is divided into Web side/small program, adaptation and compatibility are in the React-Reconciler, and do hostConfig, and then different ends use different Document Object scheduling

On the Web side, the Reconciler is also the document of the call. The words reconciler calls on the small program are their own abstract Taro Document.

export const document = (isBrowser ? doc : createDocument()) as TaroDocumentInstance
Copy the code
Web side

There are relatively few different things on the Web side

  1. It’s going to sort out the route package based on the applets configuration file, which is usedwebpack loaderAdd require to each routing file in the main APP file entry so that the package file recognizes it aschunkTo pack)
  2. Self-built routing, in order to be consistent with the behavior of the applet routing stack. (So an application may have multiple page instances on one H5)
  3. __taroAppConfigGlobal variables get all the current configuration information
  4. witheventCenterWe can listen in on every one of themrouterChangeIn the event
  5. Multi – end some template adaptation is dependentionic/stencilTo do adaptive (Web-components solution). Use the applyPlugin if you want to use a dynamic component, otherwise the dynamic component will not work. (This loader has been completed for us)
The small program end

The package content of the small program side is very tedious, but it can be skipped completely, because it is only the operation mode of the generation target! The core only cares about the scheduling of setData.

The Taro enqueueUpdate

Taro solves part of the setData frequency problem by actually doing a simple schedule to unify setData processing every time you setState!

Scheduling on applets comes entirely from enqueueUpdate

This is a page Data that we have in the applet

We can see that there is no data for our application at all, such as the actual state that we applied

Most of the data recorded here is vNode by vnode (i.e. what a node should look like)

The field meaning here is explained (I think the abbreviation here is possible to make each setData content as small as possible).

Container = 'container',
Childnodes = 'cn',
Text = 'v',
NodeType = 'nt',
NodeName = 'nn',

// Attrtibutes
Style = 'st',
Class = 'cl',
Src = 'src'
Copy the code

There’s something else that uid does here

For example, implementing eventTarget on the Taro Document, including getElementById, is also looked up by UID.

Each creation passes a UID to an eventSource’s set for safekeeping (the current node is set to it each time).

GetElementById is called by going to the eventSource to get an ID

The pageID of each page route points to the route path.

Data consumption scenarios There are two main scenarios for data consumption

  1. Recursive component
  2. Non-recursive component
    1. Constrained iteration

This template is pre-generated in the applet. In base.wxml in the bundle.

Small program all setData is done under a page Ctx. Unless you do it separately, do it with customView. Otherwise this is all handed over to the Page Context and setData

The applets are pretty much the same, and the core may differ only in some tag or attribute names.

Taro has also implemented a bundle applet abstraction in this regard

Taro-docs.jd.com/taro/docs/p…

This allows you to extend the platform simply by changing the attributes of an Adapter, because the pattern of applets is similar.

Taro abstracts this layer of code-generator. (As more platforms are added later, the build layer templates are essentially fixed and distributed to the detailed implementation of the respective platform.)

Every mouth is a reconciler

Taro extends the hide and show methods to the original mode

The reconciler is invoked differently on different ends.

On the Web side it might be an insertBefore calling the real DOM

On the applet side, it is possible to adjust some attributes of the entire data, such as x.[2] to x.[3], and call an enqueueUpdate Path to setData to update the applet. (However, we will use hydrate for batch adjustment here)

Taro’s work on engineering

  1. Strategies for style adaptation

    Taro is designed to use PostCSS for style adaptation, and designWidth can be defined according to your actual situation

  2. Taro CLI has created a template similar to Yeoman-template to create custom templates

  3. Taro CLI Each packaging mode/command is abstracted as a pluggable plugin, and the scheduling of this section is done using Tapable.

  4. Recommended isomorphic adaptation, dependent on file name extensions. This is some of the solutions that define Resolve via enhance-resolve, which takes precedence over the resolve file based on the flag platform you currently package.

  5. Some out-of-the-box configurations cssnano Terser Uglify

etc…

bonus

Small program optimization scheme

When downloading applets, keep them as small as possible.

(Subcontracting, picture CDN, code compression, public module extraction, avoid useless dependence, static resources cache as much as possible)

Code runtime

Avoid too many nodes and script blocking for too long.

SetData frequency and data volume size.

The end of the

  1. This article is just a rundown of what you read so you can get anchors in your code based on keywords.
  2. Taro is an excellent framework for students to read about.

Contact Me

encode by base64

  • Email: a2FuZzk1NjMwQGdtYWlsLmNvbQ==
  • QQ: OTA3NzQ3ODc0QHFxLmNvbQo=

Reprint must indicate the source and author

Otherwise it will be regarded as infringement

Reprinting must indicate the source and author

Otherwise it will be regarded as infringement