react需要了解的一些概念

高阶组件：

       高阶组件本质上是一个函数，是可以传递一个组件作为参数，并且会返回一个新的组件，可以通过props的形式传递给目标组件，这样目标组件可以直接在props里面获取使用就可以，在工作中，我们使用的connect(),withRouter(),还有一些自己封装复用的组件（basicFram公共标题） ，

class HelloHoc extends React.Component {
render() {
return

hello Jason

}
}
function WrapperHello(Comp) {
class WrapComp extends React.Component {
render() {
return (

这是react高阶组件特有的元素

<Comp {…this.props}>

)
}
}
return WrapComp;
}
HelloHoc = WrapperHello(HelloHoc )

与Vue不同的一些概念

相同点： 都支持组件化开发， 都是数据驱动视图
不用点：
vue是mvvm（双向数据流）模式（数据改变，视图改变，视图改变，数据改变），react是mvc（单向数据流）模式（数据改变，视图改变）
状态有改变时，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件数，react是只要状态有改变，全部组件都会重新渲染，通过shouldComponentUpdate这个生命周期来控制要不要重新渲染
react是通过setState()来更新状态， 在vue中,数据由data属性在vue对象中管理；
vue使用模板，react是jsx模式

DIFF算法和虚拟DOM

把真实dom树变成js对象树，将之前的和新的作比较，通过diff算法，按照不同的地方进行渲染
传统的diff算法是通过循环递归的方式进行依次对比，效率低，这对于前端来说太耗费性能，而react diff 策略主要是:
1、对DOM树进行分层比较，两棵树只会对同一层的节点进行比较，如果同级相同位置节点不一样，直接删除，对于节点位置有移动，也是删除重新创建
2 组件。对于相同的组件，操作的方法相同于DOM，对于不同的组件的做法是，删掉当前整个DOM树，重新渲染新的DOM树，选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。
3、对于节点，diff提供了3中操作，分别是插入、移动和删除：
1）新的组件类型不在旧集合中，即全新的节点，需要对新节点进行插入操作。
2）旧集合中有新组件类型，且element是可更新的类型，这时候就需要做移动操作，可以复用以前的DOM节点。
3）旧组件类型，在新集合里也有，但对应的element不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。