一、简介 Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎，由咱们部门以及其他开发者共同维护开发，具有使用自由、定制性高的优势，已支持集团内外上百张画布，不夸张的说，我觉得可以算的上“杭州余杭区最自由的图编辑器引擎”。 可是，由于大多数用户对于原生的jquery操作还是略感繁琐，对于React的生态(特别是Antd,Fusion等UI库)支持不够友好，随之而来butterfly对于React & Vue支持的呼声日渐升温。很抱歉...
解决异步：1、nextState（推荐）import React from ‘react‘class Home extends React.Component{ constructor(props){ super(props); this.state = { data :0 } } componentDidMount(){ this.timer = setInterval(()=>{this.setState({date:new Date()})},1000) } componentWillMount(){ clearInterval(this.timer) } render(){ return( <Reac...
这是一个单独的页面，可以从其他地方跳转过来。输入语言关键字，从github检索相关数据import React, {Component} from ‘react‘; import {StyleSheet,View,Text,Button,TextInput, } from ‘react-native‘;export default class FetchDemoPage extends Component {constructor(props){super(props);this.state={showText:‘‘}}loadData(){let url = `https://api.github.com/search/repositories?q=${this.searchKey}`; fetc...
/*** Sample React Native App* https://github.com/facebook/react-native*/ ‘use strict‘;var React = require(‘react-native‘); var {AppRegistry,StyleSheet,Text,Image,View,TextInput,ListView, } = React; var GIT_URL = ‘https://api.github.com/search/repositories?q=‘;var AwesonProject = React.createClass({/*-- lifecycle --*/getInitialState: function() {return {// (row1, row2) => row1 !== row2：如果...
前言：相信许多人应该踩过这个坑，使用数组splice方法删除时候，然后通过setState更新数组，setState不工作。打印原数组已经删除了某一项，页面数据却不变。1、错误实例 removeEntities = (entities) => {const { arr } = this.state;arr.map((item, index) => {if (item === entities) {arr.splice(index, 1);this.setState({arr: arr, }); console.log(arr) //这里打印发现arr已经发生了变化，但是setState在页面...
比如我们要实现的是这种效果：用这种方法来写，她只能写死在哪，没啥意思，所以我们定义一个数据，然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./js/react-with-addons.js"></script><script src="./js/react-dom.js"></script><script src="./js/browser.min.js"></script></head><body><div id="demo"></div><script type="text/ba...
react做得最好的事，就是配合UI展示数据，通过调用接口，如果返回的数据发生改变，页面展示的数据会自动地发生改变。 react可以使用jsx语法，允许在js代码中直接写html标签，并且在节点上直接绑定数据，在父级和子级之间的同信时，使用props进行通信。props是properties的简写。为什么react使用jsx更好，请查看http://reactjs.cn/react/docs/jsx-in-depth.html react的组件其实很简单，可以简单的理解它就是一个函数，通过props和s...
获取网络数据在上一节，我们已经通过模拟数据，并将UI展示出来。这节我们将获取网络数据。数据来源于网络，仅用于学习使用。fetch介绍fetch是react native的一个网络请求库，使用该库不用引入模块，可以直接使用。一个简单的请求如下：fetch(‘http://facebook.github.io/react-native/movies.json‘)发起请求之后，我们还需要对它的响应进行处理，只要这样fetch(‘http://facebook.github.io/react-native/movies.json‘) .then((...
React是单向数据流，在react中父组件可以通过props方便的向子组件传递数据，但是子组件怎么向父组件传递值呢？首先通过父组件给子组件传递一个函数，然后子组件通过参数传到父组件，通过props来传递函数的引用，并通过回调的方式实现，其实就是子组件调用父组件的方法，把数据以形参的方式传出来。如何把子组件的数据传回父组件呢？就需要使用函数在子组件之间调用，通过函数传给父组件，如下图：原文：https://www.cnblogs.com/ba...
一、安装redux-persist： npm install redux-persist --save二、.babelrc中增加redux-persist配置："plugins": [["import",{ "libraryName": "redux-persist", "libraryDirectory": "es"}],]三、在生成store的文件加入redux-persist配置：import createMiddleware from ‘./../redux/middleware/index‘; import createReducer from ‘./../redux‘; import { persistReducer } from ‘redux-persist‘; import storage from ‘...
1、npm i redux-persist --save 2、store/indeximport { createStore, combineReducers } from ‘redux‘; import reducers from ‘./reducers/index‘; import {persistStore, persistReducer} from ‘redux-persist‘; import storage from ‘redux-persist/lib/storage‘;const persistConfig = {key: ‘healthRoot‘,storage: storage };const _reducers = persistReducer(persistConfig, combineReducers(reducers)) const st...
MobX文档建议我应该在所有组件上使用observer.但是,通过使用注入,我可以更精细地控制哪些数据导致重新呈现我的组件. 我的理解是,对于观察者来说,即使observable嵌套在数据存储的深处,最后渲染中所有被访问的observable的更改也会导致重新渲染,而当注入器函数中访问observable时,只注入重新渲染更改. 例如：class Store{@observable data = {nestedData: {deepData: 'my_data'}} }const store = new Store();... Assume the store i...
上篇文章写到了redux实现组件数据共享的方法，但是在react中，redux作者提供了一个更优雅简便的模块实现react组件之间数据共享。那就是利用react-redux 利用react-redux实现react组件数据之间数据共享1.安装react-redux$ npm i --save react-redux2.从react-redux导入Prodiver组件将store赋予Provider的store属性,将根组件用Provider包裹起来。 import {Provider,connect} from react-redux ReactDOM.render( <Provider store={sto...
我有一个包含对象的数组.我正在创建此数组的映射以使用span组件呈现名称.let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];我一直在使用以下两个不同的功能来迭代该对象数组,并使用map来呈现JSX元素. Functionality1：import React, { Component } from 'react'; class App extends Component {render() {let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];const items = data.map...
当我要提取listDate的时候,map提示undefined.打印listDate的时候显示其中有map的方法。这是为什么呢？代码很简单，就是react中文网的例子. 这是php的代码: { "status":0, "records":{"title": "Here's the book list","listData": [{"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"},{"name": "女人天生高贵", "author": "XiaoDong"},{"name": "海是彩色的灰尘", "author": "XiaoXi"}]} } 这是react代码回复内容：当我要提取...