前端框架----taro2

组件

可以单标签，闭合
也可以双标签，闭合

组件生命周期

componentWillMount(){
	console.log("组件将要挂载，执行")
}
render(){
	return (
		<Component>xxx<Component/>
	)
}

componentDidMount () {
	console.log("组件完成挂载，执行")
}

componentDidShow () {
	console.log("组件完成显示，执行")
}

componentDidHide () {
	console.log("组件完成隐藏，执行")
}

componentWillUpdate(){}
componentDidUpdate(){}
shouldComponentUpdate(nextProps,nextState){
	//参数为更新后的props state
	//可以阻止，多次渲染 render
	return true/false
}

componentWillRecevieProps(nextProps,nextState){
	//第一次渲染 接收参数时，不执行
	console.log("组件将要接收参数时")
	console.log(this.props.state)//还是之前的数据
	//nextState才是最新的数据
}
//类属性，设置默认值
defaultProps = {
	name:"jack",
	age:19,
}

//状态驱动页面改变
this.setState({data:data})
console.log(this.state.data)//拿不到最新的数据，因为是异步执行
//采用回调的方式拿最新的数据
this.setState({data:data},()=>{console.log(this.state.data)})

定义类组件

import Taro,{Component,Config} from '@tarojs/taro'
import {View,Text} from '@tarojs/components'
import Child from './child.tsx' //.tsx可省略

export default class P extends Component{
	state = {}
	render(){
		return(
		<View>
			<Child name={this.state.name}></Child>
		</View>
		)
	}
}

 
 
 
 
前端技术----taro框架    下一篇：