可以这么说，一个 React 应用就是构建在 React 组件之上的。 组件有两个核心概念： props state 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。 注意：组件生成的 HTML 结构只能有一个单一的根节点。 props 前面也提到很多次了，props 就是组件的属性，由外部通过 JSX 属性传入设置，一旦初始设置完成，就可以认为 thi

在《我们是如何将 Cordova 应用嵌入到 React Native 中》 一文中，我们简单地介绍了『React Native 重写 Cordova 插件：复杂插件的调用』步骤： WebView 调用 RN 方法，并监听 React Native 返回的相应事件 React Native 接收到 WebView 的调用，调用原生代码，并监听原生代码返回的相应事件 原生代码执行 React Nat

组件化是前端框架一个重要的思想，也是让我们偷懒的一个方法之一，

React Native 提供了大量的原生组件，但是为了近一步提升开发质量和效率，也可以使用第三方组件。 通过以下两个网站可以找到大量的第三方组件：     1.https://github.com     2.https://js.coach/react-native 第三方库资源汇总    http://www.jianshu.com/p/53ff78168acc 一、react-native

1.组件demo 组件是react最重要的功能，react的核心就是组件化开发我们的项目。 我们一个页面可以由n个div组成：那么同样我们把这n个div结构就可以划分成n个react组件，最后形成我们的页面。 我们要布局的页面包含： header center footer import React from 'react'; import ReactDOM from 'react-dom'; i

什么是状态？就是组件默认要使用的数据 1.定义状态 在定义组件，我们知道使用的是子类继承父类的方式，我们直接在构造函数中设置即可： //设置组件 class Event extends React.Component { constructor(props) { super(props); // 设置 initial state this.s

前言 最近在写一个面向 React 初学者的系列教程玩转 React，内容对有 React 开发经验的同学来说可能太过于基础和啰嗦，不太感兴趣。所以我打算同时开始另外一个系列文章《React 开发实战》。该系列主要面向有 React 开发经验的同学，更侧重 React 实战，每一篇文章会跟大家一起开发一个 React 组件或者一个简单有趣的 React 应用，这些组件或者应用往往满足如下特点： 在

React实践之Tree组件 实现功能 渲染数据 展开合并 使用 数据结构： const node = { title: '00000', key: '0' , level:'level1', open: true, child:[ { title: '0-111111', key: '0-0', level

在对自己开发的组件中经常会做诸如以下的引用： import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs'; import { parseQuery, stringifyQuery } from '../../../utils/query'; import mapMyToProps from '../.

Android 平台下, React Native WebView 的官方组件，无法上传文件，<input type = "file"> 不能打开文件对话框，需要自己监听事件去扩展。 幸好这里有一个封装好的库，可以直接使用： https://github.com/lucasferreira/react-native-webview-android 那么问题来了，这个库只有android版本，所以i

我正在玩React和ES6使用babel和webpack。我想在不同的文件中构建几个组件，导入在一个文件，并捆绑起来与webpack 让我们说，我有这样的几个组件： my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar exte

React Native 应用根组件的注册和调用 ，原理如下图： AppRegistry.registerComponent 接口将React Native 平台的根组件 RNTransplant 注册到了原生平台上。当React Native启动时，原生平台会调用该组件，iOS工程中调用 React Native 组件的AppDelegate.m 代码为：

在浏览器打开React单页应用，习惯上会把整个应用所有的JS文件一次性加载完。什么？暂时不需要的JS文件也要加载，这肯定很慢吧？对。那你不妨试试下面这种对JS文件的懒加载，看合不合你项目使用。 一、安装bundle-loader依赖 npm i --save-dev bundle-loader 二、定义一个叫作lazy.js的React高阶类。 ··· import React, {Compone

在使用 React 编写组件的时候，我们常常会碰到两个不同的组件之间需要共享状态情况，而通常的做法就是提升状态到父组件。但是这样做会有一个问题，就是尽管只有两个组件需要这个状态，但是因为把状态提到了父组件，那么在状态变化的时候，父组件以及其下面的所有子组件都会重新 render，如果你的父组件比较复杂，包含了其他很多子组件的话，就有可能引起性能问题。 Redux 通过把状态放在全局的 store

在使用react-native的时候，经常要自定义很多组件，但是只能使用../../../的方式，经常不记得这是多深，有没有一个插件，能自动帮我们解决这样的问题？节省我们的时候，也将项目看起来更漂亮一点，答案肯定有的，不然不会有这文章了，好了回归正题。 使用指南 我们使用的目标要达到以下的使用效果 // 通常 import SomeExample from '../../../some/exam

我注意到reactDOM.renderToString()方法开始显着减慢，当在服务器上渲染一个大的组件树。 背景 有点背景。该系统是一个完全同构的堆栈。最高级别的App组件呈现模板，页面，dom元素和更多组件。看看react代码，我发现它渲染〜1500组件(这包括任何简单的dom标签被视为一个简单的组件，< p>这是一个反应组件< / p&gt ;. 在开发中，渲染〜1500个组件需要约200-

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

写了一个还算优雅的图片组件 mult-transition-image-view 截图： 前言 发现项目中的图片占位模块写得很不优雅， 找了一圈，发现没找到自己想要的图片组件。 于是自己写了一个。 功能简介 首先它是一个比较优雅的组件：用起来不头疼。 第二个它能实现以下场景： 没有图片的时候，显示一个占位图（可以直接用css来写背景，方便自定义） 希望在加载大图的时候，能先占位一张小图，然后再过渡

为什么要使用高阶组件？ 想想以前用原生和jQuery的项目，上千行的code映入眼帘，瞬间有种昏死过去的冲动。代码难以维护，改一个bug可能出现N个bug，真的是很痛苦。于是乎组件化成为了当前前端开发的主流技术。angular、vue和react很好的帮我们实现了组件化。 但是我们常常也会遇到一种情况，就是两个组件往往有很多的重复代码(可能是相同的属性，也可能是相同的方法)。例如，在登录和注册组件

本文原创首发于公众号：ReactNative开发圈 Realm是一款专为移动​端开发的高性能数据库。支持React-Naitve，支持 iOS 和 Android。官网文档地址：https://realm.io/docs/javascr...。 前提 React Native的版本要大于等于0.31.0 安装 npm install --save realm react-native link r