Facebook团队不满足于社区中的MVC框架，开发了一套开源的前端框架React，并于2013年发布了第一个版本。Reactfirst提倡函数式编程，使用函数和内部方法React.creactClass来创建组件，然后在ES6推出后，使用类组件Class来构建具有生命周期的组件。React16.8版本更新react16.8版本更新的标志性信息是引入了hooks和一些相关的API。useState://函数式组件初始化状态和改变状态：constCounter=()=>{const[num,setNum]=userState(0);return(
{count}
setCount(num+1)}>+);};useEffectuserEffect端的组件effect函数不仅代替了组件初始化、组件挂载成功、组件状态更新这三个阶段的生命周期函数，还可以在这个阶段处理一些内存队列：包括定时器等，解决了之前的问题16.8版本，移除组件后，异步队列没有移除，占用内存导致页面卡顿等useEffect(()=>{compoment.subscribe(id);return()=>{compoment.unsubscribe(theId)//取消订阅}});react16.8的更新解决了什么问题？组件复用在更新版本之前，复用的组件多为高层组件和封装组件，通过传递参数和父子组件通信来实现复用。更新后，组件可以以返回状态的形式从功能组件中接受暴露的组件内容。示例//旧版本functionchildren(){returnfunction(WrappedComponent){returnclassHighComponentextendsReact.Component{state={childProps:xxx};render(){const{childProps}=this.state;返回
;}};};}classAppextendsComponent{render(){/***调用高阶组件*/const{childProps}=this.props;return()}}//新版本函数children(){const[childProps,setChildProps]=useState(xxx);returnchildProps;}functionApp{const{childProps}=useTable();return()}上面我们说了清除定时器，解决了变化过程中生命周期在淘汰内存占用队列等功能组件的过程中，出现了状态管理。在以往的react函数式编程过程中，react只能被动的接收一个父组件传下来的props状态。hooks更新后，可以使用hooksupdate方法提高组件的功能性和可扩展性。在功能组件中，它和类组件一样具有可控的生命周期。useEffect替换了一些生命周期函数。从代码量的角度，简化了代码，解决了问题。在编写类组件的过程中，需要不断地使用bind或者箭头函数来绑定当前的this，更多的关注当前状态的管理hooks和reactdiff算法。Reactdiff这里就不深入解释了。简单的说，diff算法就是react，而在vue2.0版本中：里面有一套虚拟dom算法。在组件渲染过程中，会为每个dom渲染一个key值。在状态更新过程中，对应渲染的虚拟dom会与页面真实渲染进行对比。dom元素，如果比较时发现有节点发生变化，则相应改变当前虚拟dom节点的数据状态，然后渲染真实dom到页面。两者的联系：hooks更新后，减少了生命周期函数的执行，状态更新更快，从而在执行virtualdom的过程中，提高了diff执行的速度。Hooks使得功能组件有自己的内部状态，功能组件在执行过程中，不需要等待加载到父组件中，状态可以自行更新，减少了一些dom的深度。在页面渲染过程中，页面渲染速度可以算是一种变相的提升。综上所述，hooks出现后，对于react前端开发来说，标志性的特征应该是像timerqueue一样解决内存占用问题，简化react生命周期和组件代码，追踪数据流向和状态修改更清楚。16.8版本之后，有自定义的hooks，还有usememo等API，包括Vue3.0的新API。这些版本的更新是在帮助前端开发者不用花更多的时间去研究生命周期。在执行和运行过程中，关注页面的状态变化，快速稳定的开展前端业务。文章个人博客地址：react16.8版本的新特性及其对react开发的影响
