浅谈react 16.8版本新特性以及对react开发的影响.docx

第

浅谈react?16.8版本新特性以及对react开发的影响

目录react16.8版本更新useEffectreact16.8版本更新解决了什么问题组件复用更便捷hooks和reactdiff算法总结Facebook团队对社区上的MVC框架都不太满意的情况下，开发了一套开源的前端框架react，于2013年发布第一个版本。

react最开始倡导函数式编程，使用function以及内部方法React.creactClass创建组件，之后在ES6推出之后，使用类组件Class构建包含生命周期的组件。

react16.8版本更新

react16.8版本更新标志性的信息，是引入了hooks以及相关的一些api。

useState:

//函数式组件初始化state和更改state：

constCounter=()={

const[num,setNum]=userState(0);

return(

div

div{count}/div

button()=setCount(num+1)}+/button

/div

useEffect

userEffect副作用函数的组件，不仅取代了组件初始化，组件挂载成功，组件状态更新这三个阶段的生命周期函数

同时还能在这个阶段处理一些内存队列：包括定时器等，解决了在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;

returnWrappedComponentchildProps={childProps}/

classAppextendsComponent{

render(){

*调用高阶组件

const{childProps}=ps;

return(

children

columns={[...]}

//tableProps包含pagination,onChange,dataSource等属性。

{...childProps}

//新版本

functionchildren(){

const[childProps,setChildProps]=useState(xxx);

returnchildProps;

functionApp{

const{childProps}=useTable();

return(

Table

columns={[...]}

//tableProps包含pagination,onChange,dataSource等属性

{...childProps}

在我们上面提到的，清除定时器，以及解决在生命周期变化过程中，消除占用内存的队列等函数式组件出现了状态管理，在以往的react函数式编程过程中,react只能被动去接收一个从父组件传递下来的一个props状态，在hooks更新之后，可以使用hooks更新的方法，提高组件的功能性以及扩展性，在函数式组件当中拥有了像class组件一样可控生命周期useEffect取代了一部分生命周期函数，从代码量的角度来说，简化了代码，解决了在class组件在编写过程中，需要不断使用bind或者箭头函数去绑定当前的this，更专注于当前状态的管理

hooks和reactdiff算法

reactdiff这里不做深入讲解，简单来说diff算法是react以及vue2.0版本当中：

内部有一套虚拟dom的算法，在