react组件开发规范（一）

这是通过修改项目运行在Google上时的警告，总结的的部分react组件开发规范：

（1）编写组件时，一定要写PropTypes,切莫为了省事儿而不写！

如果一个Props不是required，一定在getDefaultProps中设置它；

React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，控制台（console）中就会出现对应的警告（warning）。

所以，为了规范我们开发，减少不必要的警告，这个要注意写上，而且保证类型写对。

（2）map遍历对象或者数组拿到值，去渲染dom的时候，最好给每次渲染的dom都加上 key 属性，并且保证 key 是唯一的（可以用key = {index}），这个问题不加key或者key不唯一都会出现对应的警告！

（3）标签嵌套问题，像p标签里面包含div标签就会出警告，这种问题最好避免！

时间： 2024-08-26 22:31:47

react组件开发规范（一）的相关文章

React组件开发注意事项

0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也很好,但是如果存在重新排序,性能将会很差. 2.处理事件,推荐使用属性初始化语法,如下: class LoggingButton extends React.Component { // 这个语法确保 `this` 绑定在 handleClick 中. // 警告:这是 *实验性的* 语法. han

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

项目地址:wn-cli wn-cli 名字由来:wn -> weapp native 取第一个字母 Install npm install wn-cli --save-dev // 或者 yarn add wn-cli --dev Usage // 构建 npx wn ./examples ./dist // 监听模式 npx wn ./examples ./dist -w 如果你遇到一个错误,让拷贝 wn.js 文件,请按提示信息将 node_modules 中的 node_modules/w

React组件开发

目录: 属性:props 内联样式状态记忆 : state 生命周期访问DOM 表单输入承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.html 属性 : props 组件应该提供一些属性供开发者在不同的场景下可以对组件实例元素的行为外观进行调整,这样可以提高组件的利用效率. 在React中,使用props字段访问实例元素的属性. 例如,在下面的JSX片段中,EzLampComp组件的实例元素有一个属性onoff: React.ren

React组件开发经典案例--todolist

点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>todolist2</title> <link rel="stylesheet" href=&qu

React组件略讲

React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点.今天,就来研究一下React组件开发. 前端同学一般都会从Vue入门,因为Vue使用的<template>的组件开发方式让前端人员更容易的平滑过渡.Vue的组件很简单,一般来说,一个.vue文件就是一个组件.就像webpack的模块化开发,一个文件就是一个组件.我们在使用组件时也很容易,通过 ES6 的import导入.注册(components),就可以直接使用. 上面简单说了Vue的组件模式,其实,React

结合 ES6+ 开发 React 组件

这是 Steven Luscher 写的一篇关于 React 的文章,Steven Luscher 擅长使用 React 和 GraphQL 构建应用. 原文地址:http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ 当重新设计 Instagram Web 的时候,使用了一些 ES6+ 的特性来编写 React 组件.在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣.

ES6+ 开发 React 组件

在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣. 类迄今为止,最能体现我们使用 ES6+ 来编写 React 组件的就是我们选择使用类定义语法.替代了使用 React.createClass 方法来定义一个组件,我们可以定义一个 bonafide ES6 类来扩展 React.Component: ? 1 2 3 4 5 class Photo extends React.Component { render()

react组件化开发发布到npm

1.项目目录 build:webpack打包用(开发环境.发布环境) example:开发环境的模板页 lib:打包好的文件夹(用于发布到npm上) src:想要封装的公共组件 .babelrc:处理es6语法 package.json:打包的依赖文件,管理项目模块包开发环境配置(webpack.dev.config.js) const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin')

react native 开发IOS

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