ract native
沈斯明
这个作者很懒,什么都没留下…
展开
-
react -redux之provider作用小析
Provider 是 react-redux 库提供的,redux 本身并不强制依赖它,然而问题是 redux 本身也不依赖 react。作为一个纯粹的 data layer,redux 并不关心你用什么视图引擎,所以如何访问 store 是你自己需要考虑的事情,redux 并不会约束你一定要怎么做。react-redux 是官方提供的解决方案,Provider 本身并没有做很多事情,只是原创 2016-12-06 13:51:07 · 6506 阅读 · 0 评论 -
总结react中遇到的坑和一些小的知识点
总结react中遇到的坑和一些小的知识点在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点。1、setState()是异步的this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.set转载 2016-12-06 20:08:05 · 5199 阅读 · 0 评论 -
react之prop验证代码实例
Prop 验证随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入 propTypes 。 React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes 。下面用例子来说明不同验证器的区别:React.crea原创 2016-12-08 15:14:54 · 490 阅读 · 0 评论 -
WebStorm开发工具设置React Native代码智能提醒
在做React Native开发时,最常用的开发工具有 webStorm ,sublime ,appcode等,很多人都希望开发工具有智能提醒功能,然而我们使用上述开发工具进行React Native开发时并没有较好的提示功能。今天给大家介绍一款插件Webstrom live template 使webStrom支持React Native开发智能提醒。下面进入正题插件下载地址https:/原创 2016-12-08 15:19:01 · 2350 阅读 · 0 评论 -
ReactJS如何DOM操作?
一 获取DOM元素react可以允许我们通过 ref 来定位一个组件。具体的做法是:先给一个组件设置一个 ref=‘xxx’ 的属性,注意这个ref必须是全局唯一的。然后就可以通过 this.refs.city 来访问这个组件。但是请注意,这里拿到的只是虚拟DOM,而不是真实的DOM。只有在render方法执行之后,并且react已经完成了D原创 2016-12-08 15:21:35 · 4699 阅读 · 0 评论 -
ReactJS组件的组合和通信机制解析
一 组合而不是继承React组件是无法继承的,即不存在 React.extend 之类的方法可以定义一个子类。React推崇通过组合的方式来组织大规模的应用。所以所谓父子组件,就和DOM中的父子元素一样,他们是有从属关系,但没有继承关系。比如:[javascript] view plain copyvar Team转载 2016-12-08 15:25:39 · 427 阅读 · 0 评论 -
react+webpack+webstorm开发环境搭建
需要安装的软件node.jsnpm包管理以上两个包的下载地址如下:https://nodejs.org/dist/v6.3.0/node-v6.3.0.pkg由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因,推荐只用阿里的npm源地址npm config set registry https://转载 2016-12-08 15:28:07 · 3823 阅读 · 0 评论 -
React中如何使用refs
ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示:[html] view plain copy print?body> script type="text/jsx"> var App = React.crea原创 2016-12-08 15:30:40 · 3574 阅读 · 0 评论 -
react常用插件大全
1.react-modalhttps://github.com/reactjs/react-modal2.react-modal-bootstraphttps://www.npmjs.com/package/react-modal-bootstrap原创 2016-12-08 15:46:27 · 10834 阅读 · 0 评论 -
如何有效地提高react渲染效率--深复制,浅复制,immutable原理
1. 性能意义:保持state不变这个约束引导我们使用局部更新对象的方法,这样会可以非常有效地提高react或其他显示框架的渲染效率。我们先来看看为了保持数据不变性,要怎么对state做更新,以我们的苹果篮子state为例:例子:通知开始摘苹果:apple/BEGIN_PICK_APPLE为了保证每个版本的state不变性,我们有两种实现方式:“深复制”,“浅复制”。我们来看两种模原创 2017-03-10 13:06:32 · 5137 阅读 · 0 评论 -
react项目搭建
react项目搭建上面说了react,react-router和redux的知识点。但是怎么样将它们整合起来,搭建一个完整的项目。1、先引用 react.js,redux,react-router 等基本文件,建议用npm安装,直接在文件中引用。2、从 react.js,redux,react-router 中引入所需要的对象和方法。import React, {C原创 2016-12-06 20:07:10 · 742 阅读 · 0 评论 -
react-redux的工作流程理解
react-redux的工作流程理解如果只使用redux,那么流程是这样的:component --> dispatch(action) --> reducer --> subscribe --> getState --> component用了react-redux之后流程是这样的:component --> actionCreator(data) --> r原创 2016-12-06 19:30:36 · 5469 阅读 · 0 评论 -
认识redux的store,reducer,action
store是一个对象,它有四个主要的方法:1、dispatch:用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造,比如当action传入dispatch会立即触发reducer,有些时候我们不希望它立即触发,而是等待异步操作完成之后再触发,这时候用redux-thunk对dispatch进行改造,以前只能传入一个对象,改原创 2016-12-06 19:24:03 · 2540 阅读 · 0 评论 -
React和Redux的连接react-redux
React和Redux的连接react-redux之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水。Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react转载 2016-12-06 14:12:55 · 289 阅读 · 0 评论 -
react系列-bind this
react系列-bind this问题对于大多数前端开发来说,JavaScript 的 this 关键字会造成诸多困扰,由于 JavaScript 代码中的 this 指向并不清晰。在写react应用时,也会也到很多作用域绑定引起的问题,React组件ES6的写法,不会将方法内部的作用域自动绑定到组件的实例上。下面展示一段问题代码class Se原创 2016-12-01 13:31:49 · 4900 阅读 · 0 评论 -
react如何在组件中获取路由参数?this.props.params.id
路由参数假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。import List from './component/list';Route path="list/:id" component={List} />注意 path 属性中的 :i原创 2016-12-06 16:31:21 · 45349 阅读 · 3 评论 -
React Router 使用教程
一、基本用法React Router 安装命令如下。$ npm install -S react-router使用时,路由器Router就是React的一个组件。import { Router } from 'react-router';render(Router/>, document.getElementById('app'));Rou转载 2016-12-06 14:25:56 · 498 阅读 · 0 评论 -
react小提示:this.props.location.query.bar 获取URL的查询字符串
URL的查询字符串/foo?bar=baz,可以用this.props.location.query.bar获取。原创 2016-12-06 16:52:48 · 15950 阅读 · 0 评论 -
react-router 按需加载
React Router 是一个非常出色的路由解决方案,同时也非常容易上手。但是当网站规模越来越大的时候,首先出现的问题是 Javascript 文件变得巨大,这导致首页渲染的时间让人难以忍受。实际上程序应当只加载当前渲染页所需的 JavaScript,也就是大家说的“代码分拆" — 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。官方示例在 这里。所得到的效果是:以前是这样(2转载 2016-12-06 17:28:50 · 8840 阅读 · 1 评论 -
react-router JS 控制路由跳转
Link组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢?下面是一个表单。 input type="text" placeholder="userName"/> input type="text" placeholder="repo"/> button type="submit">Gobutton>原创 2016-12-06 17:35:20 · 26938 阅读 · 0 评论 -
React组件之间的通信
组件之间的通信react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。组件层级嵌套到比较深,可以使用上下文Context来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.co原创 2016-12-06 19:11:18 · 1013 阅读 · 0 评论 -
react-redux提供了connect和Provider有什么作用?
先简单说一下redux和react是怎么配合的。react-redux提供了connect和Provider两个好基友,它们一个将组件与redux关联起来,一个将store传给组件。组件通过dispatch发出action,store根据action的type属性调用对应的reducer并传入state和这个action,reducer对state进行处理并返回一个新的state放入store,c原创 2016-12-06 19:14:31 · 3972 阅读 · 1 评论 -
react组件之间的通信
react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。组件层级嵌套到比较深,可以使用上下文getChildContext来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.conte原创 2017-03-07 14:16:12 · 893 阅读 · 0 评论