yangsm的博客

纯函数 函数式编程中有一个概念叫纯函数，JS符合函数式编程的范式，所有也有纯函数的概念。 确定的输入，一定会产生确定的输出； 函数在执行过程中，不能产生副作用； Redux的核心理念-store Redux的核心理念-action Redux要求通过action来更新数据； 所以数据的变化，必须通过派发(dispath)action来更新； action是一个普通的JS对象，用来描述这次更新的type和content； 强制action的好处是可以清晰地知道数据到底发生了什么样的变化，所有的数据变化都是可追

yarn安装 yarn add react-transition-group react-transition-group 介绍 Transition 该组件是一个和平台无关的组件（不一定要结合CSS）； CSSTransition CSSTransition 是基于Transition组件构建的； 在执行的过程中有三个状态：appear,enter,exit； 三种状态需要定义对应的CSS样式： 开始状态，对应的类是 -appear、-enter、-exit； 执行状态，对应的类是 -appear-act

在组件化中选择合适的css解决方案应该符合以下条件： 1.可以编写局部css，css具备自己的作用域，不会随意污染其他组件内的元素； 2.可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式； 3.支持所有的css特性，伪类，动画，媒体查询等； 4.编写起来简洁方便，最好符合一贯的css风格特点； 内联样式 style接受一个采用小驼峰命名属性的JS对象，而不是CSS字符串； 并且可以引用state中的状态来设置相关的样式； 优点： 样式之间不会有冲突； 可以动态获取当前st

我们并不能直接通过修改state的值来让界面发生更新： 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化； React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化； 必须通过setState的方法，来告知React数据已经发生了变化； 在组件开发中，并没有实现setState的方法，为什么可以调用呢？ setState方法是从Component中继承过来

React渲染流程 jsx->虚拟DOM->真实DOM jsx --> createElement函数 --> 这个函数帮助我们创建ReactElement对象(对象树) --> ReactDOM.render函数 --> 映射到浏览器的真实DOM React更新流程 props/state改变 -> render函数重新执行 -> 产生新的DOM树(虚拟DOM) -> 新旧DOM树进行diff -> 计算出差异进行更新 -> 更新到真实

选项卡案例 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.js import

脚手架是什么? 一种工具，帮助快速生成项目的工程化结构,将所需要的工程环境配置好。 每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的； 间接保证项目的基本结构的一致性，方便后期的维护。 Vue的脚手架：vue-cli Angular的脚手架：angular-cli React的脚手架：create-react-app 这些脚手架需要依赖什么呢？ 这些脚手架都是用node编写的，都是基于webpack的； 所以要安装node环境。 安装node 下载地址 推荐LTS，是长期支持版本，比较稳定。 下

结构搭建 <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; } &lt.

react react是什么？ 用于构建用户界面的JS库。 react的起源 是2013年Facebook开源的JS框架。 react的特点 声明式编程 允许我们只需要维护自己的状态，当状态改变时，react可以根据最新的状态去渲染UI界面。 UI=f(state) state改变，通过function函数重新渲染UI 组件化开发 如何合理的进行组件的划分（复用性）和设计是重点。 多平台适配 react react-native reactVR 开发react必须依赖三个库 这三个库各司其职，目的是让每