keys

1 .帮助react标识哪个键被修改，添加或者移除了。数组中的每一个元素都应该有一个唯一不变的key来标识
2 .一定要挑选不会重复的元素,同辈唯一即可，全局不需要唯一
3 .列表发生添加，删除，移动的时候最好不要用index来做key

避免掉停

1 .当一个组件的props，state变更，react将会拿最新的返回元素和之前的渲染元素对比。这里比的并不是数据，以此决定是否有必要更新真实的dom，当他们不相同的时候，react会更新dom
2 .

PureComponent

1 .自带shouldComponentUpdate()
2 .他会用当前与之前props，state的浅比较。
3 .这里就应该算是做了我们想做的那一步了吧。

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }
//这样的话其实你每个都要写的，也没有做到里面，但是他做的仅仅是阻止下一步，还不是渲染机制那里。

4 .仅仅会对新老this.props.word的值进行简单的对比。一个数组的添加他还是不能读出来不同

设计思路

1 .在某一时间节点调用react的render方法，会创建一颗由react元素组成的树，在下一次state或者props更新的时候，相同的render方法会返回一颗不同的树
2 .react需要做的就是对比这两颗树的差别来保证如何有效率的更新ui
3 .保证当前ui是和最新的数据同步的
4 .一些思想
5 .他的更新检测是以每一个function为最小单位的吗？

1 .两个不同类型的元素一定是产生了不同的树，所以需要直接修改
2 .开发者可以通过key来暗示那些子元素不会发生变化来降低需要计算的数量
3 .所以，如果你的组件写法有违法这两个规定的话，性能可能会比较差
4 .这个算法不会尝试匹配不同组件类型的子树，如果你是在两种不同类型的组件中切换，但是输出的内容非常相似，建议把他们改成同一类型。
5 .key应该是稳定，可预测的，以及列表内唯一的特质。不稳定的key，Math.ramdom会导致很多组件实例和DOM节点不必要的被重新创建，会导致性能下降和子组件中的状态丢失

diff算法

1 .比较根节点，不同类型的根节点会有不同的形态

1 .拆卸原有的树并建立新的树
2 .拆解的时候，对应的DOM节点也会被销毁，组件会执行componentWillUnmount
3 .建立新的DOM节点时，会被插入到DOM中，组件也会执行componentDidMount()方法。所有跟之前的树所关联的state也会被销毁
4 .根节点一下的组件也会被卸载，他们的状态也会被销毁

2 .对比同一类型的元素

1 .保留节点，直接对比和更新有改变的属性
2 .处理完当前节点之后，继续对子节点进行递归

3 .对子节点进行递归

1 .同事会遍历两个子元素的列表，产生差异的时候，生成一个mutation
2 .添加key之后，react会使用key来匹配原有树上子元素以及最新树上的子元素，组件的实例基于key来决定是否更新以及复用

组件复用困境

1 .组件并不是信息的孤岛，组件之间会产生联系，主要是数据的共享。另一个是功能的复用
2 .

react元素

1 .react元素并不是永远存在的，他总是在创建和删除之间不断循环着
2 .react元素具有不可变性，你不能改变react元素中的子元素或者属性。如果你想要在稍后渲染一些不同的东西，必须新建一个react元素树来描述并替换之前的
3 .react元素就像电影中放映的每一帧，他们捕捉UI在特定时间点应该是什么样子，并且他永远不会在改变
4 .相同的元素类型在同一个地方先后出现两次，react会重用已有的宿主实例
5 .react 在遇到条件语句的内容时是不会重用的

// 第一次渲染
ReactDOM.render(
  <dialog>
    <input />
  </dialog>,
  domContainer
);

// 下一次渲染
ReactDOM.render(
  <dialog>
    <p>I was just added here!</p>
//新建
    <input />
//这个也是新建，不会重用
  </dialog>,
  domContainer
);

1 .如果我们不像让input重建，因为我们想要保存input的状态。加个key吧。
2 .或者在前一个加一个if,让input总是在第二个渲染，这样就会同层比较

列表

1 .每次输入中包含数组元素的时候，必须加key，这相当于让react知道资源是是否是相同的，以及渲染前后他们在父元素中的相对位置是不是相同的