每天一点点之 taro 框架 - 生命周期 & state
注意:从vue过来的小朋友要注意,taro直接赋值时不会更新组件的,同react一致更新数据必须调用setState方法,例如:this.setState({name:'张三'})
1.render函数
return中的标签可以是但标签,也可以是多标签
2.index.js文件内容介绍
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss' export default class Index extends Component { config = {
navigationBarTitleText: '首页'
} componentWillMount () {
console.log('componentWillMount,第一次渲染之前执行,只执行一次')
} componentDidMount () {
console.log('componentDidMount,第一次渲染之后执行,只执行一次')
} componentWillUnmount () {
console.log('componentWillUnmount,卸载时执行')
} componentWillUpdate () {
console.log('componentWillUpdate,state数据将要更新')
} componentDidUpdate () {
console.log('componentDidUpdate,state数据更新过后')
} shouldComponentUpdate (nextProps,nextState) {
// 检查此次setState是否要进行render调用,返回true调用,false不调用
// 一般用来多次的setState调用时,提升render性能
// 判断状态
if(nextState.state.text == '李四')
return true;
} componentWillReceiveProps(nextProps){
// 会在父组件传递给子组件的参数发生改变时触发
} // componentDidShow与componentDidHide在reactjs不存在,是taro为了兼容小程序实现的
componentDidShow () {
console.log('componentDidShow,显示时触发')
} componentDidHide () {
console.log('componentDidHide,隐藏时触发')
}
state = {
name:'Helloworld'
}
getName () {
return 111;
}
render () {
console.log('render,第一次运行') return (
<View className='index'>
<View>获取动态变量:{this.state.name}</View>
<View>获取动态方法:{this.getName()}</View>
</View>
)
}
}
3.tarojs的生命周期
tarojs有六个生命周期
4.setState更新异步问题
setState方法有两个参数, 第一个时对象,第二个时回调函数
componentDidMount () {
console.log('componentDidMount,第一次渲染之后执行,只执行一次')
this.setState({name:'王五'},()=>{
console.log(this.state.name,'回调')
})
console.log(this.state.name,'同步')
}
由运行结果可以看出,setState方法是异步的
每天一点点之 taro 框架 - 生命周期 & state的更多相关文章
- 每天一点点之 taro 框架开发 - taro路由及传参
1.路由 taro的路由是自带的,不需要我们额外配置,只需要我们在app.js下config中配置pages即可 class App extends Component { config = { pa ...
- 3) drf 框架生命周期 请求模块 渲染模块 解析模块 自定义异常模块 响应模块(以及二次封装)
一.DRF框架 1.安装 pip3 install djangorestframework 2.drf框架规矩的封装风格 按功能封装,drf下按不同功能不同文件,使用不同功能导入不同文件 from r ...
- Libgdx 开发指南(1.1) 应用框架——生命周期
生命周期 Libgdx应用有一个定义好的生命周期,控制着整个应用的状态,例如creation, pausing, resuming, disposing ApplicationListener 开发者 ...
- 每天一点点之 taro 框架开发 - 事件处理与样式表
1.方法调用 state = { name:'张三' } test(){ this.state.name } <button onClick={ this.test.bind(this) } / ...
- 每天一点点之 taro 框架开发 - taro调用组件传值
1.调用组件 组件文件 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' ...
- 每天一点点之 taro 框架开发 - taro静态资源引入
1.说明: taro中客园自由的引用静态资源,不需要安装任何的loader 引用样式文件 通过ES6的import引入 2.引用js文件 import { functionName } from '. ...
- Laravel 入口文件解读及生命周期
这里只贴index.php的代码, 深入了解的请访问 https://laravel-china.org/articles/10421/depth-mining-of-laravel-life- ...
- React State&生命周期
State&生命周期 State&生命周期 到目前为止我们只学习了一种方法来更新UI. 我们调用ReactDOM.render()来改变输出: function tick(){ con ...
- 【技术博客】Flutter—使用网络请求的页面搭建流程、State生命周期、一些组件的应用
Flutter-使用网络请求的页面搭建流程.State生命周期.一些组件的应用 使用网络请求的页面搭建流程 在开发APP时,我们常常会遇到如下场景:进入一个页面后,要先进行网络调用,然后使用调用返 ...
随机推荐
- IAR STM32F10x_StdPeriph_Driver 3.4转3.6.1库
1.Fatal Error[Pe1696]: cannot open source file core_cmInstr.h STM32F10x_StdPeriph_Driver 3.4库移植换成3.6 ...
- Linux设备树学习
1.概念 设备树用于实现驱动代码与设备信息相分离.驱动代码只负责处理驱动的逻辑而关于设备的具体信息存放到设备树文件中.(dts文件,编译后为dtb文件).一个dts文件对应一个ARM的machine, ...
- ch4 背景图像基础
如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在body上应用background-image,默认情况下浏览器水平和垂直的重复显示背景图像,让图像平铺在整个页面上,可以选择背景图像是垂直 ...
- Day3-F-Buy Low Sell High-CodeForces867E
You can perfectly predict the price of a certain stock for the next N days. You would like to profit ...
- Zero 初识Sciter
在浏览有关Sciter技术前,您需要花点时间浏览以下内容. 您是否需要花时间学习Sciter? 如果您的工作或您想从事的工作与桌面应用开发无关,那么您不需要学习Sciter. 如果您不认同HTML\C ...
- Codeforces Round #568 (Div. 2) 选做
A.B 略,相信大家都会做 ^_^ C. Exam in BerSU 题意 给你一个长度为 \(n\) 的序列 \(a_i\) .对于每个 \(i\in [1,N]\) 求 \([1,i-1]\) 中 ...
- UVALive 3231 网络流
题目要求给m个任务分配给n个机器,但最后任务量最多的那个机器的任务量尽量少,利用最大流,在最后的汇点那里设置关卡,二分结果,把机器到最终汇点的容量设置为该值,这样就达到题目条件,这样跑最大流 还能把m ...
- 机器学习算法中的网格搜索GridSearch实现(以k-近邻算法参数寻最优为例)
机器学习算法参数的网格搜索实现: //2019.08.031.scikitlearn库中调用网格搜索的方法为:Grid search,它的搜索方式比较统一简单,其对于算法批判的标准比较复杂,是一种复合 ...
- Vue的7属性-8方法-7指令
Vue的7属性: el属性 绑定id,用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符 data属性 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在dat ...
- s2010编译C++ 链栈的使用
// CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...