基于React+Ts学习Taro

​ 文档是基于Function+hooks编写的

第一章 hooks

解决无状态组件的中没有state,生命周期，this指向的问题

1.1 useState

它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是可以改变状态值的方法函数。

 import {useState} from 'react'
 function App() {
    const [count,setCount]=useState(0)
    const  changeCount= () => {
      setCount(count+1)
    }
    return (
     <div>
        <h1>计数器:{count}</h1>
        <button onClick={changeCount}> change</button>
     </div>
    )
 }
export default App
复制代码

1.2 useEffect

useEffect就相当componentDidMount，componentDidUpdate和componentWillUnmount的集合体

语法：

 useEffect(() => { 
     // 在此可以执行任何带副作用操作
     return () => { // 在组件卸载前执行
         // 在此做一些收尾工作, 比如清除定时器/取消订阅等
     }
 }, [count]) // 用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。如果是[], 回调函数只会在第一次render()后执行
复制代码

 import {useState,useEffect} from 'react'
 function App() {
    const [count,setCount]=useState(0)
    const  changeCount= () => {
      setTimeout(() => {
        setCount(count+1)
      },1000)

    }
   useEffect(() => {
     changeCount()
   })
    return (
     <div>
        <h1>计数器:{count}</h1>
        <button onClick={changeCount}> change</button>
     </div>
    )
 }
export default App

复制代码

第二章. React基本语法

2.1. 初始化项目

npm install -g create-react-app		//全局下载react脚手架

create-react-app hello-react		//创建react项目，hello-react为项目名

cd hello-react						//切换到项目目录

npm start	
复制代码

2.2. JSX的理解和使用

理解:
* 全称: JavaScript XML
* react定义的一种类似于XML的JS扩展语法: XML+JS
* 作用: 用来创建react虚拟DOM(元素)对象

function App() {
  return (
    <div className="App">
      <h1>hello world!</h1>
    </div>
  );
}
export default App;
复制代码

2.2.1 变量绑定

通过{}实现变量绑定

 import {useState} from 'react'
 function App() {
    const [msg,setCount]=useState("hello")
    return (
     <div>
        <h1>{msg}</h1>
     </div>
    )
 }
export default App
复制代码

使用多个useState,不限制于基本类型，对象和数组也可以

 const [count,setCount]=useState(0)
 const [flag,setFlag]=useState(true)
复制代码

2.2.2 条件渲染

通过&&(或)运算符来达到v-if的一样效果。

 import {useState} from 'react'
 function App() {
    const [flag,setFlag]=useState(true)
    return (
     <div>
       {flag && <h1>hello</h1>}
     </div>
    )
 }
export default App
复制代码

2.2.3 列表渲染

通过map遍历出标签插入，给绑定的元素添加key

 import {useState} from 'react'
 function App() {
    const [tempList,setFlag]=useState([{name:"foo",age:18},{name:"bar",age:20},{name:"jack",age:22}])
    return (
     <div>
       <ul>
         {
           tempList.map((item,index) => {
             return <li key={index}>{item.name}---{item.age}</li>
           })
         }
       </ul>
     </div>
    )
 }
export default App

复制代码

2.2.4 事件绑定

通过onClick绑定事件，但是class组件没有this,推荐使用通过箭头函数来绑定this

 import {useState} from 'react'
 function App() {
    const [msg,setMsg]=useState("hello")
    // const [count,setCount]=useState({name:"foo"})
    const changeMsg= () => {
      setMsg("world")
    }
    return (
     <div>
         <h1>{msg}</h1>
         <button onClick={changeMsg}>changeMsg</button>
     </div>
    )
 }
export default App
复制代码

第三章. react组件化开发

3.1. 基本理解和使用

function MyComponent1() {
   return (<h1>工厂函数</h1>)
}
复制代码

3.2. props

父组件 在子组件标签上传值

 import {useState} from 'react'
 import Children from "./components/Children/Children";
 function App() {
    const [msg,setMsg]=useState("hello")
    return (
     <div>
         <Children text={msg}/>
     </div>
    )
 }
export default App
复制代码

子组件 通过props接收

function Children(props) {
  return (
      <div>
        我是父组件传递过来的值{props.text}
      </div>
  )
}
export  default Children
复制代码

3.3. refs

作用: 找到组件内部的真实dom元素对象, 进而操作它
三种使用方式
	方式一：ref="input1"  //字符串形式
	方式二：ref={input => this.input1 = input}//回调函数形式
	方式三：myRef = React.createRef()//创建一个ref容器形式
	方式四:
复制代码

示例代码：方式一

class UserInput extends React.Component {
        handlerClick = () => {
          //通过ref获取DOM
          let { input1 } = this.refs;
          alert(input1.value);
        };
        render() {
          return (
            <div>
              //方式一：
              <input type="text" ref="input1" />
              &nbsp;
              <button onClick={this.handlerClick}>弹出数据</button>&nbsp;
            </div>
          );
        }
      }
ReactDOM.render(<UserInput />, document.getElementById("example")); 
复制代码

方式二

class UserInput extends React.Component {
        handlerClick = () => {
          //通过ref获取DOM
          alert(this.input1.value);
        };
        render() {
          return (
            <div>
              {/* 方式二 inptu为形参，自定义，inptut1为方法名 */}
              <input type="text" ref={(input) => (this.input1 = input)} />
              <button onClick={this.handlerClick}>弹出数据</button>&nbsp;
            </div>
          );
        }
      }
ReactDOM.render(<UserInput />, document.getElementById("example"));
复制代码

方式三

 class UserInput extends React.Component {
        //方式三：创建一个ref容器
        //这个容器是一个“专用容器”，只能保存一个元素
        myRef = React.createRef();
        handlerClick = () => {
          //通过ref获取DOM,需要通过current属性获取value
          let { current } = this.myRef;
          alert(current.value);
        };
        render() {
          return (
            <div>
              {/*将当前元素放入组件对象身上的myRef容器中*/}
              <input type="text" ref={this.myRef} />
              <button onClick={this.handlerClick}>弹出数据</button>&nbsp;
            </div>
          );
        }
      }
ReactDOM.render(<UserInput />, document.getElementById("example"));
复制代码

第四章 Taro

4.1 安装taro及初始化项目

npm install -g @tarojs/cli	//step1 全局安装taro
taro init taro-demo  		//step2 初始化taro
							//step3  进行一系列模版配置  
npm run dev:weapp			//step4	 运行微信小程序			
复制代码

4.2 基础组件的使用

import { View, Text} from '@tarojs/components'
import './index.styl'

function Index() {
  return (
    <View>
      <Text>hello  world</Text>
    </View>
  )
}
export default Index
复制代码

4.3 生命周期函数

//1.使用taro自带的
import  {useDidShow} from "@tarojs/taro";
useDidShow (() => {
    console.log('页面展示时的回调 ')
})
//2.使用react的hooks
import {useEffect} from 'react'
useEffect(() => {
    console.log('页面加载、更新、卸载的回调 ')
})
复制代码

4.4 路由导航

Taro.switchTab  //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
Taro.reLaunch	//关闭所有页面，打开到应用内的某个页面
Taro.redirectTo	//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
Taro.navigateTo //保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 
Taro.navigateBack //关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
EventChannel	//触发一个事件
复制代码

4.4.1 路由跳转

//1.在app.config.ts中配置页面路由
pages: [
    'pages/demo/demo'
  ],
复制代码

//2.在组件中实现跳转
Taro.navigateTo({
    url:"/pages/demo/demo",
    success(){
        console.log('跳转成功')
    }
})
复制代码

4.4.2 路由传参

Taro.navigateTo({
    url:"/pages/demo/demo?id=2&age=18",
    success(){
        console.log('跳转成功')
    }
})
复制代码

//接受传过来的参数
 const Param: any = getCurrentInstance()?.router?.params;
 useDidShow(() => {
     console.log(Param)
 })
复制代码

4.5 事件系统

没有参数

function pageUrl() {
    console.log()
}
<Button onClick={pageUrl}>按钮</Button>
复制代码

带event

function pageUrl(e) {
    console.log(e)
}
<Button onClick={pageUrl}>按钮</Button>
复制代码

自定义参数

function pageUrl(a) {
    console.log(a)
}
<Button onClick={() => { pageUrl('aaa')}}>按钮</Button>
复制代码

4.6 常用api

useReachBottom		//上拉触底加载
usePullDownRefresh	//下拉刷新

usePullDownRefresh(() => {
    console.log('usePullDownRefresh')
})
复制代码

4.6.1 界面交互

Taro.showToast

Taro.showToast({
  title: '成功',
  icon: 'success',
})
复制代码

4.7 网络请求

使用的是fly fly帮助文档：wendux.github.io/dist/#/doc/…

url.ts配置url并暴露

const demoUrl = '/app/perform/task';
export {
	demoUrl
}
复制代码

在组件中使用

import {fly, demoUrl} from "../../../huanyou/url";
fly.post(demoUrl,params)
.then((res)=>{})
.catch((err)=>{})
复制代码

第五章 Taro-ui

使用

Taro 3 只能配合使用 taro-ui@next 版本

npm i taro-ui@next
复制代码

在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}
复制代码

组件中使用

import { AtButton } from 'taro-ui'
import 'taro-ui/dist/style/index.scss'
render () {
    return (
      <View className='index'>
         <AtButton type='primary'>按钮</AtButton>
      </View>
    )
  }
复制代码

Icon

import "taro-ui/dist/style/components/icon.scss";

<View className="at-icon at-icon-chevron-right" />
复制代码