Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to bind the scope of the event monitoring function in JSX". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to bind the scope of the event monitoring function in JSX.

Full support for JSX syntax and React Hooks

As a development framework using React and JSX syntax, early versions of Taro imposed strong restrictions on syntax in both compiler and editor checking tools. In Taro 1.3, developers can give full play to their creativity and imagination, can write if-else at will, can write anonymous functions at will, can put JSX in class functions, can also be put in ordinary functions, and so on. You can write this as long as the compiler and ESLint do not report errors.

Although React Hooks has not been officially stable for a long time, we believe that this feature can effectively simplify the development pattern and improve the development efficiency and development experience. Even if the ecology and best practices of Hooks are not yet perfect, we believe that Hooks will become the mainstream of the React development model in the future, and it will also profoundly affect the future API composition of other frameworks.

New Lifecycle and Context API

We also implemented the new lifecycle functions static getDerivedStateFromProps () and getSnapshotBeforeUpdate () of React 16 in Taro 1.3. When the new lifecycle function is injected into the class component, the old lifecycle function will not be called, and the original lifecycle call will not be affected if the new lifecycle function is not used. In most cases, we recommend using a new lifecycle to build your class components because it reduces the overhead of rendering and updating. You can view the relevant documentation for more details.

Taro 1.3 also implements createContext, contextType, and useContext API of React 16. The new Context communicates component updates through a declarative API, making it more intuitive for Taro to communicate and share states across components. At the same time, hot gate libraries such as react-redux are being refactored based on Context and Hooks, and we look forward to working with the community to explore new React/Taro development and design patterns.

Significantly improve H5 performance and availability

As the end with the highest demand except WeChat Mini Programs, we have always deployed an important development force on the H5 side. In Taro 1.3, we optimized the way of compiling code, realized the minimum introduction of resources and on-demand introduction, and reduced the compilation size of the original minimum project by about 80%. This is undoubtedly a huge improvement for H5, which is in poor condition of the network.

The quantity and quality of API on the H5 side also increased significantly. Taro 1.3 added 28 H5 API and solved hundreds of H5-related issue.

For more information about H5 performance, please check out the article: "Top of decisive Battle performance-Taro H5 conversion and Optimization upgrade".

Taro Doctor

We also developed Taro Doctor, inspired by Flutter Doctor. Taro Doctor, like a doctor, can diagnose project dependencies, settings, structure, and code specifications for problems, and try to come up with solutions.

But unlike a real doctor, Taro Doctor doesn't have to wait in line to register or spend money. All you have to do is run the command: taro doctor on the terminal, just like in the figure:

There's more.

In addition to the above features, Taro 1.3 does a lot of additional work that may have little impact on day-to-day development, but lays the foundation for the stability of Taro and more possibilities in the future:

Component parameter transfer (props) system reconfiguration

On the Mini Program side of Taro 1.0 to 1.2, we always use the component parameter transfer system of the native Mini Program framework, but the Mini Program component system can not pass the value of the function or unnamed parameters, and the implementation of each Mini Program component is different. In order to solve these problems, we have implemented a set of component parameter transfer system in Taro 1.3. The new system will make the code related to passing parameters more reliable, and it will also be the basis for us to support more JSX syntax.

Command line tool (CLI) refactoring

In Taro 1.3, we refactored the command line tool using TypeScript and gradually added more test cases. After refactoring, we can be bolder to add new features to CLI and replace old dependencies. At the same time, we will expose the functions of CLI in the form of API, which can be given to other development tools and our partners.

Mobile terminal container replacement

We worked with JD.com 's ARES) team to replace the original mobile container expo with a deeply customized JDReact. JDReact greatly improves the controllability of Taro mobile, allowing us to break through the constraints of expo, introduce native mobile code, provide customized features and API, and achieve better performance and stability.

Support the development of Mini Program plug-ins

Mini Program plug-in is a very excellent feature brought by Mini Program, which can greatly improve the code reuse rate, reduce the package size, and bring a lot of convenience for developers. Wechat and Alipay Mini Program already support plug-in functions. Starting from version 1.3, Taro supports the direct development of Wechat and Alipay Mini Program plug-ins, which means that the Taro project will seamlessly interface with Mini Program plug-ins, and there is no longer the cost of switching development modes.

Support "Mini Program Cloud Development"

"Mini Program Cloud Development" is a very powerful feature provided by WeChat Mini Programs and Tencent Cloud team. It is a Serverless service that provides developers with "cloud function", "cloud database" and "cloud file storage" capabilities, and encapsulates these capabilities into specific APIs to help developers quickly build WeChat Mini Programs's back-end services. To enable Taro developers to enjoy the capability of "Mini Program Cloud Development", Taro has also added support for "Mini Program Cloud Development", provided an initialization template for "Mini Program Cloud Development", and encapsulated the API related to Mini Program Cloud for developers' convenience. At the same time, Mini Program Cloud Development has provided H5 version of SDK,Taro support to uniformly encapsulate the calling methods of Mini Program and H5, helping developers to quickly create multi-end Serverless applications.

Upgrade compatibility

As mentioned earlier, Taro 1.3 is a large version that has been brewing for the longest time, has the most features, and has a lot of refactoring at the bottom of Taro, so the upgrade of version 1.3 brings the following two compatibility issues.

Event listener functions in JSX must be bound to scope

In previous versions of Taro, event listeners bound in JSX could access component instances without binding any scope, such as

Import Taro, {Component, Config} from'@ tarojs/taro'

Import {View, Button} from'@ tarojs/components'

Export default class Test extends Component {

State = {

Hello: 'noclick'

}

ClickHandler () {

This.setState ({

Hello: 'click'

})

}

Render () {

Return (

Click

)

}

}

In the above example, the click event bound by the button can be executed normally in the previous version, and Taro will bind the scope of clickHandler to the current component instance by default, but this is not in line with the actual situation in React, so, in version 1.3, we fixed this problem. Now the event listener function in JSX must bind scope, otherwise it will report an error.

The JSX section of the above code can be modified as follows

Render () {

Return (

Click

)

}

Or you can bind the function to scope in advance in constructor

Constructor () {

This.clickHandlerBind = this.clickHandler.bind (this)

}

Render () {

Return (

Click

)

}

Another way to do this is to write clickHandler as an arrow function, which works in both new and old versions.

Temporarily unable to use Taro components in native applications

In previous versions, components compiled with Taro can be directly used in native projects to improve reusability, but version 1.3 due to complete refactoring of the props system of components, Taro components can not be used in native projects after upgrading 1.3, we are actively dealing with this problem and will continue to support this feature in subsequent versions.

Thank you for reading, the above is the content of "how to bind the scope of the event listening function in JSX". After the study of this article, I believe you have a deeper understanding of the problem of how to bind the scope of the event listening function in JSX, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.