目录React 16.8版本更新useEffectreact16.8版本更新解决了什么问题组件复用更便捷hooks和react diff算法总结Facebook团队对社区上的mvc框
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}
/>
)
}
内部有一套虚拟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开发的影响的文章就介绍到这了,更多相关react 16.8新特性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 浅谈react 16.8版本新特性以及对react开发的影响
本文链接: https://www.lsjlt.com/news/142466.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0