新版react踩坑总结

使用es6语法与原本es5语法几个有区别的地方

1.React.creatClass与React.Component

1 var Component = React.createClass({
2   render() {
3     return (
4       <div></div>
5     );
6   }
7 });
 1 class Component extends React.Component {
 2   constructor(props) {
 3     super(props);
 4   }
 5   render() {
 6     return (
 7       <div></div>
 8     );
 9   }
10 }

2.propType和defaultProps

 1 var Component = React.createClass({
 2   propTypes: {
 3     name: React.PropTypes.string
 4   },
 5   getDefaultProps() {
 6     return {
 7
 8     };
 9   },
10   render() {
11     return (
12       <div></div>
13     );
14   }
15 });
 1 class Component extends React.Component {
 2
 3   /* static propTypes = { // as static property
 4         title: React.PropTypes.string
 5
 6         //需要babel转码
 7
 8     };*/
 9
10     constructor(props) {
11         super(props);
12     }
13
14     render() {
15         return (
16             <h1>{this.props.title}</h1>
17         );
18     }
19 }
20
21 //静态属性,注意这两个属性都是加到类本身的属性而不是类的实例的属性
22 Component.propTypes = {
23     title : React.PropTypes.string.isRequired  //被要求是字符串类型,其他类型报错
24 };
25
26 Component.defaultProps  = {
27     title : ‘hello world‘
28 };

3.状态区别

 1 var Component = React.createClass({
 2     // return an object
 3     getInitialState(){
 4         return {
 5             isEditing: false
 6         }
 7     }
 8     render(){
 9         return <div></div>
10     }
11 })
 1 class Component extends React.Component{
 2     constructor(props){
 3         super(props);
 4         this.state = { // define this.state in constructor
 5             isEditing: false
 6         }
 7     }
 8     render(){
 9         return <div></div>
10     }
11 }

4.this区别

 1 var Components = React.createClass({
 2   handleClick() {
 3     console.log(this); // React Component instance
 4   },
 5   render() {
 6     return (
 7       <div onClick={this.handleClick}></div>//会切换到正确的this上下文
 8     );
 9   }
10 });
 1 class Components extends React.Component {
 2   constructor(props) {
 3     super(props);
 4     this.handleClick = this.handleClick.bind(this);//需要手动处理一下this
 5   }
 6   handleClick() {
 7     console.log(this); // React Component instance
 8   }
 9   render() {
10     return (
11       <div onClick={this.handleClick}></div>
12     );
13   }
14 }

5.ReactDOM.findDOMNode

 1 class Component extends React.Component {
 2   componentDidMount() {
 3     let child = ReactDOM.findDOMNode(this.child);  //如果ref绑定在组件中则需要调用ReactDOM.findDOMNode()方法来拿取DOM节点
 4     let title = this.title;  //如果ref绑定在虚拟DOM中,则可以直接拿到DOM节点
 5   }
 6   render() {
 7     return(
 8       <div>
 9         <ChildComponent ref={(div) => {this.child = div;}} /> //官方文档中建议用回调函数的形式来写ref属性
10         <h1 ref={(h1) => {this.title = h1;}}>...</h1>
11       </div>
12     );
13   }
14 }
时间: 2024-11-05 12:32:57

新版react踩坑总结的相关文章

React踩坑记(一)——API React和ReactDOM,擅自引入cdnjs的后果

今天开始学习React,一开始就遇到好多坑,花了不少时间(当然也是花费了指导我的那位大神的时间). 特此记录,也方便有人踩坑的时候避免这样的情况再出现. 中文网站和国外官网 首先说一下英文官网:http://facebook.github.io/react/index.html 作为一个英文差到极点的程序员小白,在这门技术面前毅然决然地选择了中文官网:http://reactjs.cn/ 但是!这是一个坑点,因为技术更新的原因,肯定在中文网的版本跟官网的版本是有落差的.所以在跟着中文网的教程敲代

React 踩坑笔记

props可以用两种理解,一是可以被当做构建React节点的参数,二是可以被理解为HTML标签的属性.具体如下 当props与一个已知HTML属性相同时,当他被加入最终DOM中的HTML元素时,它就是该元素的属性: 当被传入React.createElement()中当做参数时,也可以是React node实例里的各种值. 一些特殊的用法,比如说key.ref.dangerouslySetInnerHtml React Stateless Function Component(无状态函数组件)

航遇项目react踩坑

1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态渲染iconfont标签,需如下处理,icon为形参 <i dangerouslySetInnerHTML={{__html: icon}} className={'iconfont'} /> c.引入项目中:需要在项目中复制iconfont的地址代码,类似如下的地址,官网生成 @font-fac

react踩坑记录——使用fetch获取json数据报错

报错: 原因其实是list.json文件路径错误,该文件路径是相对于index.html的,而不是App.js或者index.js.

React Native 环境搭建踩坑

React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-native/docs/getting-started 选择  Building Projects with Native Code 大家可以参照官方文档一步一步来,下面是我遇到的一些问题总结 查看一下node版本           node -v ------- 进入安装之前最好查一下JDK版本   

ELK之ES2.4.1双实例平滑升级至5.2.1踩坑并supervisor管理记

ES老集群用的2.4.1版本,跑的比较好就一直没动,最近看资料ES5.X已经稳定,并且性能有较大提升,心里就发痒了,但由于业务要保持高可以用的属性,就得想一个平滑升级的方案,最后想到了多实例过度的办法,5.X版本网上介绍配置变化较大,也做好了踩坑准备,确定好要升级后,立刻动手. 一.对应升级改造方案 使用端口9220和9330 安装并配置好新的ES5.2.1实例-->关掉logstash并将ES2.4.1实例堆栈调小重启(kafka保留3个小时日志所以不会丢失)-->启动ES5.2.1并将lo

React爬坑秘籍(一)——提升渲染性能

React爬坑秘籍(一)——提升渲染性能 ##前言 来到腾讯实习后,有幸八月份开始了腾讯办公助手PC端的开发.因为办公助手主推的是移动端,所以导师也是大胆的让我们实习生来技术选型并开发,他来做code review.之前也学习过React,当然也是非常合适这一次的开发. 我会梳理这一个月来,自己对架构的思考过程和踩过的坑.当然这一切都不一定是最佳的,所以希望能有更多的建议和讨论. 例子所需库:Webpack.React.Immutable.其中Webpack用于前端构建,如果不清楚的同学可以看这

webpack踩坑之路 (2)——图片的路径与打包

webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(ph

JAVA实用案例之文件导出(JasperReport踩坑实录)

写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六月份的时候写过一篇利用poi文件导入导出的小Demo,JAVA实用案例之文件导入导出(POI方式). 虽然简单,但是企业应用的原理基本上也就是这样,只不过是封装的更好些,不像我之前写的那样每个Cell都需要定义,其实poi的方式也是我目前最推崇的方式之一了.主要原因是jxl不支持xlsx,Jaspe