开发react也有一段时间了,一开始的随手写,生命周期乱用,无状态组件的不熟悉。现在逐渐规范一下,从网上各个地方copy过来,整理出一份文档。可能不全,后续还得多提炼总结和完善。

一、组件内方法书写,先写生命周期函数(按执行顺序写),再写自定义函数。

import React,{ Component } from 'react';

class Demo extends Component {
constructor(props,context) {
super(props,context)
this.state = {
//定义state
}
}
componentWillMount () {
}
componentDidMount () {
}
componentWillReceiveProps (nextProps) {
}
shouldComponentUpdate (nextProps,nextState) {
}
componentWillUpdate (nextProps,nextState) {
}
componentDidUpdate (prevProps,prevState) {
}
componentWillUnmount () {
} yourMethoed1(){
} yourMethoed2(){
}
render () {
return (
<div></div>
)
} }
export default Demo;

二、事件this绑定放到constrcutor构造函数中

import React,{ Component } from 'react';

class Demo extends Component {
constructor(props,context) {
super(props,context)
this.state = {
//定义state
}
this.handlerMethod = this.handlerMethod.bind(this)
} render () {
return (
<div></div>
)
}
}
export default Demo; // 不推荐写法:
<div onClick={this.handlerMethod.bind(this)}>do some actions</div>

三、组件一定要有prop传入类型校验,即要写PropTypes

注意:prop-types是第三方的npm包。react16版本后,自己不再维护PropTypes。因此要引用第三方的

import React,{Component} from 'react';
import PropTypes from 'prop-types';
class App extends Component{
render(){
return <div>{this.props.name}</div>
}
}
App. propTypes = {
name: PropTypes.string
}

四、异步获取数据请求放到componentDidMount中

五、尽量不要在钩子函数外使用setState方法,以及setTimeout中,不要在componentWillUpdate/componentDidUpdate/render中执行setState, 可能异致死循环。

六、访问真实dom方式:refs

<AudioCompoent  ref={(ref) => { this.myRef = ref; }}/>

// 不推荐
<AudioCompoent ref="myRef"/>

七、render方法内尽量少申明变量

八、数据遍历组件的时候要有key属性,但是不要用数组下标作为key

render() {
return (
<ul>
{this.state.sort.map((item, index) => {
return <li key={item.name}>
{item.name} <input type=“text”/>// 假定name是唯一的
</li> })}
</ul> );
}

九、简单展示类型,不涉及到state的组件,用function 函数声明式的无状态组件。

import React, {PropTypes} from 'react'
import {connect} from 'react-redux' const dataType = {
onExpand: PropTypes.func.isRequired,
isOpen: PropTypes.bool
} const List = ({ onExpand, expanded = false, childred }) =>
<form style={ expanded ? { height: 'auto' } : { height: } }>
{children}
<button onClick={onExpand}>Expand</button>
</form>; List.propTypes = dataType export default connect(List)









react组件开发规范总结的更多相关文章

  1. react组件开发规范(一)

    这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...

  2. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  3. React组件开发(一)初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  4. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  5. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  6. react复习总结(1)--react组件开发基础

    这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...

  7. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  8. React代码开发规范

    前言 一般在团队开发中每个人的代码习惯都不太一样,这样就会导致代码风格不一致,以致于维护和修改bug的时候看别人的代码成为一种痛苦...这种情况尤其在前端开发中尤为明显.因为关于前端的开发规范貌似也没 ...

  9. React 组件开发初探

    react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最 ...

随机推荐

  1. ningx.conf location

    server { listen ; server_name localhost; location /dirName { alias "C:/Users/VALEB/Downloads/in ...

  2. VirtualApk 插件入门小试

    1 官方资料 滴滴开源Android插件方案:VirtualAPK 2 宿主App集成方法 (1)在整个工程的build.gradle中添加依赖 dependencies { classpath 'c ...

  3. net use远程重启服务器

      在命令行工具中分别输入如下3条命令 net use \\10.10.1.100\ipc$ Password /user:Username shutdown -f -r -m \\10.10.1.1 ...

  4. SpringBoot启动源码探究---getRunListener()

    该方法目的是获取SpringApplicationRunListener getRunListener()-----调用----> getSpringFactoriesInstances()-- ...

  5. sudo 取消密码

    通常我们并不以root身份登录,但是当我们执行某些命令 (command)时需要用到root权限,我们通常都是用"sudo command"来执行command.由于使用Ubunt ...

  6. Unity 缓冲池概念

    在Unity 中碰到一些重复使用的游戏物体时,我们可以使用缓冲池来进行操作,即重复利用

  7. webservice之jax-rs实现方式

    1.什么叫restful风格 restful是一组架构约束条件和原则,满足这些约束条件和原则的应用程序即是restful风格. 2.jax-rs实现步骤 1.创建一个简单应用(略) 2.添加依赖jar ...

  8. YUV介绍

    YUV444与YUV422下采样. 一.YUV介绍 YUV有三个分量:Y(Luminance/Luma:亮度).U和V表示色差,体现的是图片的色彩信息.相对于RGB彩色空间,将亮度信息和色彩信息分离. ...

  9. 研究并尝试改进Vyeshal

    我想研究Vyeshal,这样就不可避免的要用到游戏中的语音.然而游戏内的语音文件是.bank类型的,如何转化为可听文件是个问题.

  10. mybatis入门篇:存储过程的操作

    1.无ResultType/ResultMap查询 先定义一个查询的存储过程: DELIMITER // CREATE PROCEDURE `select_user_by_id`( IN userId ...