React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react 16.8新特性

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

作者:Lewyon

本文主要介绍了react 16.8版本新特性以及对react开发的影响,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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}
      />
    )
}

hooks和react diff算法

内部有一套虚拟dom的算法,在组件渲染过程中,对每个dom渲染一个key值,

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

两者的联系:

总结

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

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

包含vue3.0新的api,这些版本的更新都在帮助前端开发者不用再花更多的时间去研究生命周期执行和运行的过程,去专注页面上状态的改变,快速和稳健开发前端业务。

到此这篇关于浅谈react 16.8版本新特性以及对react开发的影响的文章就介绍到这了,更多相关react 16.8新特性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文