摘要:今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX scss 效果 阅读全文
posted @ 2019-12-09 19:56 CNYangx 阅读 (31) 评论 (0) 编辑
摘要:React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。 前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面) 阅读全文
posted @ 2019-12-06 15:20 CNYangx 阅读 (18) 评论 (0) 编辑
摘要:虚拟DOM和Diff算法 React更新视图的思想是:只要state变化就重新渲染视图 特点:思路非常清晰 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的 理想状态:部分更新,只更新变化的地方 React运用的核心点就是 虚拟DOM 配合 Diff 算法 虚拟 阅读全文
posted @ 2019-12-06 13:28 CNYangx 阅读 (15) 评论 (0) 编辑
摘要:关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件) 组件性能优化 减轻state 减轻state:只存储跟组件渲染相 阅读全文
posted @ 2019-12-06 12:11 CNYangx 阅读 (10) 评论 (0) 编辑
摘要:组件复用 React组件复用概述 思考:如果两个组件中的部分功能相似或相同,该如何处理? 处理方式:复用相似的功能 复用什么? state 操作state的方法 两种方式: render props模式 高阶组件(HOC) 注意: 这两种方式不是新的API,而是利用React自身特点的编码技巧,演化 阅读全文
posted @ 2019-12-05 21:57 CNYangx 阅读 (11) 评论 (0) 编辑
摘要:生命周期 概述 意义:组件的生命周期有助于理解组件的运行方式,完成更复杂的组件功能、分析组件错误原因等 组件的生命周期: 组件从被创建到挂载到页面中运行,再到组件不在时卸载的过程 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数 构造函数的作用:为开发人员在不同阶段操作组件提 阅读全文
posted @ 2019-12-05 19:55 CNYangx 阅读 (6) 评论 (0) 编辑
摘要:通讯 | props | prop types 组件通讯 Props: 组件无论是使用 "函数声明还是通过 class 声明" ,都决不能修改自身的 props 组件通讯的三种方式 (1)父组件传递数据给子组件 (2)子组件传递数据给父组件 (3) 兄弟组件传递 Context 跨组件传递数据 Pr 阅读全文
posted @ 2019-12-04 16:44 CNYangx 阅读 (7) 评论 (1) 编辑
摘要:React| 组件化 | 递归 | 生成唯一ID 阅读全文
posted @ 2019-12-01 20:46 CNYangx 阅读 (47) 评论 (0) 编辑
摘要:ES5 方法 阅读全文
posted @ 2019-12-01 12:29 CNYangx 阅读 (35) 评论 (1) 编辑
摘要:问题: 使用命令行安装完成vue/cli后,使用vue ui无法创建demo vue : 无法加载文件 C:\Users\yangx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/ go.microsoft.com/fwlin 阅读全文
posted @ 2019-10-31 19:23 CNYangx 阅读 (3735) 评论 (0) 编辑