【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解

本站文章均为李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】原文链接: @L_502_1@
开发过游戏的都应该很清楚，“刷屏”是多么的重要。其实开发应用也如此，当组件的数据被修改后，如何及时更新组件呈现出最新的数据与效果一样至关重要。
那么这里Himi大概讲三种常用的方式：
this.setState() 【最为常用】
这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。
一般情况下setState() 总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。
举例、代码段如下：
 
   @H_<a href="/tag/301/" target="_blank" class="keywords">301</a>_41@ 
  </div> 
  <div class="crayon-main" style="margin: 0px; padding: 0px; border: 0px;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; width: 868px; overflow: hidden; position: relative; z-index: 1; background-position: 0px 50%;"> 
   <table class="crayon-table " style="margin-left: 0px; font-size: 12px; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em; vertical-align: top; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; padding: 0px !important; border: none !important; border-collapse: collapse !important; border-spacing: 0px !important; background-image: none !important; width: auto !important; table-layout: auto !important;"> 
    <tbody style="margin: 0px; padding: 0px; border: 0px;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit;"> 
     <tr class="crayon-row" style="font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; margin: 0px !important; padding: 0px !important; border: none !important; vertical-align: top !important; background-position: 0px 50%;"> 
      <td class="crayon-nums " data-settings="show" style="font-size: 17px; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em; margin: 0px !important; padding: 0px !important; border: none !important; font-family: Monaco,monospace !important; vertical-align: top !important; background-color: rgb(223,239,255) !important; color: rgb(84,222) !important;"> 
       <div class="crayon-nums-content" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; white-space: nowrap; font-size: 12px !important; line-height: 15px !important; background-position: 0px 50%;"> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-1" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          1 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-2" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,225,250) !important; color: rgb(49,124,197) !important;">
          2 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-3" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          3 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-4" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          4 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-5" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          5 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-6" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          6 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-7" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          7 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-8" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          8 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-9" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          9 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-10" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          10 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-11" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          11 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-12" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          12 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-13" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          13 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-14" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          14 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-15" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          15 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-16" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          16 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-17" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          17 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-18" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          18 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-19" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          19 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-20" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          20 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-21" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          21 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-22" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          22 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-23" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          23 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-24" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          24 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bac1094917644-25" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          25 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bac1094917644-26" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          26 
        </div> 
       </div></td> 
      <td class="crayon-code" style="font-size: 17px; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em; width: 843px; margin: 0px !important; padding: 0px !important; border: none !important; font-family: Monaco,monospace !important; vertical-align: top !important; background-position: 0px 50%;"> 
       <div class="crayon-pre" style="margin: 0px; padding: 0px; font-style: inherit; font-variant-caps: inherit; white-space: pre; overflow: visible; tab-size: 4; border: none !important; font-size: 12px !important; line-height: 15px !important; background-image: none !important;"> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-1" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-r" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(128,128) !important;">constructor</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">(</span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,45,122) !important;">props</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">)</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,111,224) !important;"> </span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">{</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-2" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,247,247) !important;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
         <span class="crayon-r" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(128,128) !important;">super</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">)</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">;</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-3" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,128) !important;">this</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">.</span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,122) !important;">state</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">=</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">{</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-4" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"></span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,122) !important;">myName</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">:</span> 
         <span class="crayon-s" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,128,0) !important;">'I am MyName!'</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">,</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-5" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">}</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">;</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-6" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,247) !important;">
           
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-7" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">}</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-8" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,247) !important;">
           
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-9" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,78,208) !important;">testFun</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">(</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">{</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-10" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"></span> 
         <span class="crayon-r" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(128,51) !important;">.</span> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;">setState</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">{</span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,0) !important;">'组件被刷新了'</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">;</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-11" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">}</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-12" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,247) !important;">
           
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-13" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
           
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-14" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,247) !important;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;">render</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">{</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-15" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"></span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">.</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">.</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-16" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"></span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"><</span> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;">TouchableHighlight </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-17" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;"></span> 
         <span class="crayon-e " style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;">underlayColor</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">=</span> 
         <span class="crayon-s" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,0) !important;">'#4169e1'</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-18" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,122) !important;">onPress</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">=</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">{</span> 
         <span class="crayon-r" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(128,122) !important;">testFun</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,208) !important;">bind</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">(</span> 
         <span class="crayon-r" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(128,51) !important;">}</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"></span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-19" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">></span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-20" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"><</span> 
         <span class="crayon-r" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(128,128) !important;">Image</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-21" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,122) !important;">source</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">{</span> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;">require</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">(</span> 
         <span class="crayon-s" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,0) !important;">'./res/himi.png'</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,224) !important;"> </span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-22" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,122) !important;">style</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">{</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,122) !important;">width</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">:</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
         <span class="crayon-cn" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(206,0) !important;">70</span> 
         <span class="<a href="/tag/Crayon/" target="_blank" class="keywords">Crayon</a>-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,</span> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,122) !important;">height</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-23" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">/</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">></span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-24" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"><</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">/</span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,122) !important;">TouchableHighlight</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">></span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bac1094917644-25" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">.</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bac1094917644-26" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,51) !important;">}</span> 
        </div> 
       </div></td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
 </div> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">1. 在this.state中<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>了一个 字符串变量 myName 用于Text 组件的<a href="/tag/wenzi/" target="_blank" class="keywords">文字</a><a href="/tag/xianshi/" target="_blank" class="keywords">显示</a></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">2. <a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>了一个 testFun <a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，用于 Touchable的回调处理，其中<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>了this.setState <a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>并<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>了myName的数据</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">3. 在render中<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>了一个高亮触摸组件，用于演示<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><span style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; color: rgb(255,0);">【注】假如有 a、b、c三个组件，b是 a的子组件，c是 b的子组件，那么 b中 setState 之后，b和 c会 rerender，而 a不会。因此建议大家可以把每个组件提供一个重绘接口，然后提供给其他组件<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>。</span></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下：（点击查看动态<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>）</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><a target="_blank" href="javascript:void()" class="outlink" data="/link?url=http://www.himigame.com/wp-content/uploads/2016/05/user12.gif" class="highslide-image" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; color: rgb(97,140); cursor: url(http://www.himigame.com/wp-content/plugins/auto-highslide/highslide/graphics/zoomin.cur),pointer; outline: none; text-decoration: none;" rel="nofollow"></a></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><span style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; color: rgb(255,0);">2. this.forceUpdate() 【较为常用，但是不推荐】</span></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">如果 render() <a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>从 this.props 或者 this.state 之外的地方读取数据，你需要通过<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a> forceUpdate() 告诉 React 什么时候需要再次运行 render()。如果直接改变了 this.state，也需要<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a> forceUpdate()。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a> forceUpdate() 将会导致 render() <a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>在相应的组件上被<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>，并且子级组件也会<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>自己的 render()，但是如果<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>改变了，那么 React 仅会更新 DOM。通常情况下，应该尽量避免所有使用 forceUpdate() 的情况，在 render() 中仅从 this.props 和 this.state 中读取数据。这会使应用大大简化，并且更加高效。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">举例、在上面的示例<a href="/tag/daima/" target="_blank" class="keywords">代码</a>基础上<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>，如下：</p> 
 <div id="crayon-5735a0d35bad6561963038" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px 0px; padding: 0px; font-family: Monaco,0); width: 868px; overflow: hidden; margin: 0px; height: 450px; position: absolute; opacity: 0; box-shadow: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-box-shadow: none; white-space: pre; word-wrap: normal; resize: none; tab-size: 4; z-index: 0; font-size: 12px !important; line-height: 15px !important; font-family: Monaco,222) !important;"> 
       <div class="crayon-nums-content" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; white-space: nowrap; font-size: 12px !important; line-height: 15px !important; background-position: 0px 50%;"> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-1" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          1 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-2" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          2 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-3" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          3 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-4" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          4 
        </div> 
        @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_357@
          5 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-6" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          6 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-7" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          7 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-8" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          8 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-9" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          9 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-10" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          10 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-11" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          11 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-12" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          12 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-13" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          13 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-14" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          14 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-15" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          15 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-16" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          16 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-17" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          17 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-18" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          18 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-19" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          19 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-20" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          20 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-21" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          21 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-22" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          22 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-23" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          23 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-24" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          24 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-25" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          25 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-26" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          26 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-27" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          27 
        </div> 
        @H_585_<a href="/tag/403/" target="_blank" class="keywords">403</a>@
          28 
        </div> 
        <div class="crayon-num" data-line="crayon-5735a0d35bad6561963038-29" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
          29 
        </div> 
        <div class="crayon-num crayon-striped-num" data-line="crayon-5735a0d35bad6561963038-30" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; text-align: center; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(200,197) !important;">
          30 
        </div> 
       </div></td> 
      <td class="crayon-code" style="font-size: 17px; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em; width: 843px; margin: 0px !important; padding: 0px !important; border: none !important; font-family: Monaco,monospace !important; vertical-align: top !important; background-position: 0px 50%;"> 
       <div class="crayon-pre" style="margin: 0px; padding: 0px; font-style: inherit; font-variant-caps: inherit; white-space: pre; overflow: visible; tab-size: 4; border: none !important; font-size: 12px !important; line-height: 15px !important; background-image: none !important;"> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-1" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"></span> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">{</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-2" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,122) !important;">state</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">;</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-3" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">}</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-4" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,208) !important;">testForceFun</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">{</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-5" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;">forceUpdate</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,51) !important;">;</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-6" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,51) !important;">}</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-7" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;">
           
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-8" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,51) !important;">{</span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-9" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">.</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-10" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,208) !important;">TouchableHighlight </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-11" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,208) !important;"></span> 
         <span class="crayon-v" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,122) !important;">underlayColor</span> 
         <span class="crayon-o" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,0) !important;">'#4169e1'</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-12" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"></span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-13" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-14" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,208) !important;">Image </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-15" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-16" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;"> </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-17" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">></span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-18" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;">></span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-19" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"></span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-20" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,208) !important;">TouchableHighlight </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-21" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,0) !important;">'#4169e1'</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-22" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,122) !important;">testForceFun</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,224) !important;"></span> 
        </div> 
        @H_133_<a href="/tag/502/" target="_blank" class="keywords">502</a>@ 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-24" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,208) !important;">Image </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-25" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-e" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;"> </span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-26" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,0) !important;">40</span> 
         <span class="crayon-sy" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(51,224) !important;"> </span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-27" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,224) !important;">></span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-28" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,224) !important;">></span> 
        </div> 
        <div class="crayon-line" id="crayon-5735a0d35bad6561963038-29" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-position: 0px 50%;"> 
         <span class="crayon-h" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; color: rgb(0,51) !important;">.</span> 
        </div> 
        <div class="crayon-line crayon-striped-line" id="crayon-5735a0d35bad6561963038-30" style="margin: 0px; padding: 0px 5px; border: 0px; font-style: inherit; font-variant-caps: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; background-color: rgb(247,247) !important;">
          ｝ 
        </div> 
       </div></td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
 </div> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">改动说明：</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">a) <a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>testFun <a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，让其作用只是<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>了myName 的值，并没有setState！所以不重绘</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">b) <a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>testForceFun <a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，作用是<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>强制重绘<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">c) render中多加了一个按钮，来触发testForceFun<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">运行<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图如下：（<span style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; color: rgb(255,0);">注意 testForceFun <a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>对应的是<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>较小的那个哦～</span>）</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><a target="_blank" href="javascript:void()" class="outlink" data="/link?url=http://www.himigame.com/wp-content/uploads/2016/05/user13.gif" class="highslide-image" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; color: rgb(97,pointer; outline: none; text-decoration: none;" rel="nofollow"></a></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">通过示意图可以知道，Himi <a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>了testFun、接着<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>testForceFun ，才能看到刷新。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;"><span style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; color: rgb(255,0);">    3. this.setProps()  【不常用】</span></p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">同一个节点上再次<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a><code style="margin: 0px; padding: 10px; border-width: 0px 0px 0px 10px; border-left-style: solid; border-color: rgba(97,140,0.0980392); font-family: Monaco,Consolas,'Andale Mono','DejaVu Sans Mono',monospace; font-size: 14px; font-style: inherit; font-variant-caps: inherit; line-height: 1.5; overflow: auto; white-space: nowrap; display: inline-block; background-color: rgb(239,240,236);">React.render()</code>来更新根组件是首选的方式，也可以<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a><code style="margin: 0px; padding: 10px; border-width: 0px 0px 0px 10px; border-left-style: solid; border-color: rgba(97,236);">setProps()</code>来改变组件的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>，触发一次重新渲染。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">但是！此<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>仅在根组件上面<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>。也就是说，仅在直接传给 React.render() 的组件上可用，在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps()，不要利用响应式更新，而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。</p> 
 <p style="margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant-caps: inherit; line-height: 1.7em;">说的通俗一点：父组件不能直接<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a> prop<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>，只能<a href="/tag/fulei/" target="_blank" class="keywords">父类</a>在使用传入的时候进行设置。</p> 
</div></div>
      <div class="topcard-tags"></div>
      
                 <ul class="list-group">
        <li class="list-group-item"><a href="/react/306783.html" title="【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础">上一篇：【REACT NATIVE 系列教程之三】函数</a><a href="/react/306781.html" title="React.js中的表单" class="text-muted pull-right">下一篇：React.js中的表单</a>
    
    </li>
    </ul>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="9144498553"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
            </div>
          </div>

          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                  
    <div class="title"><h1>猜你在找的React相关文章</h1></div>
<div class="list_con">
                                    <a href="/react/997385.html" title="react使用moment进行日期格式化"><div class="title">react使用moment进行日期格式化</div>
                                <div class="summary">导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-16</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/994613.html" title="推荐使用并手写实现redux-actions原理"><img class="lazy" src="/images/np.jpg" data-original="/res/2020/12-30/08/4f7f9231c6b21516dec3d6e9fcc7fd89.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">推荐使用并手写实现redux-actions原理</div>
                                <div class="summary">@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...</div>
                                <time class="summary">作者：前端之家 时间：2020-12-30</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/994612.html" title="【译】值得推荐的十大React Hook 库"><div class="title">【译】值得推荐的十大React Hook 库</div>
                                <div class="summary">十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...</div>
                                <time class="summary">作者：前端之家 时间：2020-12-30</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/993102.html" title="React生命周期"><div class="title">React生命周期</div>
                                <div class="summary">React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...</div>
                                <time class="summary">作者：前端之家 时间：2020-12-19</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/993101.html" title="React虚拟DOM的理解"><div class="title">React虚拟DOM的理解</div>
                                <div class="summary">React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...</div>
                                <time class="summary">作者：前端之家 时间：2020-12-19</time>
                                </a>
                            </div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-fr-2o+fp-dx-wx"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="4561116489"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="list_con">
                                    <a href="/react/990476.html" title="使用react-native-vector-icons（RN0.6+）"><img class="lazy" src="/images/np.jpg" data-original="/res/2020/12-02/18/51e409b11aa51c150090697429a953ed.gif" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">使用react-native-vector-icons（RN0.6+）</div>
                                <div class="summary">1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...</div>
                                <time class="summary">作者：前端之家 时间：2020-12-02</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/881439.html" title="React中的Props, State 与 render 函数"><div class="title">React中的Props, State 与 render 函数</div>
                                <div class="summary">React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...</div>
                                <time class="summary">作者：前端之家 时间：2020-11-07</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/881438.html" title="React开发环境准备"><div class="title">React开发环境准备</div>
                                <div class="summary">react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...</div>
                                <time class="summary">作者：前端之家 时间：2020-11-07</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/881437.html" title="React组件拆分与传值"><div class="title">React组件拆分与传值</div>
                                <div class="summary">组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...</div>
                                <time class="summary">作者：前端之家 时间：2020-11-07</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/react/881436.html" title="React组件的简单演示"><div class="title">React组件的简单演示</div>
                                <div class="summary">src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...</div>
                                <time class="summary">作者：前端之家 时间：2020-11-07</time>
                                </a>
                            </div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-fr-2o+fp-dx-wx"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="4561116489"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
            </div>
          </div>
        </div>
        <!-- left end-->
        
        <!-- right -->
        <div class="col-sm-12 col-md-12 col-lg-3">
          <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">编程分类</label>
                <div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- row end -->
         <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card"> 
<!-- f2er-rightads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="7756441254"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">最新文章</label>
                <ul class="n-list"><li><a href="/react/997385.html" title="react使用moment进行日期格式化" target="_blank">• react使用moment进行日期格</a></li>
<li><a href="/react/994613.html" title="推荐使用并手写实现redux-actions原理" target="_blank">• 推荐使用并手写实现redux-</a></li>
<li><a href="/react/994612.html" title="【译】值得推荐的十大React Hook 库" target="_blank">• 【译】值得推荐的十大Reac</a></li>
<li><a href="/react/993102.html" title="React生命周期" target="_blank">• React生命周期</a></li>
<li><a href="/react/993101.html" title="React虚拟DOM的理解" target="_blank">• React虚拟DOM的理解</a></li>
<li><a href="/react/993100.html" title="React中JSX的理解" target="_blank">• React中JSX的理解</a></li>
<li><a href="/react/990476.html" title="使用react-native-vector-icons（RN0.6+）" target="_blank">• 使用react-native-vector-</a></li>
<li><a href="/react/881439.html" title="React中的Props, State 与 render 函数" target="_blank">• React中的Props, State 与</a></li>
<li><a href="/react/881438.html" title="React开发环境准备" target="_blank">• React开发环境准备</a></li>
<li><a href="/react/881437.html" title="React组件拆分与传值" target="_blank">• React组件拆分与传值</a></li>
</ul>
              </div>
            </div>
          </div>
          <!-- row end -->


          <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">热门标签
                  <span class="pull-right tx-12">
                    <a href="/all" target="_blank">更多 ►</a></span>
                </label>
                <div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          
         <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card"> 
<!-- f2er-rightads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="7756441254"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          </div>
        <!-- right end -->
        </div>
    </div>

     <footer id="footer">
    <div class="container">
        <div class="row hidden-xs">
             <dl class="col-sm-6 site-link">
                <dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程，小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程，小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程，小白也能轻松搞定！" target="_blank">· 联想笔记本一键重装Win10系统图文教程，小白也能...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程：从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程：从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd>
</dl>
            
           <dl class="col-sm-4 site-link">
                <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl>

            <dl class="col-sm-2 site-link">
                <dt>商务合作</dt>
                <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd>
            </dl>

        </div>
        <div class="copyright">
            Copyright © 2019 前端之家. 当前版本 V7.0.16<br>
            <span class="ml5">前端之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-10</a></span>
        </div>
    </div>
</footer>
<script type="text/javascript" src="/js/base.js"></script>
</body>
</html>