React - review 2

  • 一、虚拟 DOM
  • 二、深入了解虚拟 DOM
  • 三、虚拟 DOM 中的 Diff 算法

一、虚拟 DOM

虚拟 DOM 就是一个 Js 对象，比较 Js 对象不怎么消耗性能，比较真实 DOM 消耗性能

  1. 数据更新，视图重新渲染
  • 第一种
  1. state 数据
  2. JSX 模板
  3. 数据 + 模板 结合，生成真实的DOM，来显示
  4. state 发生改变
  5. 数据 + 模板 结合，生成真实的DOM，替换原始的 DOM

缺陷：第一次生成了完整的 DOM 碎片，第二次依然生成了完整的 DOM 碎片，再用第二次的 DOM 替换第一次的 DOM，非常耗性能

  • 第二种
  1. state 数据
  2. JSX 模板
  3. 数据 + 模板 结合，生成真实的DOM，来显示
  4. state 发生改变
  5. 数据 + 模板 结合，生成真实的DOM，并不直接替换原始的 DOM
  6. 新的 DOM （DoucumentFragment）和原始的 DOM 做对比，找差异
  7. 找出哪里发生了变化（假设 input 框发生了变化）
  8. 只用新的 DOM 中的 input 替换旧的 DOM 中的 input 即可

缺陷：性能的提升并不明显

  • 第三种
  1. state 数据
  2. JSX 模板
  3. 数据 + 模板 生成虚拟DOM（虚拟 DOM 就是一个 Js 对象，用它来描述真实 DOM）=> 消耗了性能（极小）
    ['div', {id: 'box'}, ['span', {}, 'Hi React']
  4. 用虚拟 DOM 的结构生成真实的 DOM，来显示
    <div id ="box"><span>Hi React</span></div>
  5. state 发生改变
  6. 数据 + 模板 结合，生成新的虚拟 DOM （极大的提升了性能）
    <div id ="box"><span>Bye React</span></div>
  7. 比较原始虚拟 DOM 和新的虚拟 DOM 的区别， 找到区别是 span 中的内容发生了改变（极大的提升了性能）
  8. 直接操作 DOM ，改变 span 中的内容

二、深入了解虚拟 DOM

  1. render 返回的内容是 JSX 模板 JSX -> JS 对象(虚拟 DOM) -> 真实的 DOM
render() {return (<div><div><input /><button>提交</button></div><ul><li>1</li><li>2</li></ul></div>)
}
  1. JSX 是如何变成 JS 对象（虚拟 DOM）的？通过 createElement
    即：JSX -> createElement -> JS 对象(虚拟 DOM) -> 真实的 DOM
  • Test1
class Test extends Component {render() {return (<div>你好</div>)}
}

class Test extends Component {render() {return (// <div>你好</div>React.createElement('div', {}, '你好'))}
}
  • Test2
class Test extends Component {render() {return (<div><span>你好</span></div>)}
}

class Test extends Component {render() {return (// <div>//     <span>你好</span>// </div>React.createElement('div', {}, React.createElement('span', {}, "你好")))}
}
  1. 优点：
    1）性能提升了；
    2）它使得跨域应用得以实现 React Native

三、虚拟 DOM 中的 Diff 算法

  1. Diff => difference 寻找原始虚拟 DOM 与 新的虚拟 DOM 之间的差异
  2. 当数据发生改变的时候，虚拟 DOM 会进行对比，寻找差异
#mermaid-svg-0Bx1CuGWxe5HwVq7 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .label text{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .node rect,#mermaid-svg-0Bx1CuGWxe5HwVq7 .node circle,#mermaid-svg-0Bx1CuGWxe5HwVq7 .node ellipse,#mermaid-svg-0Bx1CuGWxe5HwVq7 .node polygon,#mermaid-svg-0Bx1CuGWxe5HwVq7 .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .node .label{text-align:center;fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .node.clickable{cursor:pointer}#mermaid-svg-0Bx1CuGWxe5HwVq7 .arrowheadPath{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .flowchart-link{stroke:#333;fill:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edgeLabel rect{opacity:0.9}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edgeLabel span{color:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .cluster text{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-0Bx1CuGWxe5HwVq7 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-0Bx1CuGWxe5HwVq7 text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .actor-line{stroke:grey}#mermaid-svg-0Bx1CuGWxe5HwVq7 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .sequenceNumber{fill:#fff}#mermaid-svg-0Bx1CuGWxe5HwVq7 #sequencenumber{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 #crosshead path{fill:#333;stroke:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .messageText{fill:#333;stroke:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-0Bx1CuGWxe5HwVq7 .labelText,#mermaid-svg-0Bx1CuGWxe5HwVq7 .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .loopText,#mermaid-svg-0Bx1CuGWxe5HwVq7 .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-0Bx1CuGWxe5HwVq7 .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-0Bx1CuGWxe5HwVq7 .noteText,#mermaid-svg-0Bx1CuGWxe5HwVq7 .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-0Bx1CuGWxe5HwVq7 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-0Bx1CuGWxe5HwVq7 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-0Bx1CuGWxe5HwVq7 .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .section{stroke:none;opacity:0.2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .section2{fill:#fff400}#mermaid-svg-0Bx1CuGWxe5HwVq7 .section1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .section3{fill:#fff;opacity:0.2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .sectionTitle0{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .sectionTitle1{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .sectionTitle2{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .sectionTitle3{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-0Bx1CuGWxe5HwVq7 .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .grid path{stroke-width:0}#mermaid-svg-0Bx1CuGWxe5HwVq7 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .task{stroke-width:2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText:not([font-size]){font-size:11px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .task.clickable{cursor:pointer}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskText3{fill:#fff}#mermaid-svg-0Bx1CuGWxe5HwVq7 .task0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .task1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .task2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutside0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutside2{fill:#000}#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutside1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .taskTextOutside3{fill:#000}#mermaid-svg-0Bx1CuGWxe5HwVq7 .active0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .active1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .active2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeText0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeText1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeText2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeText3{fill:#000 !important}#mermaid-svg-0Bx1CuGWxe5HwVq7 .done0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .done1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .done2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneText0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneText1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneText2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneText3{fill:#000 !important}#mermaid-svg-0Bx1CuGWxe5HwVq7 .crit0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .crit1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .crit2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCrit0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCrit1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCrit2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCrit0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCrit1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCrit2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-0Bx1CuGWxe5HwVq7 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .milestoneText{font-style:italic}#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCritText0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCritText1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCritText2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .doneCritText3{fill:#000 !important}#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCritText0,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCritText1,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCritText2,#mermaid-svg-0Bx1CuGWxe5HwVq7 .activeCritText3{fill:#000 !important}#mermaid-svg-0Bx1CuGWxe5HwVq7 .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.classGroup text .title{font-weight:bolder}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.clickable{cursor:pointer}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-0Bx1CuGWxe5HwVq7 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .dashed-line{stroke-dasharray:3}#mermaid-svg-0Bx1CuGWxe5HwVq7 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 .commit-id,#mermaid-svg-0Bx1CuGWxe5HwVq7 .commit-msg,#mermaid-svg-0Bx1CuGWxe5HwVq7 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-0Bx1CuGWxe5HwVq7 g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-0Bx1CuGWxe5HwVq7 .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-0Bx1CuGWxe5HwVq7 .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-0Bx1CuGWxe5HwVq7 .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edgeLabel text{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-0Bx1CuGWxe5HwVq7 .node circle.state-start{fill:black;stroke:black}#mermaid-svg-0Bx1CuGWxe5HwVq7 .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-0Bx1CuGWxe5HwVq7 #statediagram-barbEnd{fill:#9370db}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-state .divider{stroke:#9370db}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-0Bx1CuGWxe5HwVq7 .note-edge{stroke-dasharray:5}#mermaid-svg-0Bx1CuGWxe5HwVq7 .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-0Bx1CuGWxe5HwVq7 .error-icon{fill:#522}#mermaid-svg-0Bx1CuGWxe5HwVq7 .error-text{fill:#522;stroke:#522}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edge-thickness-normal{stroke-width:2px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-0Bx1CuGWxe5HwVq7 .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-0Bx1CuGWxe5HwVq7 .marker{fill:#333}#mermaid-svg-0Bx1CuGWxe5HwVq7 .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-0Bx1CuGWxe5HwVq7 {color: rgba(0, 0, 0, 0.75);font: ;}

导致
如何比较
数据发生改变
虚拟 DOM 会进行比较, 寻找差异
调用setstate
props发生改变
state发生改变
Diff 算法进行比较
  1. 为什么 React 中的 setstate 是一个异步函数？提高 React 底层的性能
    => 当调用 setstate 时，虚拟 DOM 就要进行比对，更新页面，如果连续调用 N 次 setstate ，页面会更新 N 次。如果连续调用 N 次 setstate，React 会把它们合并成一次，只进行一次 DOM 更新
  2. Diff 算法

    => 原始虚拟 DOM 与 新的虚拟 DOM 同层进行比较，当发现差异时，停止比较，将原始虚拟 DOM 全部替换成新的虚拟 DOM；
    => 同层比较的算法简单，提高了比较速度
  3. 当数据发生改变时，比如数组：
    原始数组：[a, b, c, d, e]
    原始数组：[a, b, c, d, e]

    => 为什么要有 key 值呢？
         没有 key 值，在进行原始数组与新的数组进行比较时，每个节点没有自己的名字，节点与节点之间的关系就很难被确立，需要用多层循环进行比较，比较麻烦且消耗性能；
         有 key 值，第一次循环的时候给每个节点加上名字，第二次循环的时候直接比对是否原始数组是否有相同的名字就可以了
    => 为什么 key 值最好不要用 index，最好用 item ?
         index 不稳定，当我们删除 a 的时候，新的数组变成[b, c]，而 b 的下标变成了0，c 的下标变成了1;
index 0 1 2
item a b c
index 0 1
item b c

React - review 2相关推荐

  1. react绑定this_React绑定模式：处理“ this”的5种方法

    react绑定this JavaScript's this keyword behavior has confused developers for ages. JavaScript的this关键字行 ...

  2. Understanding The React Source Code

    Understanding The React Source Code - Initial Rendering (Simple Component) I UI updating, in its ess ...

  3. 探React Hooks

    前言 众所周知,hooks在 React@16.8 中已经正式发布了.而下周周会,我们团队有个同学将会仔细介绍分享一下hooks.最近网上呢有不少hooks的文章,这不免激起了我自己的好奇心,想先行探 ...

  4. React文档（十四）深入JSX

    根本上,JSX只是为React.createElement(component, props, ...children)函数提供语法糖.JSX代码是这样的: <MyButton color=&q ...

  5. React 移动 web 极致优化

    原文地址:https://github.com/lcxfs1991/... 最近一个季度,我们都在为手Q家校群做重构优化,将原有那套问题不断的框架换掉.经过一些斟酌,决定使用react 进行重构.选择 ...

  6. How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras React Native

    The HBO show Silicon Valley released a real AI app that identifies hotdogs - and not hotdogs - like ...

  7. react 数字转字符_深入浅出 React -- JSX

    什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能 在 React 中,JSX 仅仅是 React.crea ...

  8. 这是我最喜欢的使用React Native创建生产级应用程序的技巧

    Trust me when I say this, React Native is hard. And it's not the usual hard of what we think hard is ...

  9. react本地储存_如何使用React和本地存储构建freeCodeCamp的配方框

    react本地储存 by Edward Njoroge 爱德华·尼约格(Edward Njoroge) 如何使用React和本地存储构建freeCodeCamp的配方框 (How to build f ...

最新文章

  1. [学习笔记] 伸展树splay详解+全套模板+例题[Luogu P3369 【模板】普通平衡树]
  2. iDataForum2010数据库技术论坛总结
  3. sandboxie游戏不能运行在虚拟环境中如何解决_火爆全球的游戏专业，你还不来莫道克大学亲身感受一下？...
  4. Backpropogation反向传播公式推导【李宏毅深度学习版】
  5. 实时渲染器不止lumion，Chaos Vantage你值得一试
  6. WebService SOAPUI接口测试
  7. 基于fo-dicom 的 Worklist CStore 我的学习实现路线
  8. linux系统查看硬盘序列号
  9. 自考学习记录 课程代码03708《中国近代史纲要》1
  10. 兄弟连Linux（二）--Linux常用命令
  11. 给定经纬度定位某个城市
  12. 淘宝详情页排版布局怎么做？大神导航，一个神奇的网站，从此开启大神之路！
  13. 计算机外部设备培训教学计划,【精品】计算机教学计划4篇
  14. EventBus 3.0 事件公交车
  15. 中国象棋棋盘java_Java中国象棋博弈程序探秘[2]——棋盘的表示
  16. 热插拔技术--以ADM1177为例说明
  17. 用c语言编写研究生录取程序,C语言_课程设计---研究生初试录取管理系统.doc
  18. 学理财应该从哪些学起_学理财入门知识理财的知识有哪些
  19. C语言中，再对文件的操作模式中，a和a+、w和w+、r和r+有什么区别？
  20. Kettle（三）：创建资源库

热门文章

  1. Java岗大厂面试百日冲刺 - 日积月累，每日三题【Day19】—— 集合框架3
  2. VS2022 Visual Studio 2022专业版全功能离线版下载
  3. 程序员的浪漫--console.log()在浏览器控制台输出特殊字符编码的图案
  4. 洛谷 P3959 [NOIP2017]宝藏 题解
  5. 【新书推荐】【2018】有源集成天线的设计与应用
  6. Swagger2 总结
  7. IT傻博士-CCNA课程在线视频（1-5）
  8. 本科、硕士、博士的区别（终极版）
  9. 响应式织梦模板SEO优化教程资讯类网站
  10. 弘辽科技：徒有贵族身份，却连一分钱都没有。