CHUNG CHIN SHING

Net name is Situ Zhengmei, domestic famous front-end experts, browser compatibility issues/selector engine/react internal mechanism, etc. has a deep accumulation, developed avalon/anu and other front-end framework, authored the book "JavaScript framework design".

This is the final post in this series. The applet seals off the possibility of manipulating the DOM and doesn't let us manipulate the view either, everything related to the view is out of reach. And it's custom components are pretty nasty and basically don't deserve to be called components and can't inherit what they're called. So we use it for the earlier dynamic templating technique ,template.

My idea is as follows, by compiling the render method of the component, turning the custom component inside into a template class, and then initializing it myself in the template class to get the props, state and then passing it to the template tag of the applet. In other words, there are two sets of templates.

Let's not worry about what the Dog component looks like.

In order to make it support both applets and React's render function, we need to retrofit the render. Transform Dogs, divs, etc. into types that applets can recognize, such as

How is this translation achieved? We can pass a plugin syntax-jsx, which will traverse the JSX open tag, closed tag, attribute and {} container in the viewer.

But React doesn't recognize the template tag, so it has to be modified.

Now look at the applet side where the applet doesn't recognize ｛, it needs to be changed to a wx:for directive.

The template of the applet has the disadvantage that it doesn't recognize attributes like name, so we need something to hold it. So let's create an array dynamically, changing the React side:

Then the template for the applet is changed to this, removing various things that the template doesn't recognize and adding the wx:for attribute, which corresponds to the templatedata value on the React side. The template then has a data attribute, which is perfect for passing all properties (except methods) to the dog's template via object destructuring.

Then we change React's render method to a React.createElement form.

The above translations can be achieved with the transform-react-jsx babel plugin.

class P extends Page is an es6 way of defining classes that may not be recognized by applets, or may be too complicated to compile via babel. Let's say taro turns the class Dog into something like this.

There's long and there's stink, so we'd better provide a way to define classes in React, called minicreateclass. In this way we can make the Dog conversion very concise .

Let's look at the Page class again. The applet defines the page is implemented through the Page factory, presumably Page(}). The tokenization of the applet here is convenient for us to hack, as a Page class will only have one instance.

The implementation of createPage looks something like this.

Finally, there is the implementation of React.template, which is responsible for assembling the data given to the template, which is the tag of the applet.

Well, that's it for my scenario. If anyone would like to start messing with me on this stuff again, feel free to look me up on github.

Recommended>>
1、AI can accurately predict reaction yields promising for new drug development
2、CarlosMartínez新式新闻共享
3、2018年11月编程语言排行榜
4、张燕章杰宽基于WebofScience数据库的旅游业能源消耗研究综述及启示
5、How to Write Python Code That Gives People Chills at First Glance

已发送

发送中