内容提要元素与组件 Element & Component函数定义与类定义组件 Functional & Class展示与容器组件 Presentational & Container有状态与无状态组件 Stateful & Stateless受控与非受控组件 Controlled & Uncontrolled组合与继承 Composition & Inheritance元素与组件 Element & Component元素元素是构建React应用的最小单位。元素所描述的也就是你在浏览器中能够看到的东西。根据我们在上节课中讲到的内容，我们在编写React代码时一般...
本篇文章主要介绍了浅谈React Native 中组件的生命周期，非常具有实用价值，需要的朋友可以参考下概述就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在...
在用Reactnative写工程时，默认奇妙的有一种像OC中，或者Java 中或者当前类的私有属性的想法，state 和props都不能满足时，就是ref 它能达到其他语言中持有一个view组件，并且局部的刷新 ref 接受值为string类型的参数或者一个函数functioncallback。这一特性让开发者对ref的使用更加灵活。 render() {return <TextInput ref={(c) => this._input = c} />;},componentDidMount() {this._input.focus();}, render(){return <View ...
这篇文章主要介绍了React Js 微信禁止复制链接，分享，禁止隐藏右上角菜单的解决代码,需要的朋友可以参考下废话不多说了，直接给大家贴代码了，具体代码如下所示：/*** Created by wuyakun on 2017/5/23.*/let wxUtils = {}; /*** 是否开启右上角Menu* @param open*/ wxUtils.optionMenu = function (open = true) {if (open) {openOptionMenu();} else {disabledOptionMenu();} }; /*** 是否禁用右上角*/ function disabledOption...
关于Suspense的使用，先来看下示例代码 const OtherComponent = React.lazy(() => import(./OtherComponent));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>); }OtherComponent是通过懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。在<OtherComponent />外面使用Suspense标签，并在fallback中声明OtherComponent...
问题 在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。 思路 原理 以进入时 opacity: 0 --> opacity: 1 ，退出时 opacity: 0 --> opacity: 1 为例 元素挂载时 1.挂载元素dom 2.设置动画 opacity: 0 --> opacity: 1 元素卸载时 1.设置动画 opacity: 0 --> opacity: 1 2.动画结束后卸载dom 组件设计 为了使得组件简单易用、低耦合，我...
节流 方法一import Throttle from lodash-decorators/throttle; export default class Search extends Component { constructor(props) { super(props) this.handleSearch = this.handleSearch.bind(this); } handleSubmit = (e) => { e.preventDefault(); this.handleSearch(); } @Throttle(300) handleSearch() { ... } render() { return ( <form onSubmit={this.handleSubmit}><form> ) } }方法二import throttle from lodash/...
在项目中我们可能会遇到类似这样的场景，也就是父子组件的双向数据绑定首先，先把在head中引入react.js、react-dom.js和可选择的babel.js(这里需要注意引用的顺序，react.js必须在react-dom.js之前) <head><script src="react.js"></script><script src="react-dom.js"></script><script src="babel.js"></script> </head> 在body里新建一个挂载点 <body><div id=app></div> </body> 然后就可以开始写JSX了，注意script标签需注明...
前言 最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧 在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理事件捕获与冒泡DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。IE9 及之前的版本...
发现问题 我们在给一个dom元素绑定方法的时候，例如：<input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} />React组件中不能获取refs的值，页面报错提示：Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子import React from react; import $ from jquery import ../app.scss;export default class MyForm extends React.Component {submitHandler (event) {event.pre...
为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始Dom绑定事件的时候, 还需要通过组件获取原始的Dom, 而React也提供了ref为我们解决这个问题. 为什么不能从组件直接获取Dom?组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM如果需要从组件获取真实 DOM 的节点，就要用...
前言 为了在我的编辑器中使用 Angular，我用 Angular 编写了一个重命名功能。而为了使用它，我得再次使用一次 customEvent ，而在这个微前端架构的系统中，其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前，我得尝试有没有别的方式。于是，我想到了之前在其它组件中使用的 Web Components 技术，而 Angular 6 正好可以支持。 下面话不多说了，来一起看看详细的介绍吧 HTML 中引入 Web Components我所需要做的事情也相...
网上看到很多js实现的关键词高亮显示，方法都是一个道理，先获取要替换的文字区域，然后在用正则匹配到关键词，并进行替换。 react中实现起来似乎更简单一些。 我这里的需求是通过搜索框搜索出新闻列表，在已经获取到新闻列表数据中使用filter函数，获取到每一个新闻的title,并定义关键词正则，返回替换后的样式，react不能直接解析带html标签的字符串,方法如下： render() {const newsList=this.state.newsList;if(this.props.typ...
前言 在React项目的开发中经常会遇到这样一个场景：嵌套组件与被嵌套组件的通信。 比如Tab组件啊，或者下拉框组件。场景 这里应用一个最简单的Tab组件来呈现这个场景。import React, { Component, PropTypes } from react class Tab extends Component {static propTypes = {children: PropTypes.node}render() {return (<ul>{this.props.children}</ul>)} } class TabItem extends Component {static propTypes = {name: PropType...
触发原理原理就是监听键盘输入，比如扫一个为6970596130126的69条形码，用扫码枪扫一下会在光标位置依次输出：6 9 7 0 5 9 6 1 3 0 2 6但这不是完整的，所以需要写一个函数scanEvent来整理收集到的每个编号。 let code = ; let lastTime,nextTime,lastCode,nextCode;function scanEvent(e, cb) {nextCode = e.which;nextTime = new Date().getTime();if (lastCode != null && lastTime != null && nextTime - lastTime <= 30) {cod...