RN 最容易crash的代码用法及应对措施（持续更新）

发表于 | 分类于

变量保护

出现最多的就是在使用redux来做数据层，使用this.props的属性没有去查询时候为undefined，这种情况，基本是必crash

比如下例：

1
2
//show user name
<Text>{this.props.userInfo.name}</Text>

如果userInfo为undefined的话，就会崩溃，错误如下：

TypeError: Cannot read property ‘name’ of undefined

在这里name为undefined的时候反而没有问题，因为name是一个简单的属性，直接赋值给Text是没有问题的。

那如何避免这种问题呢？在赋值前加下判断会比较好：

1
2
3
4
let name = this.props.userInfo && this.props.userInfo.name ? this.props.userInfo.name : '';
//show user name
<Text>{this.props.userInfo.name}</Text>

这样基本可以避免崩溃的问题了。

但是如果都这样判断，实际是比较复杂的，所以如果你的业务比较简单，我建议可以直接在render做一个大的保护，即没有数据的时候，不去render这些业务内容.
思路如下：

1
2
3
4
5
6
7
8
9
10
11
12
render(){
	if(!this.props.userInfo){
		return (
			<EmptyView />
		)
	} else {
		return (
			//注意，如果name的层级更深，还是建议做保护
			<Text>{this.props.userInfo.name}</Text>
		)
	}
}

定时器

定时器其实在iOS中也是一个非常容易出问题的地方，crash率会比较高。究其原因，我想是主要是因为定时器存在一个事件发生的延后性（废话嘛0_o）,但是很多时候会忘记，当定时任务真的发生的时候，语境变化了吗？如果语境都已经被dealloc了，定时任务仍然被激活，系统就会愤怒地罢工了。

比如：

1
2
3
4
5
6
componentDidMount() {
    setTimeout(
      () => { console.log('这就可能会崩溃'); },
      500
    );
  }

如果500ms之内，这个component就会Unmount了，那直接回崩溃。RN官方的建议如下：

TimerMixin

为了解决这个问题，我们引入了TimerMixin。如果你在组件中引入TimerMixin，就可以把你原本的setTimeout(fn, 500)改为this.setTimeout(fn, 500)(只需要在前面加上this.)，然后当你的组件卸载时，所有的计时器事件也会被正确的清除。

这个库并没有跟着React Native一起发布。你需要在项目文件夹下输入npm i react-timer-mixin –save来单独安装它。

1
2
3
4
5
6
7
8
9
10
11
var TimerMixin = require('react-timer-mixin');
var Component = React.createClass({
  mixins: [TimerMixin],
  componentDidMount: function() {
    this.setTimeout(
      () => { console.log('这样我就不会导致内存泄露!'); },
      500
    );
  }
});

代码保护（推荐）

Mixin属于ES5语法，对于ES6代码来说，无法直接使用Mixin。如果你的项目是用ES6代码编写，同时又使用了计时器，那么你只需铭记在unmount组件时清除（clearTimeout/clearInterval）所有用到的定时器，那么也可以实现和TimerMixin同样的效果。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React,{
  Component
} from 'react';
export default class Hello extends Component {
  componentDidMount() {
    this.timer = setTimeout(
      () => { console.log('把一个定时器的引用挂在this上'); },
      500
    );
  }
  componentWillUnmount() {
    // 如果存在this.timer，则使用clearTimeout清空。
    // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
    this.timer && clearTimeout(this.timer);
  }
};

我今天看了我们项目的代码，发现几乎没有人做保护，代码copy的现象，真的是令人发指，可能很多人都没仔细看过官方的文档。。。

RN0.43 Text组件bug

最近公司升级了RN的版本，从0.39升级到了0.43，这里出现了一个比较严重的bug。github上的issue地址：https://github.com/facebook/react-native/issues/13080

具体来说，就是android上面的Text，string和int等数值混排会出现莫名的bug，无论Text是否加了点击事件，只要触摸int等数值的展示部分，就会崩溃，具体代码如下：

1
2
3
4
5
let num = 5;
<Text>有{num}个赞</Text> //点击crash
``` 
如何补救呢？使用`.toString`:

let num = 5;

有{num.toString()}个赞 //ok

1
2
3
4
5
6
7
8
看github上的记录，0.44已经修复，但是如果使用0.43的同学，千万要小心。
更新于 2017-05-10
## 字符串作为判断条件 崩溃bug
类似这样：

let test = {string: ‘’};
return (

{test && test.string &&
{test.string}
}

)

1
2
报错：

Error: RawText “” must be wrapped in an explicit component.

1
2
3
4
原因未知，但是会崩溃
保护措施：

let test = {string: ‘’};
return (

{test && !!test.string &&
{test.string}
}

)
```

具体的可以看下这篇文章：Error RawText ** must be wrapped in an explicit component 问题解决