Taro advanced

Taro Advanced
1、 Introduce
Taro It's a set of rules React Grammatically correct Multi terminal development Solutions for
2、 function
Use Taro, We can write only one set of code , Re pass Taro The compiler of , The source code can be compiled on different ends （ WeChat / Baidu / Alipay / Bytedance applet 、H5、React-Native etc. ） Running code
3、 Install scaffolding

$ npm i -g [email protected]

$ yarn add [email protected]
4、 Create project

$ taro init myApp
5、 Order to start the project in the development period

$ npm run dev:h5 // web

$ npm run dev:webapp // Wechat applet

$ npm run dev:alipay // Alipay applet

$ npm run dev:swan // Baidu applet

$ npm run dev:rn // ReactNative
6、 Project directory Introduction

|— dist // Compile results directory

|— config // The configuration directory

|-- dev.js // Configuration at development time

|-- index.js // The default configuration

|-- prod.js // Configure when packaging

|— src // Source directory

|-- pages // Page file directory

|-- index // index Page directory

|-- index.js // index Page logic

|-- index.css // index Page style

|-- app.css // Project general style

|-- app.js // Project entry documents

|— package.json // Rely on package management files

|— project.config.json // Configuration file for configuring applet
7、 Life cycle

state = {

name: ‘Jerry’,

age: 24

}

​

// -> 1.

componentWillMount () {

console.log(‘ Execute... Before the first rendering , Only execute 1 Time ’)

}

​

// -> 2.render

​

// -> 3.

componentDidMount () {

console.log(‘ Execute... After the first rendering , Only execute 1 Time ’)

this.setState({

name: ‘Tom’

}, () => {

// -> The value obtained through callback is the latest value

console.log(this.state.name + ‘,’ + this.state.age) // Tom,24

});

}

​

// -> 4.

componentWillUnmount () {

console.log(‘ Execute on uninstall , Only execute 1 Time ’)

}

​

componentWillUpdate () {

console.log(‘state The data will be updated ’)

}

​

componentDidUpdate () {

console.log(‘state After the data is updated ’)

}

​

// -> The following two life cycles are required by applets , But compatible h5 And small program

componentDidShow () {

console.log(‘ Trigger when the page is displayed ’)

}

​

componentDidHide () {

console.log(‘ Triggered when the page is hidden ’)

}

​

componentWillReceiveProps () {

console.log(‘ It will be triggered when the parameters passed from the parent component to the child component change ’)

}

​

// -> Every call setState This life cycle will be called once

// -> What scenarios are used in this life cycle ？ - for example ： By judging if name yes Jerry Only when it is updated state, Otherwise, it will not be updated

shouldComponentUpdate (nextProps, nextState) {

console.log(‘ Check this setState Is it necessary to render call ’)

// -> This life cycle will return a boolean value , If you return false, Then it will not carry out render; return true, Then it will be executed render

// -> The default is to return true

if (nextState.name === ‘Tom’) { // -> Usually used for many times setState Invocation time , To promote render Performance of

return true

} else {

return false

}

}

​

render () {

console.log(‘ Rendering render’)

return (



{this.state.name}

{this.state.age}



)

}
8、 Status update
Taro Status updates must be asynchronous
React Status updates in are not necessarily asynchronous , Update must call setState Method
9、Props

// -> index

test() {

console.log(‘ Parent component -> Child components , The transmission of methods ’)

}

// Be sure to be compatible with applets and h5, stay Taro Use in props The transmission event must be in on perhaps dispatch start , And it is in the form of hump

​

// -> Child

class Child extends Component {

componentWillReceiveProps (nextProps) {

// stay props When updating data

// props Too many will be updated frequently , So in this function, we usually make some judgments

console.log(‘props The properties have changed ’)

console.log(nextProps)

}

​

cl() {

this.props.onTest()

}

render() {

let { name, obj } = this.props

return (



{name}

{obj.key[0].name}



)

}

}

​

// -> The default value is

Child.defaultProps = {

obj: {key: [{name:“aaaa”}]}

}
10、 Routing functions
10.1 Routing functions
stay Taro in , The routing function is built-in by default , No additional routing configuration is required for developers
This is equivalent to adapting the applet and h5 The routing problem of
Taro By default, it is generated according to the configuration path Route
We just need to enter the file in the config The configuration specifies pages, And then you can go through it in the code Taro Provided API To jump to the destination page

handleClick = () => {

Taro.navigateTo({

url:‘/pages/index/index’

})

}

​

render () {

return (



Test

Jump



)

}
10.2 Route parameters
We can jump through all url Add the query string parameter later to jump and transfer parameters , for example ：id=2&type=test
In this case , Jump to the life cycle of the successful target page (componentWillMount) The method can pass this.$router.params Get the passed in parameter
11、 Static resource references
stay Taro It can be used like webpack So free to reference static resources , And there is no need to install any loader
You can use it directly ES6 Of import Syntax to reference style files /Js file / Local pictures
12、 Conditions apply colours to a drawing
Short circuit expression
It is worth noting that the applet renders short-circuit expressions , There will be true perhaps false The brief appearance of , So if you want to adapt the applet , It is best to use ternary expressions to judge
Ternary expression
A more general way ,Jsx Grammar is not supported if Operator , So we can only use ternary expression or short-circuit expression

{/* Short circuit expression /}

{

!true || 456

}

​

{/ Ternary expression /}

{

true ? 123 : ‘’

}
13、 The list of rendering

{/ The list of rendering /}

{

this.state.list.map((item) => {

return (

// Remind you that when looping through an array, you should provide keys.

// Keys Can be in DOM Help when some elements in are added or deleted Nerv/ Applet Identify which elements have changed .

// So you should give each element in the array a definite identity



{item.name}



)

})

}
14、Children

export default class TestDialog extends Component {

render () {

return (



<Dialog header={

header

}

>I am dialog1

I am dialog2



)

}

}

export default class Dialog extends Component {

render () {

return (



{/ Don't take this.props.children Do anything */}

{this.props.children}

{/* When multiple displays are needed , You can customize the name , It's equivalent to a small program slot */}

{this.props.header}



)

}

}
15、 Event handling
Named after the hump
stay Taro Prevent the event from bubbling , Must be clearly used stopPropagation
Pass parameters... To the event handler
The event transmission of any component should be in on start 【 As long as JSX The parameters passed in by the component are functions , The parameter name must start with on start 】
All of the above are for adapting applets , If you only do h5 End , You don't need to pay attention to

export default class Event extends Component {

state = {

username: ‘Jerry’

}

// -> What we need to pay attention to here is to be compatible with applets , You cannot use arrow functions to write in events , It's better to use bind To change this Point to

// test = () => {

// console.log(‘test log’)

// console.log(this.state.username)

// }

​

test(e) {

console.log(e);

console.log(‘test log’);

​

// -> this Point to

// console.log(this.state.username);

​

// -> It should be noted that to prevent event bubbling, you can only use stopPropagation

// e.stopPropagation();

​

// -> Clear text parameters are event In front of the object Arguments(2) [“Jerry”, MouseEvent, callee: (…), Symbol(Symbol.iterator): ƒ]

console.log(arguments);

}

render () {

return (



<Button onClick={this.test.bind(this, this.state.username)}>testEvent



)

}

}
16、 Style sheets
Out of commission #id Selectors | div span tag chooser | span[class=‘name’] Attribute selector | .a > .b
You usually use . Class selectors , Must define className, Only valid for the current component
It is recommended to use flex Layout
Taro actual combat
Install the stable version taro && Initialize project

$ cnpm i @tarojs/[email protected] -g

$ taro init cnode
Use taro-ui Component library

$ cnpm i taro-ui --save