react中用来计算最终state的算法原理 - 更新进行批处理
分类专栏: Javascript&
简介 这一天在学习react文档的时候, 记录下一系列state更新加入队列的知识。
<p>在学习文档过程中学习到react中的state是如何工作的。以及如何进行批量更新的;</p>
<p> </p>
<ul class="ml-6 my-3 list-disc" style="box-sizing: border-box; border: 0px solid #e5e7eb; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; list-style-position: initial; list-style-image: initial; margin-top: 0.75rem; margin-bottom: 0.75rem; margin-left: 1.5rem; color: #23272f; font-family: 'Optimistic Text', -apple-system, ui-sans-serif, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17px; background-color: #ffffff;">
<li class="leading-relaxed mb-1" style="box-sizing: border-box; border: 0px solid #e5e7eb; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; margin-bottom: 0.25rem; line-height: 1.625;">设置 state 不会更改现有渲染中的变量,但会请求一次新的渲染。</li>
<li class="leading-relaxed mb-1" style="box-sizing: border-box; border: 0px solid #e5e7eb; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; margin-bottom: 0.25rem; line-height: 1.625;">React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。</li>
<li class="leading-relaxed mb-1" style="box-sizing: border-box; border: 0px solid #e5e7eb; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; margin-bottom: 0.25rem; line-height: 1.625;">要在一个事件中多次更新某些 state,你可以使用 <code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px" style="box-sizing: border-box; border: 0px solid #e5e7eb; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: calc(1em - 20%); display: inline; border-radius: 0.375rem; --tw-bg-opacity: 0.1; background-color: rgb(153 161 179/var(--tw-bg-opacity)); padding: 1px 0.25rem; --tw-text-opacity: 1; color: rgb(64 71 86/var(--tw-text-opacity));">setNumber(n => n + 1)</code> 更新函数。</li>
</ul>
<p>在做到这个案例的时候让我实实在在了解到的运行机制;</p>
<pre class="language-javascript"><code>import { getFinalState } from './processQueue.js';
function increment(n) {
return n + 1;
}
increment.toString = () => 'n => n+1';
export default function App() {
return (
<>
<TestCase
baseState={0}
queue={[1, 1, 1]}
expected={1}
/>
<hr />
<TestCase
baseState={0}
queue={[
increment,
increment,
increment
]}
expected={3}
/>
<hr />
<TestCase
baseState={0}
queue={[
5,
increment,
]}
expected={6}
/>
<hr />
<TestCase
baseState={0}
queue={[
5,
increment,
42,
]}
expected={42}
/>
</>
);
}
function TestCase({
baseState,
queue,
expected
}) {
const actual = getFinalState(baseState, queue);
return (
<>
<p>初始 state:<b>{baseState}</b></p>
<p>队列:<b>[{queue.join(', ')}]</b></p>
<p>预期结果:<b>{expected}</b></p>
<p style={{
color: actual === expected ?
'green' :
'red'
}}>
你的结果:<b>{actual}</b>
{' '}
({actual === expected ?
'正确' :
'错误'
})
</p>
</>
);
}</code></pre>
<pre class="language-javascript"><code>export function getFinalState(baseState, queue) {
let finalState = baseState;
// TODO: 对队列做些什么...
for (let update of queue) {
if (typeof update === 'function') {
// TODO: 调用更新函数
finalState = update(finalState);
} else {
// TODO: 替换 state
finalState = update;
}
}
return finalState;
}
</code></pre>
<p>getFinalState函数中其实就是useState()函数的执行概念;</p>
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1248天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据