hooks taro 下拉刷新_进阶指南 - Hooks - 《Taro 2.0.1 使用文档》 - 书栈网 · BookStack...

Hooks自 v1.3.0-beta-0 起支持

Hooks 是一套全新的 API，可以让你在不编写类，不使用 state 的情况下使用 Class 的状态管理，生命周期等功能。

关于 Hooks 的概述、动机和规则，我们强烈建议你阅读 React 的官方文档。和其它大部分 React 特性不同，Hooks 没有 RFC 介绍，相反，所有说明都在文档中：

本篇文档只会介绍在 Taro 中可用的 Hooks API 和部分与 React 不一致的行为，其它内容大体的内容和 Hooks Reference 相同。

你还可以参考这两个使用 Hooks 的 Demo：

V2EX，主要展示与服务器通信

TodoMVC，主要展示组件间通信

API

在 Taro 中使用 Hooks API 很简单，只需要从 @tarojs/taro 中引入即可。

import{useEffect,useLayoutEffect,useReducer,useState,useContext,useRef,useCallback,useMemo}from'@tarojs/taro'

useStateconst[state,setState]=useState(initialState);

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

setState(newState);

在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。

注意

Taro 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化。这就是为什么可以安全地从 useEffect 或 useCallback 的依赖列表中省略 setState。

函数式更新

如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。下面的计数器组件示例展示了 setState 的两种用法：

functionCounter({initialCount}){

const[count,setCount]=useState(initialCount);

return(

Count:{count}

setCount(initialCount)}>Reset

setCount(prevCount=>prevCount+1)}>+

setCount(prevCount=>prevCount-1)}>-

);

}

“+” 和 “-” 按钮采用函数式形式，因为被更新的 state 需要基于之前的 state。但是“重置”按钮则采用普通形式，因为它总是把 count 设置回初始值。

注意

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。setState(prevState=>{// 也可以使用 Object.assignreturn{…prevState,…updatedValues};});

useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。

惰性初始 state

initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const[state,setState]=useState(()=>{

constinitialState=someExpensiveComputation(props);

returninitialState;

});

useEffectuseEffect(didUpdate);

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。

在函数组件主体内(这里指在 Taro 渲染或创建数据的阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。

使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。

默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它在只有某些值改变