https://cubegao.com/tags/buildcontext/ Recent content in BuildContext on cubegao Hugo zh-CN Thu, 11 Mar 2021 16:55:00 +0800 https://cubegao.com/post/2021-03-11-buildcontext/ Thu, 11 Mar 2021 16:55:00 +0800 https://cubegao.com/post/2021-03-11-buildcontext/ <h3 id="前言">前言</h3> <p>首先我们看看官方的定义：</p> <blockquote> <p>[BuildContext] objects are actually [Element] objects. The [BuildContext] interface is used to discourage direct manipulation of [Element] objects. [BuildContext] 对象实际上是 [Element] 对象。 [BuildContext] 接口用于阻止直接操作 [Element] 对象。</p></blockquote> <p>根据官方这段注释，可以了解到<code>BuildContext</code> 实际上就是 <code>Element</code> 对象，产生的意义主要是为了防止开发者直接操作 <code>Element</code> 对象。</p> <h3 id="如何使用buildcontext">如何使用BuildContext</h3> <p>写一段大家很熟悉的代码</p> <div class="goat svg-container "> <svg xmlns="http://www.w3.org/2000/svg" font-family="Menlo,Lucida Console,monospace" viewBox="0 0 408 153" > <g transform='translate(8,16)'> <polygon points='24.000000,48.000000 12.000000,42.400002 12.000000,53.599998' fill='currentColor' transform='rotate(90.000000, 16.000000, 48.000000)'></polygon> <text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>c</text> <text text-anchor='middle' x='0' y='132' fill='currentColor' style='font-size:1em'>}</text> <text text-anchor='middle' x='8' y='4' fill='currentColor' style='font-size:1em'>l</text> <text text-anchor='middle' x='16' y='4' fill='currentColor' style='font-size:1em'>a</text> <text text-anchor='middle' x='16' y='20' fill='currentColor' style='font-size:1em'>i</text> <text text-anchor='middle' x='16' y='116' fill='currentColor' style='font-size:1em'>}</text> <text text-anchor='middle' x='24' y='4' fill='currentColor' style='font-size:1em'>s</text> <text text-anchor='middle' x='24' y='20' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='24' y='52' fill='currentColor' style='font-size:1em'>o</text> <text text-anchor='middle' x='32' y='4' fill='currentColor' style='font-size:1em'>s</text> <text text-anchor='middle' x='32' y='20' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='32' y='52' fill='currentColor' style='font-size:1em'>i</text> <text text-anchor='middle' x='32' y='68' fill='currentColor' style='font-size:1em'>s</text> <text text-anchor='middle' x='32' y='100' fill='currentColor' style='font-size:1em'>}</text> <text text-anchor='middle' x='40' y='52' fill='currentColor' style='font-size:1em'>d</text> <text text-anchor='middle' x='40' y='68' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='40' y='100' fill='currentColor' style='font-size:1em'>)</text> <text text-anchor='middle' x='48' y='4' fill='currentColor' style='font-size:1em'>_</text> <text text-anchor='middle' x='48' y='20' fill='currentColor' style='font-size:1em'>_</text> <text text-anchor='middle' x='48' y='68' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='48' y='84' fill='currentColor' style='font-size:1em'>_</text> <text text-anchor='middle' x='48' y='100' fill='currentColor' style='font-size:1em'>;</text> <text text-anchor='middle' x='56' y='4' fill='currentColor' style='font-size:1em'>M</text> <text text-anchor='middle' x='56' y='20' fill='currentColor' style='font-size:1em'>c</text> <text text-anchor='middle' x='56' y='52' fill='currentColor' style='font-size:1em'>_</text> <text text-anchor='middle' x='56' y='68' fill='currentColor' style='font-size:1em'>S</text> <text text-anchor='middle' x='56' y='84' fill='currentColor' style='font-size:1em'>c</text> <text text-anchor='middle' x='64' y='4' fill='currentColor' style='font-size:1em'>y</text> <text text-anchor='middle' x='64' y='20' fill='currentColor' style='font-size:1em'>o</text> <text text-anchor='middle' x='64' y='52' fill='currentColor' style='font-size:1em'>i</text> <text text-anchor='middle' x='64' y='68' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='64' y='84' fill='currentColor' style='font-size:1em'>o</text> <text text-anchor='middle' x='72' y='4' fill='currentColor' style='font-size:1em'>H</text> <text text-anchor='middle' x='72' y='20' fill='currentColor' style='font-size:1em'>u</text> <text text-anchor='middle' x='72' y='52' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='72' y='68' fill='currentColor' style='font-size:1em'>a</text> <text text-anchor='middle' x='72' y='84' fill='currentColor' style='font-size:1em'>u</text> <text text-anchor='middle' x='80' y='4' fill='currentColor' style='font-size:1em'>o</text> <text text-anchor='middle' x='80' y='20' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='80' y='52' fill='currentColor' style='font-size:1em'>c</text> <text text-anchor='middle' x='80' y='68' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='80' y='84' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='88' y='4' fill='currentColor' style='font-size:1em'>m</text> <text text-anchor='middle' x='88' y='20' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='88' y='52' fill='currentColor' style='font-size:1em'>r</text> <text text-anchor='middle' x='88' y='68' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='88' y='84' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='96' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='96' y='20' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='96' y='52' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='96' y='68' fill='currentColor' style='font-size:1em'>(</text> <text text-anchor='middle' x='96' y='84' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='104' y='4' fill='currentColor' style='font-size:1em'>P</text> <text text-anchor='middle' x='104' y='20' fill='currentColor' style='font-size:1em'>r</text> <text text-anchor='middle' x='104' y='52' fill='currentColor' style='font-size:1em'>m</text> <text text-anchor='middle' x='104' y='68' fill='currentColor' style='font-size:1em'>(</text> <text text-anchor='middle' x='104' y='84' fill='currentColor' style='font-size:1em'>r</text> <text text-anchor='middle' x='112' y='4' fill='currentColor' style='font-size:1em'>a</text> <text text-anchor='middle' x='112' y='52' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='112' y='68' fill='currentColor' style='font-size:1em'>)</text> <text text-anchor='middle' x='112' y='84' fill='currentColor' style='font-size:1em'>+</text> <text text-anchor='middle' x='120' y='4' fill='currentColor' style='font-size:1em'>g</text> <text text-anchor='middle' x='120' y='20' fill='currentColor' style='font-size:1em'>=</text> <text text-anchor='middle' x='120' y='52' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='120' y='84' fill='currentColor' style='font-size:1em'>+</text> <text text-anchor='middle' x='128' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='128' y='52' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='128' y='68' fill='currentColor' style='font-size:1em'>{</text> <text text-anchor='middle' x='128' y='84' fill='currentColor' style='font-size:1em'>;</text> <text text-anchor='middle' x='136' y='4' fill='currentColor' style='font-size:1em'>S</text> <text text-anchor='middle' x='136' y='20' fill='currentColor' style='font-size:1em'>0</text> <text text-anchor='middle' x='136' y='52' fill='currentColor' style='font-size:1em'>C</text> <text text-anchor='middle' x='144' y='4' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='144' y='20' fill='currentColor' style='font-size:1em'>;</text> <text text-anchor='middle' x='144' y='52' fill='currentColor' style='font-size:1em'>o</text> <text text-anchor='middle' x='152' y='4' fill='currentColor' style='font-size:1em'>a</text> <text text-anchor='middle' x='152' y='52' fill='currentColor' style='font-size:1em'>u</text> <text text-anchor='middle' x='160' y='4' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='160' y='52' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='168' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='168' y='52' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='176' y='52' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='184' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='184' y='52' fill='currentColor' style='font-size:1em'>r</text> <text text-anchor='middle' x='192' y='4' fill='currentColor' style='font-size:1em'>x</text> <text text-anchor='middle' x='192' y='52' fill='currentColor' style='font-size:1em'>(</text> <text text-anchor='middle' x='200' y='4' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='200' y='52' fill='currentColor' style='font-size:1em'>)</text> <text text-anchor='middle' x='208' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='216' y='4' fill='currentColor' style='font-size:1em'>n</text> <text text-anchor='middle' x='216' y='52' fill='currentColor' style='font-size:1em'>{</text> <text text-anchor='middle' x='224' y='4' fill='currentColor' style='font-size:1em'>d</text> <text text-anchor='middle' x='232' y='4' fill='currentColor' style='font-size:1em'>s</text> <text text-anchor='middle' x='248' y='4' fill='currentColor' style='font-size:1em'>S</text> <text text-anchor='middle' x='256' y='4' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='264' y='4' fill='currentColor' style='font-size:1em'>a</text> <text text-anchor='middle' x='272' y='4' fill='currentColor' style='font-size:1em'>t</text> <text text-anchor='middle' x='280' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='288' y='4' fill='currentColor' style='font-size:1em'>&lt;</text> <text text-anchor='middle' x='296' y='4' fill='currentColor' style='font-size:1em'>M</text> <text text-anchor='middle' x='304' y='4' fill='currentColor' style='font-size:1em'>y</text> <text text-anchor='middle' x='312' y='4' fill='currentColor' style='font-size:1em'>H</text> <text text-anchor='middle' x='320' y='4' fill='currentColor' style='font-size:1em'>o</text> <text text-anchor='middle' x='328' y='4' fill='currentColor' style='font-size:1em'>m</text> <text text-anchor='middle' x='336' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='344' y='4' fill='currentColor' style='font-size:1em'>P</text> <text text-anchor='middle' x='352' y='4' fill='currentColor' style='font-size:1em'>a</text> <text text-anchor='middle' x='360' y='4' fill='currentColor' style='font-size:1em'>g</text> <text text-anchor='middle' x='368' y='4' fill='currentColor' style='font-size:1em'>e</text> <text text-anchor='middle' x='376' y='4' fill='currentColor' style='font-size:1em'>&gt;</text> <text text-anchor='middle' x='392' y='4' fill='currentColor' style='font-size:1em'>{</text> </g> </svg> </div> <blockquote> <p>这里有同学好奇，<code>_counter++;</code>不写在<code>setState</code>的回调方法里可以生效吗？答案是可以的。但是我更推荐把和状态更新相关的操作，放在回调里面。这样更加的工程化管理。因为一个项目经过长时期的更新，你可能无法分清，这个方法里面的<code>setState</code>,是不是实际上起作用了，会造成代码冗余。</p>