Taro多端开发框架的学习记录

一、Taro框架介绍

——Taro为何会出现？

目前市场多端流量应用混战的局面，比如H5，小程序，支付宝小程序，抖音小程序等，那么此时解决这些问题的框架就应运而生了。

——什么是Taro框架？

Taro是一款一次编码，多端运行的技术框架，通过自身的编译工具，编译成不同环境下的代码，实现多端运行。

——Taro框架的优点

Taro只编写一套代码就能够适配到多端，可以提升开发效率，也可以使得技术栈得到统一，节约资源，让开发简洁有效。

——Taro框架的特点

-遵循React的语法规范，可以使用jsx的语法规范开发小程序的开发；

-支持组件化开发；

-支持TypeScript语言开发

-很强的开发体验，开发流程自动化，顺畅、快捷。

——Taro目前支持的生态应用

微信小程序、百度小程序、支付宝小程序、web（H5）、reactNative等

二、Taro的安装

npm install -g @tarojs/cli

或者

yarn global add @tarojs/cli

三、Taro项目的创建

taro init myApp(项目名称)

开发期启用命令

npm run dev:h5  web
npm run dev:weapp 微信小程序
npm run dev:alipay 支付宝小程序
npm run dev:swan 百度小程序
npm run dev:rn ReactNative

运行之后会出现如下画面

此时我们需要更改一下配置文件

（1）打开myProject/config/index文件

（2）在文件里找到h5并配置域名和端口号

（3）配置完成后再次启动项目 编译成功后会默认形成如下页面

四、项目目录

五、Taro生命周期与state

初始化阶段

  componentWillMount () { }  页面渲染之前
  render () { return ( ) }  页面进行渲染
  componentDidMount () { } 页面完成渲染之后

组件销毁阶段

  componentWillUnmount () { }  组件销毁之前执行
  componentDidShow () { }  React中不存在 页面显示的时候会触发
  componentDidHide () { }  React中不存在 页面隐藏的时候会触发

state数据更新阶段

componentWillUpdate () { } 数据更新之前会触发
componentDidUpdate () { } state数据更行完成后会触发

在state中进行数据的存取

可以通过setState的方法来更改state中的数值（在Taro当中setState是一个异步过程）

如果哟想要获取最新的状态，需要在setState的第二个参数函数内部使用箭头函数获取。

this.setState({
      text: "李四"
    },()=>{
      console.log(this.state.text)
    })

关于构造函数shouleComponentUpdate

  shouldComponentUpdate(nextProps,nextState){
    //nextState是指state最新的状态
    //此构造函数用来检查此次render函数是否被调用
    //一般用来多次setState调用时,提升render的性能
    if(nextState.text==="李四") return true;//如果text变为李四时,就进行render函数的渲染,提升了性能
    else return true;
  }

六、props属性