![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ReactJs
starwmx520
这个作者很懒,什么都没留下…
展开
-
ReactJs之render
React.createClass在创建模块时,肯定会有render方法的。下边是我列出的常用的技巧:1、模板内可嵌套其他的模块2、当模板内需要引用js变量或方法时时用{XX}。且方法需要写在render:函数内。3、this.props.XX.map(fn)可以遍历数组函数内需要返回模板写法和render函数返回一样 return ( )4、模板内可以直接{arrhtml}原创 2015-09-28 17:01:33 · 756 阅读 · 0 评论 -
reflux+react web 第一种写法
在页面中使用reflux react写项目:通过bower 安装react babel reflux query记得type="text/babel"//创建动作 var TodoActions=Reflux.createActions([ 'getAll', 'addItem' ]); //store内监听action 设置items原创 2016-03-01 17:12:55 · 694 阅读 · 0 评论 -
reflux+react web 第二种写法
//组件监听store第二种写法 Mixins //使用了组件的mixins属性,省去了销毁时的取消监听函数 var TodoComponent=React.createClass({ mixins:[Reflux.listenerMixin], getInitialState:function(){ return {list:[],text:''}原创 2016-03-01 17:19:50 · 391 阅读 · 0 评论 -
reflux+react web 第三种写法
//组件监听store第三种写法 Reflux.listenTo(store,监听方法) //在mixins内用reflux.listenTo实现了store的监听 var TodoComponent=React.createClass({ mixins:[Reflux.listenTo(TodoStore,'onStatusChange')], getInitialS原创 2016-03-01 17:21:47 · 695 阅读 · 0 评论 -
reflux+react web 第四种写法
var TodoComponent=React.createClass({ mixins:[Reflux.connect(TodoStore,'list')], getInitialState:function(){ return {list:[],text:''} }, componentDidMount:function(){原创 2016-03-01 17:23:10 · 402 阅读 · 0 评论 -
reflux+react web 第五种写法
//函数内对数据进行过滤。return 真表示显示。 var TodoComponent=React.createClass({ mixins:[ Reflux.connectFilter(TodoStore,'list',function(list){ //console.log(list); return list.filter(functio原创 2016-03-01 17:24:16 · 555 阅读 · 0 评论 -
reflux react 例子
前端使用了reflux react 后端用的是express mongoose 来写的api接口。//创建动作 var TodoActions=Reflux.createActions([ 'getAll', 'addItem', 'deleteItem', 'updateItem' ]); var TodoStore=Ref原创 2016-03-01 17:32:23 · 597 阅读 · 0 评论 -
在node 中用mongoose来操作mongodb
npm install mongoose链接mongodb:var mongoose=require('mongoose');var Schema = mongoose.Schema;ObjectId = Schema.ObjectId;var url = 'mongodb://localhost:27017/nodejs';var conn=mongoose.conn原创 2016-03-01 17:41:00 · 399 阅读 · 0 评论 -
react-router 0.X web 使用
var Router=ReactRouter;var Route=Router.Route;var RouteHandler=Router.RouteHandler;var DefaultRoute =Router.DefaultRoute ;var Link=Router.Link;var routes = (原创 2016-03-01 16:42:53 · 546 阅读 · 0 评论 -
baobab 简单使用
flux 编写react思想是好的,但是代码太多了。需要写调试 动作。在书上看到了baobab模块。可以简化写法。它实现的是module ,一个数据树,可以定义不同的游标,绑定update事件,当游标数据修改时触发事件。游标get 可以获取数据。var tree=new Baobab({todos:{name:'star',colors:['yellow原创 2016-02-18 11:05:30 · 993 阅读 · 0 评论 -
react-router 使用
以前写了页面引用的两个版本写法。以下是node 写法:var React =require('react');var ReactDom=require('react-dom');import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router';var About =原创 2016-03-30 14:10:31 · 450 阅读 · 0 评论 -
reflux web 中store
创建动作,在仓库里监听动作方法,定义动作方法。在调用动作方法时会触发仓库上对应的监听方法。这时监听方法内可以获取调用动作时的参数。在这里可以做get请求,从服务器获取数据。回调里设置仓库数据并调用组件对仓库的修改回调。trigger(data)组件change内修改组件state值。这时触发渲染机制。流程:创建动作指定动作名,但不写动作方法。在仓库上监听动作并编写动原创 2016-03-01 17:05:15 · 571 阅读 · 0 评论 -
reflux web 中action
这前的flux结构是不错的,但是写的模块太多了。所以有了reflux它由action store component 组成定义action动作,store扩展每个动作的方法,如get获取delete update等。组件监听store的变化,并修改组件状态数据。store方法内触发监听trigger并传递最新值。用户操作触发动作,执行store扩展 方法变动 了触发监听传递值,原创 2016-03-01 17:00:51 · 634 阅读 · 0 评论 -
react-router2.0 web 使用
一、前端script 引用react-router 的使用。前言:router有两个版本,最新的是2.0,和旧的版本。所以有有两种写法。汗了吧先说2.0下的用法首先说环境:需要引用react react-dom reactrouter 2.0 babel/browser.js react 以前需要引用jsx来解析。现在用babel来解析,所以script typ原创 2016-03-01 16:38:07 · 2530 阅读 · 0 评论 -
ReactJs 模块编译
ReactJS 在写模块时,渲染的结构在js里就是这样来写。html语法js肯定识别不到。reactjs在执行时会编译标签。编译后的标签有助于了解结果。npm install -g react-tools //安装工具cd 到项目目录jsx --watch js/ build/ //监听js目录变化生成到build里---------------生成后的只是原创 2015-09-28 16:23:40 · 891 阅读 · 0 评论 -
ReactJs之表单处理
视图中肯定会用到表单的。reactjs之表单在form标签上绑定onSubmit方法,当button提交时触发。处理函数需要阻止默认提交。props用来传递固定不变的对象,状态对象就需要用this.state来存储了。input textarea select 标签绑定状态可以用value={this.state.xx} 但是这样绑定预览时input是不能修改的。无法实现双向原创 2015-09-28 16:41:53 · 1579 阅读 · 0 评论 -
ReactJs 样式类的使用
渲染标签上className={} 来设置样式 类名 直接class="XX" 这样是不行的,只能用className值 为js变量才行。如有时样式 类引用会动态改变,需要用React.addons.classSet() 来创建对象参数可以是多个字符串,或对象{clasname:this.XX} 动画修改组件属性来实现是否引用类名以下是例子:/*className用法原创 2015-10-16 12:16:08 · 1346 阅读 · 0 评论 -
ReactJs 组件间数据传递
在写组件时不可避免的需要在组件间传递数据如:commentbox中,评价提交组件的数据需要传递给父级组件并添加渲染。这时可在父级中定义一个方法handlecommentsubmit:fn(obj)在render里把方法传递。在评论组件中可以用this.props.onsubmit({})来调用父级方法实现数据传递。原创 2015-10-08 16:12:03 · 538 阅读 · 0 评论 -
ReactJs 使用心得
1、数据交流的问题在用组件开发时数据交流无非是用props和state。当在组件间传递state状态时,子组件props得到的引用类型属性。如父组件修改了state也会更新到子组件的props属性。组件的props只有在React.render 对象才能用setProps引用 。组件的state状态是不会公共的。当创建了多个同样的组件渲染时。状态是不用共用的原创 2015-10-22 17:16:17 · 459 阅读 · 0 评论 -
React组件定义验证属性值和默认值的配置
在开发组件时一定需要传递数据来使用的,这时验证值类型是必不可少的。reactjs也给我们提供了很多验证。在React.PropTypes对象来下来引用 如React.PropTypes.number验证数字。验证列表http://www.reactjs.cn/react/docs/reusable-components.html以下是我本地测试时的例子:function Mes原创 2015-10-10 15:09:37 · 1435 阅读 · 0 评论 -
Reactjs 之 mixins
reactjs通过嵌套组合组件来实现功能模块的。每个组件都需要一个个定义和使用。开发中有些代码块肯定会需要多次引用的。React.createClass({ getname:obj.name});这样写看着真不舒服。所以对于组件中多次使用的呢,reactjs有个mixins属性来实现。它的参数是一个数组。值为对象,或返回对象的函数或函数实例化的表达式mixi原创 2015-10-10 17:57:22 · 611 阅读 · 0 评论 -
ReactJs之组件生命周期
组件在创建时更新时执行的顺序。第一次页面加载组件:1、执行getDefaultProps方法来初始化props的值并返回2、执行getInitialState方法初始化状态并返回3、componentWillMount,执行渲染前的方法 在此方法内修改状态不会触发再次渲染。4、render 执行渲染5、componentDiDMount 渲染后的方法 在此方法内修改原创 2015-09-28 17:18:00 · 507 阅读 · 0 评论 -
ReactJs 组件间通信
组件在开发时经常会相互通信,传递值调用方法等父级和子级在调用子级组件时绑定就可以了。还可以绑定父级方法,在子级内调用传递参数。但有时需要同级组件单通信:这时就需要借用一些通信库了,如PubSub.jsvar a=PubSub.subscribe('product',function(type,value){ type 是设置的类型这里是product value是传递的原创 2015-10-12 18:23:33 · 739 阅读 · 0 评论 -
React 双向绑定的实现
双向绑定的使用:组件需要mixins:引用LinkedStateMixin。它提供一个linkState方法。参数是state属性双向绑定用valueLink={this.linkState(XX)}linkState方法返回一个对象,有一个value属性,指定state的属性。还有一个requestChange回调方法,用来实现state的修改。参数是新值 可以理解成onchan原创 2015-10-14 15:53:43 · 3159 阅读 · 1 评论 -
React 版本
react 0.14后,将react分成两部分,react react-dom 模块。在require时需要请求两个模块。react包括:React.createElement .createClass .COmponent .ProTypes .Childrenreact-dom包括:Reactdom.render unmountComponentAtNode findD转载 2016-01-27 15:14:25 · 1708 阅读 · 0 评论