Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 新 API getCurrentInstance #6699

Merged
merged 1 commit into from
Jun 30, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ useTabItemTap(item => {
const router = useRouter() // { path: '', params: { ... } }
```

`useRouter` 是 Taro 专有的 Hook,等同于页面为类时的 `Current.router`
`useRouter` 是 Taro 专有的 Hook,等同于页面为类时的 `getCurrentInstance().router`

### `useReady`

Expand Down
19 changes: 11 additions & 8 deletions docs/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -183,21 +183,24 @@ function Excited () {

## 路由

在旧版本中可以通过 `this.$router` 访问当前组件/页面路由的详情。在 Taro Next 对应的 API 是在 `@tarojs/taro` 中的 `Current.router`,两者的属性一模一样。
在旧版本中可以通过 `this.$router` 访问当前组件/页面路由的详情。在 Taro Next 对应的 API 是在 `@tarojs/taro` 中的 `getCurrentInstance().router`,两者的属性一模一样。

```jsx
import { Current } from '@tarojs/taro'
import { getCurrentInstance } from '@tarojs/taro'
class C extends Component {
current = getCurrentInstance()

componentWillMount () {
// Current.router 和 this.$router 和属性一样
console.log(Current.router)
// getCurrentInstance().router 和 this.$router 和属性一样
console.log(this.current.router)
}
}

// 函数式组件
import { getCurrentInstance } from '@tarojs/taro'
function C () {
const router = Current.router
// Current.router 和 useRouter 返回的内容也一样
const { router } = getCurrentInstance()
// getCurrentInstance().router 和 useRouter 返回的内容也一样
// const router = useRouter()
}
```
Expand All @@ -216,7 +219,7 @@ class App extends Component {
}
```

> 聪明的读者已经猜到了,`Current.router` 其实是访问小程序当前页面 `onLoad` 生命周期参数的快捷方式。
> 聪明的读者已经猜到了,`getCurrentInstance().router` 其实是访问小程序当前页面 `onLoad` 生命周期参数的快捷方式。

## 样式

Expand Down Expand Up @@ -320,4 +323,4 @@ import { useState, useEffect } from 'react' // 框架 Hooks (基础 Hooks)

## $scope 和 $componentType

由于 Taro Next 没有自定义组件,所以也没有了 `this.$scope` 和 `this.$componentType` 的概念。`Current.page` 可以返回当前小程序页面的实例。
由于 Taro Next 没有自定义组件,所以也没有了 `this.$scope` 和 `this.$componentType` 的概念。`getCurrentInstance().page` 可以返回当前小程序页面的实例。
2 changes: 1 addition & 1 deletion docs/prerender.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ module.exports = config
// PageConfig 是开发者在 prerender.includes 配置的页面参数
interface PageConfig {
path: string // 页面路径
params: Record<string, unknown> // 页面的路由参数,对应 `Current.router.params`
params: Record<string, unknown> // 页面的路由参数,对应 `getCurrentInstance().router.params`
}

// DOM 树数据,Taro 通过遍历它动态渲染数据
Expand Down
16 changes: 8 additions & 8 deletions docs/react.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default {

> 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 `onLaunch`

在此生命周期中通过 `Current.router.params`,可以访问到程序初始化参数。
在此生命周期中通过 `getCurrentInstance().router.params`,可以访问到程序初始化参数。

#### componentWillMount()

Expand Down Expand Up @@ -96,15 +96,15 @@ export default {

#### componentDidMount()

页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。此生命周期可以无法访问 `Current.router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件,但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。
页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。此生命周期可以无法访问 `getCurrentInstance().router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件,但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。

#### componentDidShow(options)

> 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 `onShow`,在 H5/RN 中同步实现

程序启动,或从后台进入前台显示时触发,微信小程序中也可以使用 `Taro.onAppShow` 绑定监听

在此生命周期中通过 `Current.router.params`,可以访问到程序初始化参数。
在此生命周期中通过 `getCurrentInstance().router.params`,可以访问到程序初始化参数。

参数与 `componentWillMount` 中获取的基本一致,但**百度小程序**中补充两个参数如下

Expand Down Expand Up @@ -206,10 +206,10 @@ export default {
在可以非页面组件中,可以使用 Taro 内置的 [消息机制](./apis/about/events) 访问页面组件的 `onReady()` 生命周期:

```jsx
import { eventCenter, Current } from '@tarojs/taro'
import { eventCenter, getCurrentInstance } from '@tarojs/taro'
class Test extends React.Component {
componentDidMount () {
eventCenter.once(Current.router.onReady, () => {
eventCenter.once(getCurrentInstance().router.onReady, () => {
const query = Taro.createSelectorQuery()
query.select('#only').boundingClientRect()
query.exec(res => {
Expand All @@ -230,15 +230,15 @@ class Test extends React.Component {

#### onLoad(options)

页面创建时执行,此生命周期在小程序端对应小程序页面的 `onLoad` 生命周期。此生命周期可以访问 `Current.router`。
页面创建时执行,此生命周期在小程序端对应小程序页面的 `onLoad` 生命周期。此生命周期可以访问 `getCurrentInstance().router`。

#### componentWillMount()

页面加载时触发,一个页面只会调用一次,此时页面 DOM 尚未准备好,还不能和视图层进行交互

#### componentDidMount()

页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。此生命周期可以访问 `Current.router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件,但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。
页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。此生命周期可以访问 `getCurrentInstance().router`。此生命周期可以访问 Taro DOM 并且更改 DOM 或添加事件,但无法通过 `Taro.createSelectorQuery` 查找小程序 DOM。

#### shouldComponentUpdate(nextProps, nextState)

Expand All @@ -264,7 +264,7 @@ class Test extends React.Component {

页面隐藏/切入后台时触发, 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等

**在以上所有的生命周期方法中,都可以通过 `Current.router.params` 获取打开当前页面路径中的参数**。
**在以上所有的生命周期方法中,都可以通过 `getCurrentInstance().router.params` 获取打开当前页面路径中的参数**。

### 页面事件处理函数

Expand Down
8 changes: 4 additions & 4 deletions docs/router.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ Taro.navigateTo({

```

这样的话,在跳转成功的目标页的**生命周期**方法里就能通过 `Current.router.params` 获取到传入的参数,例如上述跳转,在目标页的 `componentWillMount`(或 Vue 的 `created`) 生命周期里获取入参:
这样的话,在跳转成功的目标页的**生命周期**方法里就能通过 `getCurrentInstance().router.params` 获取到传入的参数,例如上述跳转,在目标页的 `componentWillMount`(或 Vue 的 `created`) 生命周期里获取入参:

```jsx
import { Current } from '@tarojs/taro'
import { getCurrentInstance } from '@tarojs/taro'

class C extends Taro.Component {
componentWillMount () {
console.log(Current.router.params) // 输出 { id: 2, type: 'test' }
onReady () {
console.log(getCurrentInstance().router.params) // 输出 { id: 2, type: 'test' }
}
}
```
10 changes: 5 additions & 5 deletions docs/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default {

监听程序初始化,初始化完成时触发(全局只触发一次)

在此生命周期中通过 `Current.router.params`,可以访问到程序初始化参数
在此生命周期中通过 `getCurrentInstance().router.params`,可以访问到程序初始化参数

参数格式如下

Expand Down Expand Up @@ -177,11 +177,11 @@ export default {
<view id="only" />
</template>
<script>
import { eventCenter, Current } from '@tarojs/taro'
import { eventCenter, getCurrentInstance } from '@tarojs/taro'

export default {
mounted () {
eventCenter.once(Current.router.onReady, () => {
eventCenter.once(getCurrentInstance().router.onReady, () => {
const query = Taro.createSelectorQuery()
query.select('#only').boundingClientRect()
query.exec(res => {
Expand All @@ -196,7 +196,7 @@ export default {

#### onLoad(options)

页面创建时执行,此生命周期在小程序端对应小程序页面的 `onLoad` 生命周期。此生命周期可以访问 `Current.router`。
页面创建时执行,此生命周期在小程序端对应小程序页面的 `onLoad` 生命周期。此生命周期可以访问 `getCurrentInstance().router`。

#### created()

Expand Down Expand Up @@ -226,7 +226,7 @@ export default {

页面隐藏/切入后台时触发, 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等

**在以上所有的生命周期方法中,都可以通过 `Current.router` 获取打开当前页面路径中的参数**。
**在以上所有的生命周期方法中,都可以通过 `getCurrentInstance().router` 获取打开当前页面路径中的参数**。


### 页面事件处理函数
Expand Down