Comments (7)
你在run函数加一个log 函数看看 渲染触发原因,然后再报告给我看下log 记录
run( {}, {
middlewares:[(stateInfo, next)=>{
console.warn(stateInfo);
next();
}],
});
from helux.
对了,最新的react提供了 React.StrictMode 组件来包装根组件,然后触发双调用来故意触发两次渲染,以便排除一些渲染过程中书写了副作用代码导致的bug,该特性仅在开发模式有效,生产模式会关闭,更多信息可参考:
http://react.html.cn/docs/strict-mode.html
https://frontarm.com/daishi-kato/use-ref-in-concurrent-mode/
你可以写个普通组件测试一下,就明白原因了
btw,提几个优化点😀
1 源头处也支持触发lazy,这样就可以不用再reducer里写lazy了
https://github.com/henryzp/concent-test-demo/blob/master/src/pages/tihai/index.tsx
changeTab: (key: string) => ctx.mr.changeTab(key),
// 可改为
changeTab: (key: string) => ctx.mr.changeTab(key, {lazy:true}),
2 可以写个setState,替代无逻辑的reducer函数
export function changeActiveTabKey(key: string) {
return {
activeTabKey: key,
};
}
export function setModalVisible(visible: boolean) {
return {
modalVisible: visible,
};
}
// 可改为
export function setState(partialState){
return partialState;
}
from helux.
from helux.
@fantasticsoul ,hi,你的建议很棒,非常感谢。。
不过上面说的问题,还是没有排查出来原因。。。你方便代码clone下来,跑一下么?我是把公司的那个项目给最小化精简了,然后用了umi3的脚手架,启动是没有问题的
from helux.
我测了下,umi没有使用StrictMode
,你提到的问题原因已找到
concent本身是精确通知到位了的,这里的两次渲染时react组件自上而下株连式的渲染导致的,你只需要包装React.memo
即可
export default React.memo(() => {
console.log('2222222222');
// your code
});
from helux.
@fantasticsoul ,没有明白react组件自上而下株连式的渲染。。能详细说一下么?或者给个资料也行。。。
from helux.
@fantasticsoul ,没有明白react组件自上而下株连式的渲染。。能详细说一下么?或者给个资料也行。。。
React的渲染时自顶向下的
<A><B><C/></B></A>
如果A触发渲染了,没有优化机制的话默认会把他所有的孩子跟着一起渲染,所以才让你包一个memo
from helux.
Related Issues (20)
- [RFC] 提供启用/禁用派出计算的API` enableMutates(true/false)` HOT 4
- TypeError: Cannot destructure property 'STATE_SHARED_KEY_MAP' of 't' as it is undefined. HOT 1
- [BUG] 对share对象的一部分进行 useAtom 访问时,出现意外行为 HOT 2
- [Feature] lifecycle HOT 2
- [Optimize] merge triggered non-first-level watch if they have same fnKey HOT 1
- derive 提示用户依赖需提前声明,否则会照成依赖丢失 HOT 2
- derive 派生函数如何捕获状态中可选链的依赖问题(How does the derived function capture the dependency problem of optional chaining in the state?) HOT 1
- [FEATURE] 开发一个跟踪调试插件 HOT 1
- 是否能提供 Perf Benchmark 测试报告? HOT 1
- [❤️ Sponsor] 小小鼓励,给予开发者更多动力
- [Feature] useLocalAtom
- [RoadMap] helux-2024 roadmap
- [FEATURE] 为`runMutateTask`提供入参`extraArgs`来传递给`mutate`的`task` HOT 1
- 无法控制布尔Boolean的展示 HOT 1
- [question] stopArrDep 具体行为 HOT 2
- sharex文档页访问404
- share 通过ctx调用setState 操作数组新增删除操作数组数据依赖收集无效 HOT 3
- 是否可以添加销毁mutate功能 HOT 3
- error only-dev-mode tip: moduleName AuthWithModule@Loading duplicate! HOT 1
- [提示] 关于死循环检测 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from helux.