React 根据官方总结的规范

1、语法上,根据生命周期方法执行的顺序编写代码

(1 生命周期方法[getDefaultPropsgetInitialStatecomponentWillMountcomponentDidMount,componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate,componentWillUnmount]

具体的生命周期详解见:http://www.cnblogs.com/daomul/p/4856101.html

(2 其他的私有方法

(3 render()方法

2、事件处理函数的命名: “handle+EventName”

<Component onClick={this.handleClick} onLaunchMissiles={this.handleLaunchMissiles} />

3、组件验证

react 组件 都应该完成 propTypes 验证。每一个 this.props 的属性都应该有一个与之对应的propTypes
避免使用这些没有描述意义的 prop-types:

  • React.PropTypes.any
  • React.PropTypes.array
  • React.PropTypes.object

最好使用:

  • React.PropTypes.arrayOf
  • React.PropTypes.objectOf
  • React.PropTypes.instanceOf
  • React.PropTypes.shape

4、能用 props 就不要用 state,这一定程度上可以减少应用程序的复杂度

5、尽量少用jQuery去操作DOM(有必要的话,把jquery插件包装在React组件中)

6、尽量不用例如backbone的模型,可以直接使用 flux action,或者 $.ajax 来代替。

时间: 2024-10-06 10:44:38

React 根据官方总结的规范的相关文章

超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50661981 本文出自:[江清清的博客] (一)前言 特别说明:群里很多童鞋都在说想Windows系统官方实例,但是官方提供的文档以及网上的例子都是OS X版本.今天特意给大家更新一下Windows版本运行官方 实例(UIExporler)全过程.俗话说学习一样新东西的时候,例如这边我们要学React Native的组件使用,那么最好的学习资料就是官方提供的材料了,

react+redux官方实例TODO从最简单的入门(6)-- 完结

通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.reducers,更新store 4.底层组件实现函数 5.上层组件数据传递 到这里全选的功能就实现了 显示action的数量和删除completed操作 整过过程一模一样 1. 2. 3. 4.(展示action数量的view) (删除completed的view) 放到Footer中 在上层父组件进行数据通信

react+redux官方实例TODO从最简单的入门(2)-- 增

虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那我们就来拆解,一步一步实现,试想我们开发程序也是一个一个功能区域实现,那么我们第一步就是先把整体结构构思出来,然后先把头部做出来,这样看是不是简单很多! 从官网下载的mode,然后配置什么的,我也不会弄,把里面的东西全删了,然后自己一个一个写,不然学一个react还要学配置环境,时间又没多少了,大致

react+redux官方实例TODO从最简单的入门(5)-- 查

上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,active. 要实现这三个状态之前,我们需要提前实现一个功能,那就是给每个展示的子组件一个可改变是completed还是active的状态的属性(方法)--- 这样才能有可查(筛选)的东西嘛 老规矩: 1.声明状态 2.actions 3.reducer 4.component 好了,看看效果 似乎还差一个,官

react+redux官方实例TODO从最简单的入门(3)-- 删

上一篇文章我们实现了增删改查中<增>这个功能 那么这一篇我们将实现第二个功能,删! 首先增加一个状态: actions中增加对应的约定 到reducer里面设置执行的函数(这里todo.id当然是等于action.id,所以返回false) 然后给子组件,增加这个方法 现在删除这个功能也实现了,这个不好演示,写到这一步,自己试一下就能完成了.

react+redux官方实例TODO从最简单的入门(4)-- 改

上一篇文章实现了<删>这个功能,那么我们继续添加下一功能--<改> 这个修改的功能是通过双击每个子选项实现 第一步:按规矩来,添加一个状态声明 第二步:action中约定我们要干什么,并且将其他元素(text)传给reducer(这里eidtTodo修改外editTodo) 第三步:reducer中区更新我们的store(相信经过注释关于...语法,map循环等不用再写注释了,大家也能明白怎么回事了) 第四步:当然是去我们的子组件编写具体实现的方法了 到了这里---改也实现了,看是

windows下做react native官方例子遇到的问题

1.android/app/build.gradle文件中,指定了版本: compileSdkVersion 23buildToolsVersion "23.0.1" 需要在设置中选择,如下图所示: 2.报"Could not find tools.jar"错误,是因为没配置java的环境变量JAVA_HOME. 3.项目目录下运行react-native run-android,手机上弹出的界面(使用adb devices命令确认手机已连接): 4.上面界面,&q

Flux --&gt; Redux --&gt; Redux React 入门 基础实例使用

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文 (不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点) (官方的例子正

react native 开发IOS

转载自kaich blog(http://www.kaich.xyz) 接触 react native 对于技术,我比较喜欢追新.看到报道大名鼎鼎的facebook(开源界的模范,发布了很多高质量的开源框架)开源了移动端跨平台的新框架react native,于是就迫不及待的开始接触它了.react native的目的是为了让前端开发任务能开发移动端(ios程序员相对于web端来说要少得多),于是就有了这样的框架.对于我们IOS程序员有没有必要去学它,看到它另外一个特性:跨平台,而且又一定程度的