React类组件React类组件是通过ES6类的方式来创建组件，React会解释组件标签找到组件，发现这个组件是通过类定义的，就会在内部通过new的操作来创建出类的实例，并通过这个实例调用原型上的render方法，将render返回的虚拟DOM转换成真实DOM呈现在页面中。 组件三大核心属性之statestate是组件对象最重要的属性，值是一个对象，可以包含多个key-value的组合，更新state可以更新对应的页面显示，即重新渲染组件 12345678910111213class App extends React.Component{ state = {name:'hailee',age:25} changeName = ()=>{ //这里必须写箭头函数 this.setState({name:'Haley'}) //setState有两种写法 } reder(){ const {name,age} = th ...

React组件通信方式总结几种通信方式 props ​ 1）children props ​ 2）render props 消息的发布与订阅 pubsub-js 集中式状态管理 redux、recoil等等 context ​ 生产者-消费者模式 组件间的关系 父子组件 兄弟组件（非嵌套组件） 祖孙组件（跨级组件） 比较好的搭配方式父子组件：props 兄弟组件：消息的发布与订阅、集中式状态管理 祖孙组件：消息的发布与订阅、集中式状态管理、context（开发用的少，封装插件用的多）

响应式布局的定义给所有用户提供同一份HTML和CSS。通过几个关键性的技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护好几个网站，只需要创建一个网站就可以在智能手机、平板电脑、或者其他设备上运行。 响应式布局的三大原则移动优先移动优先指的是在实现桌面布局之前先构建移动端的布局，因为移动端网页有很多限制，比如屏幕空间小，网络速度慢，用户跟网页的交互也不一样，打字很别扭，也没有鼠标可以使用，所以移动端做好之后使用“渐进增强”的方式来为大屏用户增加体验。 媒体查询媒体查询允许某些样式只在页面满足特定条件的时候才生效，这样可以根据屏幕大小定制样式，可以针对小屏、中屏、大屏定义不同的样式，媒体查询使用@media规则选择满足特定条件的设备。一条简单的媒体查询规则如下： 123456@media (min-width: 560px){ .title > h1 { font-size:2.25em; }}// 媒体查询断点推荐使用的是em单位，因为em在各大主流浏览器中当用户改变默认的字体大小时， ...

JS中的this对象this对象表示函数的上下文对象，是函数运行时基于运行环境绑定的，this的值取决于函数是如何调用的，而不是如何定义的。函数的上下文，这是一个广泛的概念，涵盖了函数执行时的整个环境和状态，包括this对象、函数作用域、参数、调用战的信息、闭包状态等等,函数的上下文对象就是this。 作为函数被调用1function getName(name){ return this;} 作为一个函数调用时，this对象指向window。 作为方法被调用123456var obj = { name:'hailee', getName: function(){ return this; }} 作为一个方法调用时，this指向这个对象obj 作为构造函数被调用123456function CreateToys(){ this.getName = function(){return this;}}var bear = new CreateToys( ...

Grid布局Grid布局可以定义由行和列组成的二维布局，然后将元素放入网格中。有的元素可能只占据网格的一个单元，有的元素则可能占据多行或者多列。如下图： 这样的布局用flex布局是没有办法实现的，这就体现了网格布局的优势了。 构建一个基础的网格布局12345678910111213<style> .grid { display: grid; //定义一个网格容器 grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; grid-gap: .5em; }</style><div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c& ...

Flex布局定义： 给元素添加display:flex，这个元素就变成了一个弹性容器(flex container)，它的直接元素变成了弹性子元素(flex item),弹性子元素在同一行上默认从左向右并排排列，弹性容器可以像块元素一样填满可用宽度，但是弹性子元素不一定能够填满弹性容器的宽度。弹性子元素高度相等，由它们最高的盒子或者内容决定，这个弹性容器的布局就是Flex布局。在弹性容器的内部有两条轴，一个是主轴，一个是副轴。子元素按照主轴方向进行排列，主轴默认的方向为主起点（左）到主终点（右）垂直于主轴的是副轴，副轴默认的方向为副起点（上）到副终点（下）。 弹性子元素大小比起直接设置弹性盒子的margin、width、height这些常见的属性，Flexbox提供了一个更有用的属性：flex。flex属性控制弹性子元素在主轴方向上的大小（这里主要指宽度）。flex属性是由三个不同大小的属性的简写：flex-grow、flex-shrink、flex-basis。 使用flex-basis属性Flex-basis定义了元素大小的基准值，是一个初始的“主尺寸”，它可以被设置为任意值(决 ...

JS数组JS数组是JS内置的一个对象，它的创建方式有两种，一种是用new的方式创建，一种是用Array构造函数创建，另一种是用数组字面量[]创建，在开发中通常都会使用数组字面量的方式创建对象，如下： 1234//使用new的方式创建数组let names = new Array('hailee','david','chris')//使用字面量的方式创建数组let names = ['hailee','david','chris'] 数组常用的方法在开发的过程中使用数组提供的方法场景比较多，如需要对数组元素进行增加、删除、替换等操作。以下是一些常用的方法： unshift(),shift() unshift(): 在数组头部添加元素，返回的是数组的长度。 Shift(): 在数组头部删除元素，返回的是被删除的那一个元素。 12345678910//unshift()方法的参数可以有一个或者多个，会依次添加到数组头部let friends = ['hai ...