关于react.js:react-168版本新特性以及对react开发的影响

35次阅读

共计 2189 个字符，预计需要花费 6 分钟才能阅读完成。

Facebook 团队对社区上的 MVC 框架都不太称心的状况下，开发了一套开源的前端框架 react，于 2013 年公布第一个版本。

react 最开始提倡函数式编程，应用 function 以及外部办法 React.creactClass 创立组件，之后在 ES6 推出之后，应用类组件 Class 构建蕴含生命周期的组件。

react 16.8 版本更新

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

useState:

// 函数式组件初始化 state 和更改 state：const Counter = () =>{const [num,setNum] = userState(0);
return(
  <div>
      <div>{count}</div>
       <button onClick={()=>setCount(num+ 1)}>+</button>
  </div>
  );
};

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

同时还能在这个阶段解决一些内存队列：包含定时器等，解决了在 16.8 版本之前，在组件移除之后，异步队列没有被移除，占据内存导致页面卡顿等问题

useEffect(() => {compoment.subscribe(id);
  return () => {compoment.unsubscribe(theId)    // 勾销订阅
  }
});

react16.8 版本更新解决了什么问题
- 组件复用更便捷

在更新的版本之前，复用组件，更多的是应用高阶组件，以及封装的组件，通过传参和父子组件通信的模式去复用，

更新之后，能够通过函数式组件返回状态的模式，去承受组件向外裸露的组件内容。

实例

// 旧版本
function children() {return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {childProps: xxx};
      render() {const { childProps} = this.state;
        return <WrappedComponent childProps={childProps} />;
      }
    };
  };
}

class App extends Component{render(){
/**
 * 调用高阶组件
 */
    const {childProps} = this.props;
    return (
      <children
        columns={[...]}
      // tableProps 蕴含 pagination, onChange, dataSource 等属性。{...childProps}
      />
    )
  }
}


// 新版本
function children() {const [childProps, setChildProps] = useState(xxx);
  return childProps;
}

function App {const { childProps} = useTable();
    return (
      <Table 
        columns={[...]}
      // tableProps 蕴含 pagination, onChange, dataSource 等属性
        {...childProps}
      />
    )
}

- 在咱们下面提到的，革除定时器，以及解决在生命周期变动过程中，打消占用内存的队列等

- 函数式组件呈现了状态治理，在以往的 react 函数式编程过程中,react 只能被动去接管一个从父组件传递下来的一个 props 状态，在 hooks 更新之后，能够应用 hooks 更新的办法，进步组件的功能性以及扩展性，在函数式组件当中领有了像 class 组件一样可控生命周期
- useEffect 取代了一部分生命周期函数，从代码量的角度来说，简化了代码，解决了在 class 组件在编写过程中，须要一直应用 bind 或者箭头函数去绑定以后的 this，更专一于以后状态的治理
hooks 和 react diff 算法

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

外部有一套虚构 dom 的算法，在组件渲染过程中，对每个 dom 渲染一个 key 值，

在 state 状态更新过程时，对应渲染的虚构 dom 会去比照实在渲染在页面上的 dom 元素，如果某个节点比照时发现有更改，对应更改以后虚构 dom 节点的数据状态，再渲染实在的 dom 到页面当中。

两者的分割：

hooks 在更新之后，缩小了对生命周期函数的执行，同时更新状态更为迅速，这样在虚构 dom 执行过程中，进步 diff 执行速度
hooks 使得函数式组件有了本人外部的状态，在函数式组件执行过程中，不须要期待装载到父组件当中，本人能够更新状态，所以缩小了局部 dom 的深度，在页面渲染过程中，也算是变相进步了页面渲染速度。

hooks 在呈现之后，对 react 前端开发来说，标志性的特点应该是解决了相似定时器队列占据内存的问题，简化了 react 生命周期和组件代码，追溯数据流向和状态批改更为清晰。

在 16.8 版本之后的小版本更是呈现了自定义 hooks，还有 usememo 等 api，

蕴含 vue3.0 新的 api，这些版本的更新都在帮忙前端开发者不必再花更多的工夫去钻研生命周期执行和运行的过程，去专一页面上状态的扭转，疾速和持重开发前端业务。

文章集体博客地址：react 16.8 版本新个性以及对 react 开发的影响

正文完