2019年01月_purple_lumpy

原创使用react-transition-group 实现动画

使用CSS3 提供的transition 与 animation 可以实现动画效果，但是在一些复杂效果时，还是需要借助js的，这儿介绍一下react 的动画框架，更方便的写一些动画。react-transition-group 是react 的一个第三方模块。借助这个模块，可以实现更加复杂的动画效果。可以在GitHub 上找到这个项目。https://github.com/reactjs/...

2019-01-31 14:32:25 652

原创 React 中实现CSS过渡动画与动画效果

我们先在项目的src目录下，新建一个文件App.js ,代码如下。import React, { Component, Fragment } from 'react'class App extends Component { render() { return ( <Fragment> <div>hello</div&...

2019-01-31 11:48:42 3285

原创 React 中一些性能改进的点

1. 在class 中的constructor 函数中使用bind 绑定组件内函数的作用域，如下。这样可以保证，整个文件里，该函数的作用域绑定只执行一次。且可以避免子组件的一些无必要的渲染。 constructor(props) { super(props); this.handleDelete = this.handleDelete.bind(this) ...

2019-01-30 15:23:57 157

原创 React 生命周期函数使用场景及ajax请求前端模拟数据

React 中的生命周期函数是很重要的。我们在写组件的时候，组件都是继承自React.Component 的，Component内置了其他所有生命周期函数，唯独没有render 函数。因此我们在写组件的时候，一定要定义render 函数。1. shouldComponentUpdate 函数我们在浏览器打开todolist，在chrome的调试工具中勾选highlight update...

2019-01-30 15:23:47 939

原创 React 中的生命周期函数

生命周期函数是指在某一时刻组件会自动调用的函数。比如 render 函数就是一个生命周期函数。当 state 和props 发生改变的时候，就会被重新执行。constructor 函数，是在组件创建的时候会被调用。按理说也符合生命周期函数的定义，但是它并不是React独有的函数，它是ES6规定的写法。对一个React组件来说，它会经历如下几个过程，初始化，挂载（有三个周期函数），更新，...

2019-01-20 14:17:19 394

原创 React 中ref 的使用

ref 作用是在React 直接操作DOM【不推荐】它的使用方法如下。在TodoList.js 中然后呢，setState() 是一个异步函数。如果想在它执行完后，再执行操作，可以按下面的写法。...

2019-01-20 13:20:35 217

原创 React 中的虚拟DOM

React 的重新渲染，性能是很高的。因为它引入了虚拟DOM的概念。呃，来看一下，render 函数渲染页面的几种做法。前两步都是拿到state 数据与 JSX模版。第一种就是比较朴素的方式。第二种方式虽然不用完全替换，但是也需要比对两个DOM。第三种是虚拟DOM方式。虚拟DOM 本质上就是 js对象，因此在比对的时候操作js 对象比操作DOM 在性能上有很大的提升。实际...

2019-01-20 12:11:56 175

原创 props, state 与render函数

在React 中，当组件的state 或者props 发生改变的时候，render函数就会重新执行。当父组件的render 函数被运行时，它的子组件的render 函数都将被重新运行。...

2019-01-13 18:50:38 243

原创 PropTypes 与 DefaultProps

每个组件都有自己的props 参数。这个参数，是从父组件接收到的一些属性。本篇主要介绍，接收参数时，如何对参数的类型做校验；如何定义参数的默认值。接收参数的类型的校验：PropTypes 我们首先要引入 PropTypes，脚手架中自带了 prop-types包。然后使用如下。import React, { Component} from 'react';import...

2019-01-13 18:41:07 1427 2

原创安装一下React developer tools

应该是要翻墙。先翻吧，然后打开chrome 中的扩展程序，如下。然后，点扩展程序，如下，进入网上商店，。然后找到react developer tools，添加至Chrome 即可。...

2019-01-13 18:16:10 380

原创 React 单向数据流视图层框架

什么是React 中的单向数据流。首先父组件向子组件传值，可以通过属性传递。子组件向父组件传值，可以调用父组件传过来的函数。单向数据流，是指父组件可以向子组件传递数据，但子组件不可以修改这些数据，否则会报错。React.js 是视图层框架大型界面开发时，React.js 只负责视图层内容，我们还需要数据层框架等的支持。因为很明显，当复杂的组件关系之间，需要传递数据，React.js...

2019-01-13 18:00:38 781

原创 JSX 一些语法要注意的

JSX的注释。首先，JSX 代码，是在render 中 return 里面的，然后，它的注释写法是下面这样的。render() { return ( <React.Fragment> <div> {/*注释*/} <label htmlFor="insertArea">输入内容...

2019-01-13 17:21:10 250

原创之四 axios

axios 是目前vue 官方推荐的ajax 请求的使用方式。我们在项目中使用，首先在项目中安装axios 插件。使用命令 npm install asios --saveaxios 提供的API 如下先占坑......

2019-01-06 17:57:35 146

原创之三命名路由和命名视图

命名路由和命名视图给路由定义不同的名字，根据名字进行匹配给不同的router-view 定义名字，通过名字进行对应组件的渲染我们举例如下。首先，命名路由。如下是GoodList.vue<template> <div> 这是商品列表页 <span>{{$route.params.goodsId}}&lt...

2019-01-06 17:10:05 438 1

原创之三编程式路由

编程式路由，即通过写js 函数，实现路由的跳转。之前路由跳转是通过router-link实现，本篇，我们通过函数来实现router-link 的跳转功能。举例。首先是router／index.js 代码，如下。import Vue from 'vue'import Router from 'vue-router'import GoodList from '@/views/Go...

2019-01-06 16:49:44 1080

原创之三嵌套路由

嵌套路由，即路由中嵌套路由。下面的例子，举例商品列表页面中，通过一个路由查看商品的标题，再通过一个路由查看商品的图片。我们先定义两个组件，Title.vue , Image.vue。下面是Title.vue <template> <div> 商品名称 </div></template><script&gt...

2019-01-06 16:23:53 185

原创之三 Vue-router 前端路由与 “#”

前端路由，将本来根据地址请求后端返回页面，变为了前端直接重新渲染页面。优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户缺点：不利于SEO；使用浏览器的前进、后退键会重新发送请求，没有合理地利用缓存；单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置。vue-router 是构建vue SPA的关键通常，我们使用<router-link>&l...

2019-01-06 15:56:27 7947

purple_lumpy的博客