@nanxiaobei https://reactjs.org/docs/react-component.html#forceupdate 我说的是这个 forceUpdate ，不是 DOM 的 forceUpdate 哈。class component 的 forceUpdate 其实也只是跳过 shouldComponentUpdate ，所以你的 useRender 本质上就是让 React 知道 View 更新了。你用 class component 来做的话，都不需要什么 useRender 。

不过也对，函数式组件本来就是会重新跑一边，哪怕你就 setState 更新了其中一个 state. 我的点是，既然都这么用 React 了，那就不要 hooks 了，原来的 class component 兴许改造起来更顺手。

@nanxiaobei 你这就是 forceUpdate 呀，只不过 hooks 版本没有 forceUpdate 要借用 useState 返回函数的 update.

const createRiC = (factory)=>{
return class extends React.Component {
constructor (props) {
super(props);
this.__render = factory ({
update: this.forceUpdate.bind(this)
})
}

render() {
return this.__render();
}
}
}

const Demo = createRiC(({update})=>{
let count = 0;
const onClick = () => {
count++;
update();
};

return () => {
return (
<>
<h1>{count}</h1>
<button onClick={onClick}>Click me</button>
</>
);
});

魔改的话，这样也能跑，不必用 hooks 改呀

这样每次 render 都要手动 forceUpdate ，state 完全不归 React 管，那为什么还要基于 React 魔改？而且还是用 hooks 魔改。你用 class component 魔改起来也简单一点啊，毕竟 forceUpdate onMounted 都直接给你了，不用你绕弯用 useState useEffect 模拟。

额 getElementsByClassName 返回的是数组，改成 querySelector

document.querySelector('.readerFooter_button').dispatchEvent(clickEvent);

因为在事件处理中他判断了事件是否有 clientX，没有的话就不执行后续动作了。

```js
var clickEvent = document.createEvent('mouseevent');
clickEvent.initMouseEvent('click', true, false, window, null, 100, 100, 100, 100);
document.getElementsByClassName('readerFooter_button').dispatchEvent(clickEvent);
```

这样就好啦。

百度用了一个 label 当 fake placeholder 盖在了 input 上，label 的 for 属性指向 input，所以点击可以聚焦到 input 上。但是粘贴需要长按呼出上下文菜单，而 label 并没有把长按事件代理到 input 上的功能。所以长按不但没有弹出菜单，反而导致了 input 失焦。输入框有值后 label 被 js 隐藏，因此长按直接按到了 input 上。

感觉这个 fake placeholder 就是个遗留产物，移动端哪里需要你去 fake 占位字符，还整出 bug 来。

T extends P, 说明 T 类型 是 P 类型的一种，但是 T 类型可能比 P 类型存在更多的类型描述，即所谓 extends 的含义。Cat extends Animal, 但是 Cat 比 Animal 描述更确切，更具体。

@chnwillliu 好像回复错了。尴尬。。

@deathdealer 请继续关注(不要调台)

不需要 JS 判断啊，直接 CSS env 获取 safe-area 的边界。非要 JS 获取那你就 CSS 写 safe-area 的几个值到 root 节点上
然后 js 里 getComputedStyle / computedStyleMap 就能拿到这几个环境变量。

https://developer.mozilla.org/en-US/docs/Web/CSS/env()

@shakukansp blur 总是会优先于 click 触发的，所以 click 内部判断有无 blur 引起的 request 在 pending 就可以。

不知道你的 A 框中的值不同会不会影响 C 框得到不一样的结果，如果会的话，C 有值再 enable B 按钮这种方案还是有问题。

你这里的表单验证具体是什么操作？不应该是同步的操作么？

感觉不需要 Subject 吧。

A blur 会触发验证并发请求，这个就它自己管好自己就 OK 。B click 需要检测当前有无正在 pending 的 A blur 引起的请求，有则等待，无则直接做自己该做的事。

不追求完全函数编程，就可以把 A blur 发请求的 observable 用变量保存起来。

大概这个意思：

```
let pendingRequest = null;

inputABlur$
.pipe(
switchMap(() => {
pendingRequest = httpClient.get('/url', data).pipe(share());
return pendingRequest;
}),
finallize(() => {
pendingRequest = null;
})
)
.subscribe();


buttonBClick$
.pipe(
switchMap(value => {
if (pendingRequest) {
return pendingRequest.pipe(mapTo(value));
}
return of(value);
}),
switchMap(() => httpClient.get('/url-a-c', dataAC))
)
.subscribe();


```

负 margin 正解

@gggxxxx sign up 难道不是注册？ sign in 才是登入 /签入的意思

@iamwho sign in 和 sign up 弄反了吧？

自动分页的话 column 系列 CSS 属性就是专门用来控制文本流分列渲染的，你把容器的高度定为屏幕高度，设定每列宽度为屏幕宽度，让 column-count 自动计算就可以啦。只不过这个无法做到仿真翻页效果，因为你没法单独控制每一列的样式，这个列容器对 CSS 是透明的。

等 CSS Regions 草案有新进展后估计就比较轻松能实现了吧 https://caniuse.com/#feat=css-regions