随笔分类 - react
摘要：React动画通常有三种方法实现从易到难为： 1、transition（CSS3自带） 2、animation（CSS3自带） 3、react-transition-group动画库（需要引入插件） react生态圈十分庞大，类似于动画库有很多，这里我们介绍一款react-transition-gr
阅读全文
摘要：分享一篇文章 原文链接：http://caibaojian.com/animation-fill-mode.html css3 animation状态结束后可以通过animation-fill-mode 控制动画的最后状态，分别是不改变默认行为、保持最后一个属性和回到第一帧。 假如我们就想让一个元素
阅读全文
摘要：一、transition（CSS3自带） 1、用法示例： 1 2 3 4 .hide{ /*过渡动画效果*/ opacity: 1; transition: all 1s ease-in; } 含义：透明度在1s内从0渐变为1 2、transition其他参数 建议参考（http://www.run
阅读全文
摘要：除了常见的mock.js，最近发现一款新的前端模拟数据工具easy-mock。 官网：https://www.easy-mock.com/ 登录成功后点击右下角+号，进行项目创建 输入项目名等相关信息，创建项目 创建接口 写入数据，创建接口 创建接口完毕后，复制链接 替换接口，然后将state置空
阅读全文
摘要：本节介绍下React+Axios实现远程数据请求 这里注意：axios是一个独立程序，本质就是对AJAX的封装，可以和很多框架结合使用。 （1）安装依赖 >npm i axios --save （2）引入使用 建议在componentDidMount生命周期函数里进行数据请求，这里我们结合json-
阅读全文
摘要：之前已经介绍过了React的相关生命周期，这里介绍下通过生命周期函数componentWillReceiveProps实现组件性能优化。 之前案例中的组件存在性能问题，即父组件的state更新时频繁渲染了子组件，也就是说父组件的输入框的值改动造成了子组件render的频繁触发渲染，性能上存在缺陷。
阅读全文
摘要：综上所示，React生命周期钩子可以分为4个大阶段 1、Initialization初始化阶段 2、Mounting虚拟DOM挂载阶段 3、Updation组件更新阶段 4、Unmounting组件卸载阶段 通俗理解，就是在组件的某一时刻，自动执行的函数。从这个角度来看的话，constructor也
阅读全文
摘要：学习react的同学肯定看过这种写法 注意这里的ref，写法为 ref = {(input)=>{this.input=input}}等价于ref = {input=>this.input=input}等价于ref = {(input)=>this.input=input} 这里主要是ES6箭头函数
阅读全文
摘要：基本类型校验： 之前的案例中，父组件向子组件传递的数据里，并没有做数据类型校验 虽然正确传递和使用了，但是在子组件里并没有做传递数据的类型验证，也就是说，此时传递任何值都不会报错。 开发经验丰富的小伙伴都知道，当项目复杂性较大时，如果不对数据类型做校验，后期很容易出现一种错误，即“业务逻辑错误”。
阅读全文
摘要：Facebook为了方便调试React代码，推出了React Developer Tools调试工具，方便开发者高效快速调试代码。下载方式，利用Chrome的拓展程序 添加后该图标便会放到页面右上角，该图标有几种状态，测试如下 1、打开淘宝发现图标灰色，说明淘宝没有使用react 2、打开知乎，发现
阅读全文
摘要：我们使用create-react-app脚手架时，会发现入口文件index.js中有这样一个引入使用。 这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为react项目注册了一个service worker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（
阅读全文
摘要：JSX支持遍历语法，如下 除了上面数组遍历方式，还有另一种，如下所示 结合for循环（外部） 注意： 主流循环写法是 map，jsx里面不能用for循环，因为for循环不是表达式。可以用Array::map方法，注意给返回的每一个组件设置一个唯一的key。 .
阅读全文
摘要：三元表达式也叫三目运算符，较为常见，语法 condition ? result1 : result2 二元表达式也叫二目运算符，语法 result1 || result2 如果结果1存在则显示结果1，否则显示结果2 .
阅读全文
摘要：小结： React遵循从上到下的数据流向，即单向数据流。 1、单向数据流并非‘单向绑定’，甚至单向数据流与绑定没有‘任何关系’。对于React来说，单向数据流（从上到下）与单一数据源这两个原则，限定了React中要想在一个组件中更新另一个组件的状态（类似于Vue的平行组件传参，或者是子组件向父组件传
阅读全文
摘要：根据上面展示代码中二者定义组件的语法格式不同之外，二者还有很多重要的区别，下面就描述一下二者的主要区别。 （1）函数this自绑定 React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正
阅读全文
摘要：React.Component有三种手动绑定方法： 可以在构造函数中完成绑定 可以在调用时使用method.bind(this)来完成绑定 可以使用arrow function来绑定。 拿上例的handleClick函数来说，其绑定可以有： 1、构造函数绑定 constructor(props) {
阅读全文
摘要：React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式： 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件，那么这三
阅读全文
摘要：跨域解决方案可以分为开发模式和生产模式 git查看脚手架工具，如下所示 然后进入docusaurus文档，文档里有关于跨域的相关配置 如下所示进行配置 （1）第一种方案 配置后重新测试 （2）第二种跨域方案 先利用express框架搭建简单后台服务 接下来创建路由文件 接下来启动后台服务，做下测试。
阅读全文
摘要：前言： Mock模拟数据有多种方式，简单概括下 概括： 主体： 目前为止都是使用第二种方式，接下来测试下Mock依赖包，参考文章.Mock数据模拟 .
阅读全文
摘要：新建http.js文件用来封装get和post请求 1、封装get请求 2、封装post请求 3、测试 首先在其他组件引入，注意：分析 引入类和方法的区别： React等类直接写即可 方法需要在外面用{}包围 封装之前写法 封装完成后调用httpPost写法，这里data为对象格式即可 get方法与
阅读全文
浙公网安备 33010602011771号