要做移动端应用，同时要适配ios、android和微信。搜索、试验、思考...几天内进行了好几轮，最终决定采用react-native & antd-mobile来实现我们的目的。 思路&选择 在网上搜索，看到了多种方案。第一种，利用redux，共享业务逻辑，自己维护两套UI组件；第二种，利用react-native-web，先写移动端，再将移动端转换成H5；第三种：利用styled-compon

前言 React的主要思想是通过构建可复用组件来构建页面. 所谓组件,其实就是有限状态机(FSM),通过状态渲染对应的界面,且每个组件都有自己的生命周期, 它规定了组件的状态和方法需要在哪个阶段改变和执行. class Collections extends Component { constructor(props) { super(props); thi

从0实现一个tiny react（三）生命周期 在给tinyreact加生命周期之前，先考虑 组件实例的复用 这个前置问题 复用组件实例 render函数 只能返回一个根 class A extends Component{ render() { return (<B>...</B>) } } class C extends Component { re

此博客基于react-native-0.48.4 ScrollView简介 一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。 这个就跟Android中的ScrollView总体来说是一样的，将会超出屏幕的视图使用ScrollView包裹来滑动查看。 ScrollView文档属性介绍 来编写个案例实现下 新创建个ScrollTest.js组件，然后在in

这是《玩转 React》系列的第三篇，看到本篇的标题，了解过 React 的同学可能已经大致猜到我要讲什么了，本篇中要讲的内容对于刚接触 React 的同学来说，可能有些难以接受，但希望你能坚持学下去，这是 Facebook 的前端大神们为前端开发做出的革命性创新。 React 第一印象 废话不多说，先看一段代码： class HelloMessage extends React.Componen

当前 RN 版本：0.48 操作环境：Windows 10 前言 最近大概学习了一个月的 React Native 了，算是有了不少的收获。一开始觉得很难，但是代码敲多了，觉得入门还是很简单的。由于我是一名 Android 开发者，所以我就站在自己的角度，给想接触 React Native 的 Android 开发者一些建议。 学习建议 需要用到的知识点 JavaScript ES6 JSX Re

Hello World 所有的入门教程几乎都从“Hello World”讲起，这个也不例外。 项目初始化 接上文，我们的项目目前还是个空壳子，什么都没有，现在要先进行项目初始化操作。 打开vs code里的Terminal，通过点击View-Integrated Terminal来打开内置的Terminal 执行npm init命令来创建package.json文件，许可证那我该成了MIT，其它基

前言 今天由京东 @ 刘威在今年 FEDAY 分享的《基于React Native的跨三端技术实践》 概要 熟悉前端团队打造、前端工程化，关注前端和客户端技术。曾带领团队开发京东前端集成解决方案、跨平台架构实践方案。跨三端架构设计思路，相关工具、组件、系统介绍，以及相关落地实践。 最后，为你推荐： 【第1066期】重新授权许可React、Jest、Flow 与 Immutable.js 【第565

前言 　　首先欢迎大家关注我的掘金账号和Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。 　　之前分享过几篇关于React的文章: React技术内幕: key带来了什么 React技术内幕: setState的秘密 　　其实我在阅读React源码的时候，真的非常痛苦。React的代码及其复杂、庞大，阅读起来挑战非常大，但是这却又挡不住我

React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类 本文作者：胡子大哈 本文原文：http://huziketang.com/books/react/lesson4 转载请注明出处，保留原文链接以及作者信息 在线阅读：http://huziketang.com/books/react 为了让代码更灵活，可以写更多的组件，我们把这种模式抽象出来，放到一个 Componen

在常规的React数据流中，props是父组件与子组件交互的唯一方式。为了修改子元素，你需要用新的props去重新渲染子元素。然而，在少数情况下，你需要在常规数据流外强制修改子元素。被修改的子元素可以是React组件实例，也可以是DOM元素。在这种情况下，React提供了解决办法。 何时使用Refs 下面有一些恰当地使用refs的场景: 处理focus、文本选择或者媒体播放 触发强制动画 集成第三

RN 版本：0.50 操作环境：Windows 10 React Navigation 版本：1.0.0-beta.20 文章同步自简书：http://www.jianshu.com/p/2dbcdcf1da58 本节主要讲 StackNavigator 与定义相关的详细属性。 在新的页面被放入栈顶之后，StackNavigator 给你的应用程序提供了切换页面的方法。在 iOS 与 Androi

生命周期相关函数 初始化的时候会执行4个钩子：constructor、componentWillMount、rende、componentDidMount 1、constructor 页面加载的时候执行 constructor (props) { super(props)//this this.state = { str:

图标地址: 链接：https://pan.baidu.com/s/1jI1mHk6 密码：je3j //偷个懒，图标都是阿里素材直接下的，懒得改(当然，自己写着demo，简单易懂就好，工程上还是得好好命名) /** * Created By WiFi ON 2017/12/5 16:46 */ import React, { Component } from 'react'; import { V

前言 在上一篇文章，我们已经实现了React的组件功能，从功能的角度来说已经实现了React的核心功能了。 但是我们的实现方式有很大的问题：每次更新都重新渲染整个应用或者整个组件，DOM操作十分昂贵，这样性能损耗非常大。 为了减少DOM更新，我们需要找渲染前后真正变化的部分，只更新这一部分DOM。而对比变化，找出需要更新部分的算法我们称之为diff算法。 对比策略 在前面两篇文章后，我们实现了一个

ImageButton.js文件完整的代码如下： import React, { Component } from 'react'; import {   StyleSheet,   Text,   View,   Image,   TouchableWithoutFeedback, } from 'react-native'; export default class ImageButton e

React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件 React 入门系列教程导航 React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念 React + webpack 开发单页面应用简明中文文档教程（二）创建项目 React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件 React +

为什么要学习redux-form？ 我们知道，react-redux为React开发提供了科学的存储管理方案。另一方面，类似Semantic-UI与Material UI，Ant-UI等则提供了比较全面的基于React组件框架的UI解决方案。但问题在于，后者提供的UI方案还有很大的局限性，特别是对于form表单的各种应用需求支持方面。为此，相对于简单的表单应用，为了减少重复冗余的代码，我们可以去使

本文是上一篇的简短补充——再细致总结一下在redux-form项目中使用Flow的步骤。 注：我使用的React开发工具是WebStorm，所以有些细节是有关于它的。 内容如下： 第一步: 初始化项目 一种方法是在你的项目根目录的用命令列工具输入下面的指令： flow init 这将会创建一个.flowconfig文档，如果这个配置文件已经存在就不需要再进行初始化，这个配置文档可以加入自定义的设置

提醒和建议 根据我的粗浅经验，如果您对Formik感兴趣，并且想深入学习与使用这个库，我建议您还是先对redux-form的使用逻辑与有关概念有所了解，而且理解和使用方面也变得容易得多的多。因为Formik中许多概念与形式与redux-form极其类似，但是各方面都简化了很多，因为它不再依赖于约束整个前面存储的Redux store的限制，由于整个前端使用一个store存储，所以，随着表单数量与形