前言 在这个前端技术爆炸的时代，不自己写套开源框架出门都不好意思跟别人说自己搞前端。去年年初接触的react，16年7月份在github开源了一套针对react、redux探索的项目，近期和伙伴们一起重构了这个项目，等待大伙拍砖。。。搞不明白为什么一发布到首页区就会被移除。。。框架介绍mk框架 = monkey king框架 = 齐天大圣框架基础技术栈：react、redux、immutable、antd、webpack、nodejs、hapi、sequelize、node-zookeeper-dub...
React并不是一个框架，React提供了一些新颖的概念、库 和编程原则让你能够同时在服务端和客户端编写快速、紧凑、漂亮的代码来构建 你的web应用。React里常用的概念或技术：ES6 React虚拟DOM（virtual DOM）组件驱动开发（component-driven development）不变性（immutability）自上而下的渲染（top-down rendering）渲染路径和优化打包工具, ES6, 构建请求, debugging, 路由等同构React（isomorphic React）什么是React.jsReact.js...
学习react中，我一直认为，总组件里面才有构造函数，但是我才发现我的观点是错误的，构造函数是可以出现在子组件里面的。今天有一个错误是点击增加/减少input框里面 的数值我一直在寻找input框里面的数值，也就是value值，我发现我的思维错误的很彻底。react只是view，是不能操作数据的，只能渲染原始数据的变化，换句话说就是我要改变数值，只能改变原始数据里面的值，然后重新渲染到input框里面。我的原始数据，给了value:1;当点...
学习React也有半个月了吧，这里对所学的基础知识做个简单的总结。自己先是跟着官方文档学，差不多学了四五天，也跟着入门教程做了一个简单的小栗子。然后跟着阮一峰老师的教程上手了几个小Demo，后来在网上发现了一本很好的书React.js小书，自己断断续续也学了几天，上面也几个实战的小项目，可以跟着练练手。 话不多说，就直接来总结吧！JSX组件区分props和state生命周期函数事件系统高阶组件React.js的context函数式编程使用Prop...
React Js组件： 组件（Component）是为了更好的维护我们的应用，可以在不影响其他的组件的情况下更新或者更改组件。 state:是标记数据的来源，我们使state比较简单和单一，如果我们有是个相应的state，我们应该进行相应的封装，我们应该创建一个容器组件来保存所有的值。 如下面代码： import React from ‘react‘ class App extends React.Component{ //有状态的值 constructor(){ ...
需求：界面新增一个“导入项目”按钮，点击该按钮可以执行项目导入功能。假设点击事件部分是jsx语法代码，而项目导入部分是封装的js语法代码，此处用alert("123")代替。具体示例如下：项目导入部分ImportProject.js文件：export const IMPP = { click_alert:function(){ alert("123"); } };jsx里引入js文件部分：import {IMPP} from‘./ImportProject.js‘;jsx里按钮点击事件部分：render() {return (<button type="button" classN...
现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了，最后我也会把完整柱形图代码奉上。如果还有疑惑的，可以去翻看一下我之前介绍的方法，以下方法都有介绍到。还有数据都是自己定义的假数据，大家参考一下制作方法即可。 首先定义柱形图的数据、绘图区域的宽高、和上下左右的边距:1var width = 600; //SVG绘制区域的宽度2var height = 500; ...
使用React官方的脚手架工具create-react-app创建的项目，目录中会存在registerServiceWorker.js这个文件，这个文件的作用是什么呢？这个文件可以使用也可以不使用，使用它可以使你的react项目变成一个PWA（Progressive Web Application）, 也就是说，在线上，只要访问过一次你的网站，下一次即使没有网络，这个应用依然可以被访问。当然，它的好处不仅这么一点点，在移动端打开项目时，如果你用的是chrome或者firefox这样的高级浏览...
我们的项目是一个tob的项目，今天遇到一个问题就是：项目经理希望去掉浏览器的那些强制缓存。 目前react脚手架中用到的是service-worker来控制浏览器的缓存。但是项目经理希望使用hash，就是打包之后生成的文件名带上hash值。 这样每次打包部署之后，文件名都是发生了改变，都会重新加载，没有缓存。 步骤： 1.在webpack 的config.js文件上加上hash:true 2.因为目前使用的是service-worker，所以在global.js文件中需要将service-w...
我需要有React Flux异步API请求模式经验的人的输入.在以下情况下缓存api响应的更好方法是什么： >我有3个列表的文章页面,每个文章都有相应的API端点来获取数据.>每篇文章都有详细信息页面UI,但是没有articleById端点,所以我只是在获取的数组中找到id所需的文章>我想在列表上只发出1个请求并对其进行缓存,因此当我从列表中转到详细信息页面或返回列表时,将不会有API请求.>当我切换到另一个列表时,我应该发出请求并缓存它. 我想知道我...
调试代码之前，我设置了两个缓存分别是username和content在控制台console设置两个缓存代码localStorage.setItem(username,老王) localStorage.setItem(content,类容)运行下面代码一定要先设置这两个缓存，因为我在高阶组件封装了公共方法，调用缓存到输入框的value里，高阶组件返回的组件调用了这个方法reactreact-dom.state={data:==(event)=>=<Comp handBlur={.handBlur} data={.state.data}/> <input type="text" defaultValue=...
我正在使用reactjs,并且在尝试显示json数据时(无论是来自文件还是服务器)似乎无法阻止此错误：Uncaught TypeError: this.props.data.map is not a function我看过： React code throwing “TypeError: this.props.data.map is not a function” React.js this.props.data.map() is not a function 这些都没有帮助我解决问题.我的页面加载后,我可以验证this.data.props没有未定义(并且有一个等价于json对象的值 – 可以使用window.f...
使用React和Redux,假设您有一个将请求发送到外部API的组件方法.import React, { Component } from 'react'; import { connect } from 'react-redux';class MyComp extends Component {boolUpdate (val) {fetch('http://myapi.com/bool', { val });}shouldComponentUpdate (nextProps) {return false;}render () {return <h1>Hello</h1>;}}const mapStateToProps = ({ bool }) => ({ bool });export default connect(mapStateToProp...
我们正在使用FLUX架构在React JS中开发时间跟踪客户端,并且想知道整个应用程序状态应该在单个状态对象中. >以便父组件可以在发生更改时获取状态,并通过props将其传递给子组件 要么 >每个组件都应该有自己的状态对象,因此当从商店触发状态更改时,它们可以单独请求其状态和setState.解决方法:您应该尝试尽可能地将状态推送到层次结构中.因此,您应该支持让父组件成为有状态,并将数据传递给无状态(纯)组件.这使得理解应用程序变得更容易...
在react项目开发中有一个需求是，页面滚动到tab所在位置时，tab要固定在顶部。实现的思路其实很简单，就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时，将tab的position变为fixed。在react中，我在state中设置一个navTop属性，切换这个属性的值为true或者false，然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed。一开始我是这样写的：import cs from classnames;class FixedTab extends React....