![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
yyang_233
这个作者很懒,什么都没留下…
展开
-
redux
纯函数函数式编程中有一个概念叫纯函数,JS符合函数式编程的范式,所有也有纯函数的概念。确定的输入,一定会产生确定的输出;函数在执行过程中,不能产生副作用;Redux的核心理念-storeRedux的核心理念-actionRedux要求通过action来更新数据;所以数据的变化,必须通过派发(dispath)action来更新;action是一个普通的JS对象,用来描述这次更新的type和content;强制action的好处是可以清晰地知道数据到底发生了什么样的变化,所有的数据变化都是可追原创 2020-12-07 21:37:40 · 174 阅读 · 0 评论 -
React过渡动画-8
yarn安装 yarn add react-transition-groupreact-transition-group 介绍Transition该组件是一个和平台无关的组件(不一定要结合CSS);CSSTransitionCSSTransition 是基于Transition组件构建的;在执行的过程中有三个状态:appear,enter,exit;三种状态需要定义对应的CSS样式:开始状态,对应的类是 -appear、-enter、-exit;执行状态,对应的类是 -appear-act原创 2020-12-07 17:14:38 · 193 阅读 · 0 评论 -
React中的样式
在组件化中选择合适的css解决方案应该符合以下条件:1.可以编写局部css,css具备自己的作用域,不会随意污染其他组件内的元素;2.可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;3.支持所有的css特性,伪类,动画,媒体查询等;4.编写起来简洁方便,最好符合一贯的css风格特点;内联样式style接受一个采用小驼峰命名属性的JS对象,而不是CSS字符串;并且可以引用state中的状态来设置相关的样式;优点:样式之间不会有冲突;可以动态获取当前st原创 2020-12-07 11:27:16 · 272 阅读 · 0 评论 -
setState的使用-7
我们并不能直接通过修改state的值来让界面发生更新:因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变化;React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化;必须通过setState的方法,来告知React数据已经发生了变化;在组件开发中,并没有实现setState的方法,为什么可以调用呢?setState方法是从Component中继承过来原创 2020-11-21 16:25:10 · 325 阅读 · 0 评论 -
React渲染流程,更新机制,性能优化
React渲染流程jsx->虚拟DOM->真实DOMjsx --> createElement函数 --> 这个函数帮助我们创建ReactElement对象(对象树) --> ReactDOM.render函数 --> 映射到浏览器的真实DOMReact更新流程props/state改变 -> render函数重新执行 -> 产生新的DOM树(虚拟DOM) -> 新旧DOM树进行diff -> 计算出差异进行更新 -> 更新到真实原创 2020-11-21 16:24:57 · 939 阅读 · 0 评论 -
选项卡,插槽效果 阶段案例-6
选项卡案例style.css.tab-control{ display: flex; line-height: 44px; text-align: center;}.tab-item{ flex: 1;}.tab-item span{ padding: 5px 8px;}.tab-item.active{ color: red;}.tab-item.active span{ border-bottom: 3px solid red; }App.jsimport原创 2020-11-20 20:36:09 · 195 阅读 · 0 评论 -
react脚手架-4
脚手架是什么?一种工具,帮助快速生成项目的工程化结构,将所需要的工程环境配置好。每个项目作出完成的效果不同,但是它们的基本工程化结构是相似的;间接保证项目的基本结构的一致性,方便后期的维护。Vue的脚手架:vue-cliAngular的脚手架:angular-cliReact的脚手架:create-react-app这些脚手架需要依赖什么呢?这些脚手架都是用node编写的,都是基于webpack的;所以要安装node环境。安装node下载地址 推荐LTS,是长期支持版本,比较稳定。下原创 2020-11-19 20:13:18 · 414 阅读 · 0 评论 -
react 阶段案例-3
结构搭建<style> table{ border:1px solid #eee; border-collapse: collapse; /* 合并边框 */ } th,td{ border:1px solid #eee; padding: 10px 16px; text-align: center; } th{ background-color: #ccc; } .count{ margin:0 5px; }<.原创 2020-11-18 16:12:33 · 134 阅读 · 0 评论 -
邂逅react-1
reactreact是什么?用于构建用户界面的JS库。react的起源是2013年Facebook开源的JS框架。react的特点声明式编程允许我们只需要维护自己的状态,当状态改变时,react可以根据最新的状态去渲染UI界面。UI=f(state) state改变,通过function函数重新渲染UI组件化开发如何合理的进行组件的划分(复用性)和设计是重点。多平台适配reactreact-nativereactVR开发react必须依赖三个库这三个库各司其职,目的是让每原创 2020-11-16 21:27:45 · 165 阅读 · 0 评论