Taro is a multi-terminal development solution that follows the React syntax specification. To use Taro, you only need to write a set of code, and then compile the source code separately through Taro’s compilation tool, which can run on different ends (wechat applet, H5, Rn, etc.). React syntax address taro-docs.jd.com/taro/docs/r…

NPM cache clean –force or NPM cache verify use taobao image: CNPM install -g@tarojs /cli

If sASS installation errors occur during the installation, run the NPM install -g mirror-config-china commandCopy the code

Taro is a lifecycle that needs to be used in development

import { View, Text } from '@tarojs/components' import './index.scss' export default class Index extends Component { state = { name: '111111111', text: } componentDidMount () {componentDidMount () {this.state.name = '22' // componentWillMount () {componentDidMount () {this.state.name = '22' // Error this.setState({name: '3333333'}) // Correct // async this.setState({name: '3333333'}) '44444'}, Alert (this.state.name)}} componentWillUnmount () {// componentWillUnmount () {// componentWillUnmount () {// componentWillUnmount () {// componentWillUnmount () } componentWillUpdate () {// state data to be updated} componentDidUpdate () {// state data after update} componentDidShow () {shouldComponentUpdate (nextProps,)} shouldComponentUpdate (nextProps, NextState) {if (nextstate.name == "") {if (nextstate.name ==" ") {if (nextstate.name == "");  { return false } else { return true; / / no update}} componentWillReceiveProps (nextProps) {/ / in the parent component is passed to the child components at the time of change the parameters of the trigger} componentDidHide () {/ / reactjs doesn't exist } getName () {return '2222222222'} render () {return (<View className='index'> <Text>{this.state.name}</Text> <Text>{this.state.text}</Text> </View> ) } }Copy the code

Life cycle & State

  • Status updates are asynchronous at some point
  • React does not update data asynchronously. As with React, data must be updated by calling the setState method, which assigns values directly from vue

Parent components pass values and parent components pass functions to child components

  1. Create a child component and introduce it in the parent component. The child component props accepts the default value provided that the value passed to us is undefined, otherwise the default value of the child component will not work

Child components must bind events

The parent component passes values as well as functions

Note: In react and H5, the transfer function is available, but in wechat applets, the parent component’s transfer function is reported as an error. Applets must add on when handling functions. for the sake of the specification, everything must add on

  1. If you use lowercase PX on the page, change it to REM
  2. But if PX is capitalized, it won’t be translated

Short circuit expression | |

Ternary expressions?

If there are judgments in the array, only the data can be processed first and then iterated through the data

Organizational events bubbling;

Event is always one bit later

What is the development environment that determines the environment variable only in the development environment

CSS writing notes:

Globally valid

Data is stored

To get the data

Set up the data

Small program side and H5 side debugging:

  1. Applet custom style only applies to custom components, in H5 will be affected, solution, try to set the same class name
  2. The imported components should be careful not to be missing

Install Express, create a new file and NPM init to create index.js

Node index operation