本篇内容主要讲解“react 16.8版本新特性及对react开发的影响是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react 16.8版本新特性及对react开发的影响是什么”吧!
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本。
react最开始倡导函数式编程,使用function以及内部方法React.creactClass创建组件,之后在ES6推出之后,使用类组件Class构建包含生命周期的组件。
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>
);
};
userEffect副作用函数的组件,不仅取代了组件初始化,组件挂载成功,组件状态更新这三个阶段的生命周期函数
同时还能在这个阶段处理一些内存队列:包括定时器等,解决了在16.8版本之前,在组件移除之后,异步队列没有被移除,占据内存导致页面卡顿等问题
useEffect(() => {
compoment.subscribe(id);
return () => {
compoment.unsubscribe(theId) //取消订阅
}
});
在更新的版本之前,复用组件,更多的是使用高阶组件,以及封装的组件,通过传参和父子组件通信的形式去复用,
更新之后,可以通过函数式组件返回状态的形式,去接受组件向外暴露的组件内容。
实例
//旧版本
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,更专注于当前状态的管理
react diff这里不做深入讲解,简单来说diff算法是react以及vue2.0版本当中:
内部有一套虚拟dom的算法,在组件渲染过程中,对每个dom渲染一个key值,
在state状态更新过程时,对应渲染的虚拟dom会去对比真实渲染在页面上的dom元素,如果某个节点对比时发现有更改,对应更改当前虚拟dom节点的数据状态,再渲染真实的dom到页面当中。
两者的联系:
hooks在更新之后,减少了对生命周期函数的执行,同时更新状态更为迅速,这样在虚拟dom执行过程中,提高diff执行速度
hooks使得函数式组件有了自己内部的状态,在函数式组件执行过程中,不需要等待装载到父组件当中,自己可以更新状态,所以减少了部分dom的深度,在页面渲染过程中,也算是变相提高了页面渲染速度。
到此,相信大家对“react 16.8版本新特性及对react开发的影响是什么”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。