你不知道的懒人React Hack用法

1、在render函数中使用log

当你需要在渲染函数（例如某个map遍历)中打印数据，但是又不想改变原有的简单返回时，可以把log放到()内，然后再接上||，后面再接自己的组件：

1_1.png

这里必须使用||操作符，因为console.log的返回值为undefined

2、使用Error来追踪函数调用

如果你不知道某个函数是从哪儿被调用的，可以在函数内部打印一个Error对象，然后你就会得到一个完整的调用栈信息：

2_1.png 2_2.png

注意每个日志的第三行，第一个是被EnterPasscode.tsx的106行调用的，第二个是从appConfigSaga.ts的576行调用的。

3、给你的日志加上Prefix，从而更好的过滤查看

是不是经常看到一些废弃方法的提示，或者某个地方的key忘记填写的提示？如果你只是简单的测试，不想解决这些问题，添加一个特定的prefix在你的log中，

3_1.png

然后就可以在chrome中过滤出来有这些prefix的log信息：

3_2.png

4、把一些函数直接添加到window对象上

如果你想知道某些第三方库到底有哪些方法，但是又不想去翻文档时，你只需把它添加到window上，然后你就可以在任意时候到控制台打印查看了。

我经常把moment添加到上面，这样就不用每次都再去翻文档了：

4_1.png 4_2.png

5、减少三元表达式的简单方法

大多数人都知道在写判断条件的时候添加||和&&是一个很快速的方式，但是还有一个??：

5_1.png

它的意思是，如果state?.bookings是 undefined的那么则返回{}

为什么不使用||？

主要是因为||适用于那些返回值是需要被转换成true或者false类型的表达式中，比如在if条件中。
而??则是用在那些需要明确知道返回值是null或者undefined的表达式中。

5_2.png

上面表达式的作用是：只有当state.booking.deleted的返回值为null或者undefined时，则返回true。如果这时使用了||，那么当state.booking.deleted的值为false时，也会返回true。

6、对象可选链调用

与上类似，可以在调用一个对象属性前添加?，防止出现属性未定义异常：

6_1.png

7、console.group

console.group()在你多次打印的时候非常有用。例如你在一个循环中打印一个日志，这个日志通常不止在循环初期会一行一行的打印，还会随着状态的改变，被不断的输出：

7_1.png

这个时候，你可能要花费很长的时间去分辨哪里时开头，哪里是结尾。一个通用的简单方法就是在需要打印日志的前后分别加上console.group()和console.groupEnd()

7_2.png

这样就可以在每次render的时候都把log进行分组了：

7_3.png