我正在学习ReactJS并尝试在其上构建一些应用程序.
当我试图修改我的状态并进行渲染时,我的页面会冻结,并且在我的组件变得庞大时渲染完成之前无法执行任何操作.
我发现我可以shouldComponentUpdate用来优化我的代码,但问题是:我能否使这个渲染过程无阻塞？所以我可以告诉用户该页面正在处理一些繁重的加载执行,请等待或者显示执行的进度？或者,如果用户可以取消渲染,例如,对于实时编辑器,如果用户编辑编辑器的内容,"预览"部分将停止渲染旧内容并尝试渲染新内容而不阻止编辑器UI？
这是重载示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var Box = React.createClass({
render: function() {
return (
<div>Box</div>
);
}
});
var CommentBox = React.createClass({
getInitialState: function() {
return {box_count: 5};
},
heavyLoadRender: function() {
this.setState({box_count: 40000});
},
render: function() {
var render_box = [];
for (var i=0; i<this.state.box_count; i++) {
render_box.push(<Box />);
}
return (
<div>
{render_box}
<button …我有一个带有粘性左右列的 CSS 网格，如下所示：
.grid {
display: grid;
grid-template-columns: repeat(10, 200px);
}
.grid > div {
border: 1px solid black;
background-color: white;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-right {
position: sticky;
right: 0;
}<div class="grid">
<div class="sticky-left">Sticky Left</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div class="sticky-right">Sticky right</div>
</div>右列按预期工作：始终显示在右侧。
然而，左列的行为很奇怪：它会在大约 50% 网格宽度后向左滚动，这不是预期的结果。如果我想让左栏粘在左侧而不是滚动，该怎么办？