1、功能需求：由于项目业务需要一个图片预览的功能，又不想引入太多组件依赖，所以决定自己编写一套，实现了图片放大缩小、旋转、查看下一张或上一张图片功能，如图1.0截图所示。2、外部资源：这里的icon图标采用的是 iconfont 里面的图标，自己可以自行寻找自己喜欢的图标代替，或者使用默认的图标，默认的图标css地址为https://at.alicdn.com/t/font_1966765_c473t2y8dvr.css3、功能说明：该组件支持鼠标滚轮放大缩小及esc关闭功...
问题在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。思路原理以进入时opacity: 0 --> opacity: 1 ，退出时opacity: 0 --> opacity: 1为例元素挂载时挂载元素dom设置动画opacity: 0 --> opacity: 1元素卸载时设置动画opacity: 0 --> opacity: 1动画结束后卸载dom组件设计为了使得组件简单易用、低耦合，我们期望如下方式来调用组件：属...
什么是异步组件？简单来说就是异步加载一个组件，正常情况浏览器加载的是我们打包好的bundle.js文件，那么这个文件是集合了所有js是代码，然而我们首屏加载并不需要一次性加载所有的组件，这会造成性能的损耗，所以我们可以使用异步组件，推荐使用（react-loadable）https://github.com/jamiebuilds/react-loadable，那么使用react-loadable就会造成路由跳转的问题，所以我们需要使用withRouter来解决，withRouter组件的功能是让当...
一、简介在讲本篇博文之前，需要你熟知怎么自定义ReactNative组件，然后才好学习将自定义的ReactNative组件制作成第三方库。本文中的自定义的ReactNative组件LoginManager API 源自上篇文章，所以需要先看一下上篇博文。言归正传，ReactNative的确提供了一个非常便捷的方式来扩展Native模块。如果要把模块做成第三方组件的话，还有一些工作要做：首先以一个静态库工程来编译模块代码，提供JavaScript的封装，最后创建Package.json来...
回调函数（推荐） 地址：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
//组件第一次初始化的时候加载. 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 ...
安装：npm install react-lazyload --save-dev 使用：//引入 import LazyLoad from ‘react-lazyload‘;//render中使用 render(){<LazyLoad height={200}><img src="tiger.jpg" /></LazyLoad> } 原文：https://www.cnblogs.com/wuhairui/p/9197511.html
一.首先我们先来看父组件向子组件传值1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的我们来看父组件的代码 1 import React from ‘react‘; 2 import Son1 from ‘./Son1‘;3class Father extends React.Component{4 constructor(){5 super();6 7 }8 render(){9return( 10 <React.Fragment> 11 {/* 我们在这里引入子组件 并声明一个属性str 给他传一个hello */} 12 ...
父组件先进入子组件，子组件挂载完后，父组件开始挂载， 父组件即将挂载(最外层的父组件都还没准备进入，其内部的子组件当然更没进入了) -》 子组件即将挂载 -》 子组件挂载完成(父内部都没完成，父当然不能算完成) -》 父组件挂载完成。 构造函数是类初始化运行的，所以构造函数在组件的所有生命周期钩子之前执行；当异步获取数据时，异步函数会在所有同步函数（包括这种生命周期钩子函数）执行完之后再执行，也就是说，组件在数...
在使用 React 编写组件的时候，我们常常会碰到两个不同的组件之间需要共享状态情况，而通常的做法就是提升状态到父组件。但是这样做会有一个问题，就是尽管只有两个组件需要这个状态，但是因为把状态提到了父组件，那么在状态变化的时候，父组件以及其下面的所有子组件都会重新 render，如果你的父组件比较复杂，包含了其他很多子组件的话，就有可能引起性能问题。Redux 通过把状态放在全局的 store 里，然后组件去订阅各自需要的状...
高阶组件为了提高组件复用性，在react中就有了HOC（Higher-Order Component）的概念。所谓的高阶组件，其本质依旧是组件，只是它返回另外一个组件，产生新的组件可以对属性进行包装，也可以重写部分生命周期。首先看一下简单的例子：在components文件夹下新建Hoc.js组件文件，并在index.js中引入该组件。Hoc.jsimport React, { Component } from "react";function test(props){return (<div>{props.stage} - {props.name}</div>) }...
1、 组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。2、小驼峰命名来定义属性因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为...
es6不支持在<img />标签内直接写图片的路径，即：<img src="../../static/banner.png"/> （1）import 方法：import imgURL from ‘../../static/banner.png‘;<img src={imgURL } />（2）require方法<img src={require(‘../../static/banner.png‘)}/>原文：https://www.cnblogs.com/guanpingping/p/10351141.html
一、简介iOS中的UISegmentControl分段控件，可以设置筛选条件来更新视图或者用来切换控制器。同样地，在ReactNative中兼容iOS平台提供了一个SegmentedControlIOS组件。它的用法差不多，现在来看看。 二、APISegmentedControlIOS组件既提供了属性，也提供了函数可用。示例如下：//控件的细分按钮的标签文案，数组排列 values: PropTypes.arrayOf(PropTypes.string),//选中的控件的某一个细分按钮标签selectedIndex: PropTypes.numbe...
1、子组件调用父组件，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用；2、父组件调用子组件，采用refs的方式进行调用，需要父组件在调用子组件的时候，添加ref属性，并进行唯一命名，在父组件中即可调用；子组件调用父组件创建一个简单组件ButtonComment，调用此组件是需传递参数buttonName，并创建初始化方法getInitialState及点击事件sendSword ：var Butto...