前一阵子公司要求项目从新架构，但又只给不到一个月的时间，这显然是不可能的。但从新架构又是在所难免的，和同事商定后决定一部分交互逻辑比较少的界面先使用MVVM架构，然后慢慢修改。下面整理了一下这次重构的遇到的问题，并希望能给大家一些帮助。1.ReactiveCocoa的使用要使用MVVM模式编程收下选择一个框架，当然不仅仅是ReactiveCocoa这一个框架，这里就不多说。当然我也没用过别的，如果哪位看官用过可以多多指教。接下来我就...
首先我们需要明白什么是单向数据流？你通过onClick触发一个动作，再通过函数/类方法修改组件的state，最后通过render()方法再次运行来更新界面 class App extends Component{}不能完成this的自绑定，所以采用以下方式官方推荐的方法this.onClickMe = this.onClickMe.bind(this);有参数时：onClick={()=>{this.onClickMe(1)}}无参数时：onClick={this.onClickMe}箭头函数类方法onClickMe= () => { console.log(this);}通过箭头函...
问题：正常写tsx组件，必须要引入React模块，但是有时不知为何不导入，也不会报错。而有的项目必须强制引入，不引入还会报错，困扰了很久，现在已经解决，记录一下。经过比较后发现，在tsconfig.json文件中有如下设置。1.打开tsconfig.json文件。 2.将jsx对应改为react。 3.改为react后，会检查所有tsx或者jsx文件，没有引入React的会自动提示。原文：https://www.cnblogs.com/tigerK/p/14902074.html
首先，由RN中文网关于原生模块（Android）的介绍可以看到，RN前端与原生模块之间通信，主要有三种方法： （1）使用回调函数Callback，它提供了一个函数来把返回值传回给JavaScript。（2）使用Promise来实现。（3）原生模块向JavaScript发送事件。其中，在我的博客React-Native开发之原生模块封装（Android)升级版 较为详细的阐述了如何使用回调函数Callback来将数据传向JavaScript 端。 但是有一个比较难以解决的问题是： ...
路由配置 react 中路由的配置其实和vue基本上是一样的，首先引入需要的依赖模块 例如：import { Router, Route, BrowserHistory, Link } from ‘react-router‘ render(( <Router history={BrowserHistory} <IndexRoute component={Login}/> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="...
1. 设计思想 vue： vue的官网介绍说vue是一种渐进式框架，采用自底向上增量开发的设计； react： 采用函数式编程，推崇纯组件，数据不可变，单向数据流；2. 编写语法 vue： 采用单文件组件格式，保留了html，css，js分离的写法； react： 通过jsx渲染模板，html，css全部写入js中；3. 构建工具 vue： 提供cli脚手架，可以非常容易的创建项目并进行配置； react： 使用creat-react-app，有局限行，不能完成某些配...
本文目标从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y yarn add webpack webpack-cli -D 根目录下新建webpack.config.js文件，内容如下 const path = require(‘path‘);module.exports = {mode: ‘development‘,// 入口 这里应用程序开始执行entry: path.resolve(__dirname, ‘src/index.tsx‘),// 出口 output: {// 输出文件的目标路径...
既然选择了北漂，如果不玩命，就被命运玩。最近，Fackbook将自己的著名的框架React Native，宣称支持了Android了。根据公司和朋友的推荐，个人机会在2015年的剩下时间用来研究使用此框架，来完成自己的业务。希望了解熟此框架的大神给予我多多指点。为什么要使用此框架？下面引入自新闻报道开源已是大势所趋，连习惯专有化的巨头也发现了它的力量。Facebook 是其中最积极之一，近几年陆续开源的项目已有 30 多个。刚刚社交巨头又在...
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); yle> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} <![endif]-->l>Normal0f...
更新版本的React Native将会让你访问更多的APIs， 这样我们可以去使用更多的APIs,视图Views，以及开发者工具以及其他一些好用的东西。浏览版本更新日志就会发现整体FB官方开发进度还是非常紧张的，这样就很容易导致旧版本会出现不能用的情况，后期可能会出现不可预料的情况，这边建议大家尽量更新最新正式版本。我们大家都知道一个React Native项目使用Android项目,iOS项目和JavaScript项目三部分进行组成的，而且三者都关联打包在...
Code to be refacted:const AddTodo = (props, { store }) => {let input;return (<div><input ref={node => {input = node;}} /><button onClick={() => {store.dispatch({type: ‘ADD_TODO‘,id: nextTodoId++,text: input.value})input.value = ‘‘;}}>Add Todo</button></div>); }; AddTodo.contextTypes = {store: React.PropTypes.object }; Instead of passing:const AddTodo = (props, { store }) => {We can only pass ‘...
回调函数（推荐） 地址：https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react获得父组件的实例（不推荐）var parent = this._reactInternalInstance._currentElement._owner._instance; 地址：https://stackoverflow.com/questions/34257665/is-there-any-way-to-access-the-parent-component-instance-in-react原文：https://www.cnblogs.com/cag2050/p/9068533.html
1.Virtual DOM 1.将网页所有内容映射到一颗树形结构的层级对象模型上，浏览器提供对dom的支持，用户可以是用脚本调用dom，api来动态修改dom节点，从而达到修改网页目的，这种修改是浏览器完成的，浏览器会根据dom的改变重新绘制改变的dom节点部分 2.修改dom重新绘制渲染的代价太高，前端框架为了提高效率，尽量减少dom的重绘，提出了Virtual DOm，所有的修改都是在Virutal DOM上进行的，通过比较算法，找出浏览器dom之间的差别，使...
//组件第一次初始化的时候加载. import React, {PropTypes} from ‘react‘;//import AppComposer from ‘./views/App/AppComposer‘; //import LoginComposer from ‘./views/Login/LoginComposer‘; //import HomeComposer from ‘./views/Home/HomeComposer‘; //import WatchListComposer from ‘./views/WatchList/WatchListComposer‘; //import SystemLogComposer from ‘./views/SystemLog/SystemLogComposer‘; //import ...
当我们打算使用Webpack构建工具，React和ES6来开发项目的时候，构建这么一套自动化的项目的流程见下： 第一步：webpack是一个基于node的项目，我们使用命令行对webpack进行全局的安装npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack，我们需要将webpack安装到当前的项目依赖中，在新建的文件夹下输入：npm init（安装webpack依赖，...