setState回调函数触发时机？

[ykforerlang]

问题描述
setState 回调发生的时候，感觉小程序的渲染并没有完成

示例代码
this.setState({}, () => {
console.log(' 按说调用这里的时候，渲染是完成的')
})

其他信息
如果回调函数不是渲染完成之后调用，那我要如何知道渲染完成了呢 ❓ 求教

[Darmody]

remax 目前算是异步渲染的，所以 setState callback 执行时，小程序渲染并不一定完成了。

现在 setState 之后，还无法知道渲染是否完成。

[ykforerlang]

@Darmody 好的，明白了，我是想看一下组件的 渲染时长，发现 setState / didUpdate 并不准确。:smile::smile::smile:

[Darmody]

import { act } from 'remax';

...

const [foo, setFoo] = useState();

act(() => {
setFoo();
setFoo();
...
}, () => {
// setFoo() 执行两次后真正触发 setData 后的 callback
})

@yesmeck 通过这种方法告诉开发者 setState 后 dom 真正生效的时机。

[yesmeck]

act 跟 React 提供那个容易混淆。

[Darmody]

import { onRenderEffect } from 'remax';

...

const [foo, setFoo] = useState();

onRenderEffect(() => {
setFoo();
setFoo();
...
}, () => {
// setFoo() 执行两次后真正触发 setData 后的 callback
})

// Or
await onRenderEffect(() => {
setFoo();
setFoo();
})

[Darmody]

还可以直接提供一个 callback 正确的 setState，

import { useState } from 'remax'

[yesmeck]

这个还是容易混淆

[Darmody]

还可以直接提供一个 callback 正确的 setState，

import { useState } from 'remax'

那这个不要了

[Darmody]

还可以直接提供一个 callback 正确的 setState，

import { useState } from 'remax'

思路错了，应该是提供一个 remax 版的 useEffect，容易混淆的话，可以名字改一下，也可以放在 remax-hooks 里面

[Darmody]

提供一个 useRenderEffect hook 好了

[yesmeck]

class 组件呢？

[Darmody]

class 组件呢？

class 就用 onRenderEffect

[yesmeck]

如果子组件状态更新，要不要触发父组件的 useRenderEffect ?

[Darmody]

如果子组件状态更新，要不要触发父组件的 useRenderEffect ?

按我们的实现来看，应该是都会触发的？

[Darmody]

可以和 useEffect 一样，控制触发条件

[yesmeck]

const [count, setCount] = useState(0);
const requestUpdateCallback = useUpdate();

const handleClick = () => {
  setCount(count + 1);
  requestUpdateCallback(() => console.log('updated'));
}

大概要搞成这个样子，再想想。

[Darmody]

const [count, setCount] = useState(0);
const requestUpdateCallback = useUpdate();

const handleClick = () => {
  setCount(count + 1);
  requestUpdateCallback(() => console.log(updated));
}

大概要搞成这个样子，再想想。

这个有点像 nextTick