Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use the features of React", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use the features of React" article.

Consistent development experience on multiple sides

There is no doubt that the development experience of Mini Program's native grammar has been criticized. Many followers from Wechat to later, such as Wechat, Baidu, Toutiao, etc., have chosen an architecture design similar to Alipay, but there are also some differences, which leads to more and more Mini Program platforms that developers need to adapt to, and it is unrealistic for each end to develop a set of code, which further leads to a rise in R & D costs. The code is difficult to maintain.

Community Mini Program-based upper-level development frameworks also emerge in endlessly, the main difference and focus of this kind of framework is DSL and multi-terminal adaptation. The core solution is to reuse the ecology of existing Web and provide a consistent development experience across different platforms. If you can use class React or class Vue to develop Mini Program, you can reuse tens of thousands of toolkits on NPM.

This is a very important but also very basic capability, but it is different in the Flying Ice system. Besides supporting the consistency of development at different ends such as Ali and Alipay, we are committed to providing ICE developers with a simpler and smoother solution for developing Mini Program, which means that if you have used ice.js to develop middle and background applications, you can start Mini Program development at almost no cost. At the same time, the standardized React application development models and best practices precipitated in the middle and background fields are fully applied to Mini Program development, including but not limited to state management, data request, lifecycle, style, Hooks and other capabilities.

It is critical to provide consistent experience from mid-background to Mini Program development, including:

Develop mind: provide complete React support without additional learning cost

Development experience: provides VS Code-based auxiliary plug-ins, which supports TypeScript by default

Multi-terminal adaptation: one-time encoding multi-terminal delivery, has supported Ali Mini Program, Alipay Mini Program, Web

Community ecology: fully compatible with existing community ecology.

Unrestricted use of all features of React

Ice.js 's Mini Program mechanism is based on Rax Mini Program's runtime scheme and adapts by simulating DOM/BOM API, so it is DSL-independent. At present, this program has been landed in Ali's internal 100 + Mini Program project, has been verified by a large number of online projects, and is reliable. Allows you to use all the features of React without restrictions.

There are few grammatical constraints.

Support for using Hooks

Operation DOM is supported (not recommended)

Rich React community ecology

What the logical layer does is actually quite complicated. The first thing to do is to deal with the relationship between nodes, to simulate various behaviors such as appendChild/ removeChild/updateNode to manipulate the VDOM tree. The second is to simulate events. In the logical layer, each node class inherits from the EventTarget base class, which is the same as W3C, and then collects the events you need to listen to through nodeId. When the view layer triggers a node's event through action, it gets the target node's id through the event.currentTarget.dataset.nodeId in the native Mini Program event, and finally triggers the target callback.

Complete application development practice

Ice.js Mini Program inherits the best practices of Web application development in design. If you have used ice.js to develop applications, then using it to develop Mini Program is almost cost-free, following the same set of development norms and best practices.

The application portal * * runs the application through the default generated code without any configuration. You only need to call runApp to launch Mini Program.

Import {runApp} from 'ice';runApp ()

Life cycle

The life cycle refers to the application of its own functions that are automatically triggered at a particular point in time or at some special framework event. The framework provides complete application lifecycle capabilities.

Import {runApp} from 'ice' Const appConfig = {app: {/ / trigger onLaunch () {} when the application starts, / / trigger onShow () {} when the application is triggered from the background to the foreground, / / trigger onHide () {} when the application is cut from the foreground to the background, / / listen for global error onError (error) {}}; runApp (appConfig)

Global configuration

Used for global static configuration of applications, such as setting routing, window performance, and so on.

Routes is used to specify the page of the application, and each item represents the path and file information of the corresponding page.

{"routes": [{"path": "/", "source": "pages/Home/index"}]}

Window is used to configure the window representation of the application, and also supports setting the window representation for each page. Currently, the parameters that have been supported are:

{"window": {"titleBarColor": "", "pullRefresh": true, "title": "Home"}}

Style scheme

The CSS Modules scheme is recommended by default, which can solve the two pain points of global pollution and naming confusion in style development. But it also supports Sass, Less and other writing styles.

Data request

In most cases, you need to communicate with the back-end server through the HTTP protocol. When developing Mini Program, we provide universal-request for network requests, and this module has supported multi-end sending requests.

Hooks scheme

In addition to using the basic Hooks when developing Mini Program, we also provide a complete set of custom Hooks tool library ahooks, covering most of the Hooks scenarios to help your application development.

For more details such as status management, project configuration, events and other capabilities, please see the official website documentation.

Three minutes to get started.

Initialize the project

Select the initialization template to download based on the npm init ice command:

$npm init ice # or use yarn$ yarn create ice

Select Templat

You can choose Mini Program TypeScript or JavaScript template:

? Please select a template (Use arrow keys) ❯ Lightweight JavaScript template with Mini Program Lightweight TypeScript template with Mini Program

Start the project

Open the project using Mini Program developer tools, execute the following command, and you will see the following interface:

The above $cd $npm install$ npm start is about the content of this article on "how to use the features of React". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.