React Router一、是什么react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面 路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新 因此，可以通过前端路由可以实现单页(SPA)应用 react-router主要分成了几个不同的包： react-router: 实现了路由的核心功能 react-router-dom： 基于 react-router，加入了在浏览器运行环境下的一些功能 react-router-native：基于 react-router，加入了 react-native 运行环境下的一些功能 react-router-config: 用于配置静态路由的工具库 二、有哪些这里主要讲述的是react-router-dom的常用API，主要是提供了一些组件： BrowserRouter、HashRouter Route Link、NavLink switch redirect BrowserRouter、HashRouterRouter中包含了对路径改变的监听，并且会将 ...

React Hooks一、是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如： 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面 类组件中的 this 增加学习成本，类组件在基于现有工具的优化上存在些许问题 由于业务变动，函数组件不得不改为类组件等等 在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作 因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理 二、有哪些上面讲到，Hooks让我们的函数组件拥有了类组件的特性，例如组件内的状态、生命周期 最常见的hooks有如下： useState useEffect 其他 useState首先给出一个例子，如下： 12345678910111213import Rea ...

React render一、原理首先，render函数在react中有两种形式： 在类组件中，指的是render方法： 12345class Foo extends React.Component { render() { return <h1> Foo </h1>; }} 在函数组件中，指的是函数组件本身： 123function Foo() { return <h1> Foo </h1>;} 在render中，我们会编写jsx，jsx通过babel编译后就会转化成我们熟悉的js格式，如下： 1234567return ( <div className="cn"> <Header> hello </Header> <div> start </div> Right Reserve </div>); babel编译后： 123456789return ...

state 和 props 有什么区别？一、state一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是 state，一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用 setState 来改变，从而达到更新组件内部数据的作用，并且重新调用组件 render 方法，如下面的例子： 12345678910111213141516171819202122class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 }; }); } render() { ret ...

React Jsx 转换成真实 DOM 的过程一、是什么react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上 在前面文章了解中，JSX通过babel最终转化成React.createElement这种形式，例如： 1234<div> <img src="avatar.png" className="profile" /> <Hello /></div> 会被bebel转化成如下： 123456789React.createElement( "div", null, React.createElement("img", { src: "avatar.png", className: "profile", }), React.createElement(Hello, null)); 在转化过程中，babel在编译时 ...

css3 动画一、是什么CSS 动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用 CSS 的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式transition 实现渐变动画transition的属性如下： property:填写需要变化的 css 属性 duration:完成过渡效果需要的时间单位(s 或者 ms) timing-function:完成效果的速度曲线 delay: 动画效果的延迟触发时间 其中timing-function的值有如下： 值 描述 linear 匀速（等于 cubic-bezier(0,0,1,1)） ease 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） ease-in 慢慢变快（等于 cubic-bezier(0. ...

css 中，隐藏页面元素的方式以及它们之间的区别一、前言在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式通过css实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置 height、width 模型属性为 0 position:absolute clip-path display:none设置元素的display为none是最常用的隐藏元素的方法 123.hide { display: none;} 将元素设置为display:none后，元素在页面上将彻底消失 元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘 消失后，自身绑定的事件不会触发，也不会有过渡效果 特点：元素不可见，不占据空间，无法响应点击事件 visibility:hidden设置元素的visibility为hidden也是一种常用的隐藏元素的方法 ...

em/px/rem/vh/vw一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS 单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px、pt、pc 这里我们主要讲述 px、em、rem、vh、vw pxpx，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中 有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的 这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关 emem 是相对长度单位。相对于当前对象内文 ...

JavaScript 中内存泄漏的几种情况一、是什么内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存 并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费 程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存 对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃 在C语言中，因为是手动管理内存，内存泄露是经常出现的事情。 123456char * buffer;buffer = (char*) malloc(42);// Do something with bufferfree(buffer); 上面是 C 语言代码，malloc方法用来申请内存，使用完毕之后，必须自己用free方法释放内存。 这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为”垃圾回收机制” 二、垃圾回收机制Javascript 具有自动垃圾回收机制（GC：Garbage Collecat ...