在移动开发中，动画能有效的提高用户体验。在 React Native 中，也有相应的 API 供我们做动画。这里着重说一下 Animated 动画库，它可以让我们非常简便的去实现各式各样的动画和交互方式，而且具备很高的性能。Animated 目前只封装了四个可以动画化的组件：View、Text、Image、ScrollView，不过你也可以用 Animated.createAnimatedComponent() 来封装你自己的组件。 话不多说，我们来举个栗子：步骤拆解1、创建 Animated.Value，设...
####react最基础的语法和不依赖环境的纯前端免编译代码参照：http://www.ruanyifeng.com/blog/2015/03/react.html 注意事项：1.必须放倒服务器上，在文件系统上无法运行 login.html<!doctype html><head><meta charset="utf-8"><script src="https://npmcdn.com/react@15.3.1/dist/react-with-addons.min.js"></script><script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script><script src="https://np...
1. 设计思想 vue： vue的官网介绍说vue是一种渐进式框架，采用自底向上增量开发的设计； react： 采用函数式编程，推崇纯组件，数据不可变，单向数据流；2. 编写语法 vue： 采用单文件组件格式，保留了html，css，js分离的写法； react： 通过jsx渲染模板，html，css全部写入js中；3. 构建工具 vue： 提供cli脚手架，可以非常容易的创建项目并进行配置； react： 使用creat-react-app，有局限行，不能完成某些配...
????React含义及特点?? ?React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库，是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。即由数据驱动变化的UI组件。? ?? ?传统的UI库，我们需要使用Ajax对后台进行数据获取，往往是主动型程序。即我们需要去拉取数据，而React.js是自动拉取型，相当于可以进行监听与自动渲染，并且速度比较快。声明式 (Declarative)：数据变化后，React 概念上与点击“刷...
2．使用React编码下面正式开始使用React来编写前端代码。（1）npm安装react和react-dom：npm install react react-dom -S（2）用下面代码替换./src/index.jsx中的console：import React from‘react‘;import { render } from‘react-dom‘;class App extends React.Component {render () {return <p> Hello React</p>;}}render(<App/>, document.getElementById(‘app‘));（3）在根目录下执行：./node_modules/.bin/webpack -d现...
import React from "react";import ReactDOM from ‘react-dom‘import * as XLSX from ‘xlsx‘;import {Button, message, Table,Upload} from ‘antd‘;import ExportJsonExcel from ‘js-export-excel‘;import ‘antd/dist/antd.css‘;const Dragger = Upload.Dragger;class Index extends React.Component { constructor(props) { super(props); this.state = { dataSource: [],//表格内容 ...
前端导出excel（安装xlsx）demo 地址https://sheetjs.com/demo/manifest.html案列1. 将页面的table 元素 变成excel文件并下载import XLSX from "xlsx"createElsx(){ // 获取表格的dom元素 var elt = document.getElementsByTagName(‘table‘)[0]; console.log(elt) // 将表格的dom 元素转化为 excel工作薄 var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"}); // 将工作薄导出为excel文件 XLSX.wr...
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开...
前言 这篇博文接 【前端】react and redux教程学习实践，浅显易懂的实践学习方法。 ，上一篇简略的做了一个redux的初级demo，今天深入的学习了一些新的、有用的，可以在生产项目中使用的前端架构，我将尽量以最简单的语言描述，如果有童鞋看不懂，也可以私下问我。 复习 前一节我们已经知道，一个redux应用，主要有几个概念，它们的共同作用都是管理一个全局state，使react组件的state集中处理，想一下你在写react组件的时候...
/*** 下载图片*/ async openDownload(imgUrl, name) {const link = imgUrl;const files = link.split(‘.‘);const type = files[files.length - 1];// 初始化 XMLHttpRequestconst x = new XMLHttpRequest();if ([‘jpg‘, ‘png‘, ‘jpeg‘, ‘gif‘].includes(type)) {// 图片const image = await this.getBase64Image(link);x.open(‘GET‘, image, true);} else {// 非图片x.open(‘GET‘, link, true);}x.responseType = ‘...
一、Redux整体感知Redux是JavaScript状态管理容器，提供了可被预测状态的状态管理容器。来自于Flux思想，Facebook基于Flux思想，在2015年推出Redux库。中文网站：http://www.redux.org.cn/官方git：https://github.com/reduxjs/redux 首先要引redux.js包，这个包提供了Redux对象，这个对象可以调用Redux.createStore()方法。<body><h1 id="info"></h1><button id="btn1">加</button><button id="btn2">减</button><button id="btn3...
刚写好的文章一不小心点错界面被覆盖掉，那种心情真tm酸爽，好了都怪自己不小心。发完牢骚还是要继续重来。在介绍react之前首先要说说为什么用它。我最初发现他时在material ui这个前端实现框架里面。这个框架的实现使用的正式react,react是由facebook 工程师提出来的前端组件化思想的实现。前端组件化的思想出现是因为大型项目需求的刺激。为了优雅的实现大型项目，我们必须把它一块一块的分离出来再去实现。这里给大家一篇关于探...
countdown = total => {let totalTime = new moment(‘2018-01-01 00:00:00‘, ‘YYYY-DD-MM HH:mm:ss‘).add(parseInt(total, 10), ‘seconds‘)let now = new moment(‘2018-01-01 00:00:00‘, ‘YYYY-DD-MM HH:mm:ss‘)this.setState({time: totalTime.format(‘mm:ss‘),})const t = setInterval(() => {totalTime.subtract(1, ‘seconds‘)if (totalTime.valueOf() >= now.valueOf()) {this.setState({time: totalTime.format...
React前端js跳出ForEach循环的方式今天踩了一个前端的坑。当forEach循环中满足某个条件时候就不在循环了。内心第一反应 添加return false 或 return 搞定~ 但是代码他依旧继续循环。最后找到问题所在，forEach跳出的方法是throw err次才行，严格意义上说 map forEach 他们本身属于迭代行为 就不支持跳出的。当然这个throw err是使程序中断-跳出。总结了一下跳出所有循环的方法：1.使用try catch 跳出forEach循环try {var array = [...
前言每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：必须使用它的模块机制必须使用它的依赖注入必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他...