本文适合哪些人阅读
本文从「为什么不能直接在 JSX 里面写 console.log」这个问题出发，分析了 React的元素渲染机制，并介绍了几种在JSX 执行 console.log 语句的姿势，最后还介绍了 React 项目中调试代码的其他姿势。
本文适合 React 初学者阅读，如果你已经可以熟练使用 React 开发项目，本文对于你来说可能过于简单。
为什么会写这篇文章
为什么会写这篇文章呢？因为前一阵子在给公司里面其他同事（非前端）做 React开发培训的时候，发现有很多 React 初学者喜欢在代码中使用 console.log 来调试，并且习惯性地写成下面这样：
// 这里我们期望将 menus 这个数据打印出来查看
return (
<div>
<h1>Hello World</h1>
console.log(menus)
</div>
)
但是上面这个写法 React 能让你通过吗？
答案是否定的。让我们来看看这样写实际上会渲染出什么效果：
这显然不符合我们最初的预期——将 menus 数据显示在页面中，让我们可以看到 menus中具体有些什么数据。
那么为什么会出现这种结果呢？
这就要从 React 的元素渲染机制说起了。
React 的元素渲染机制
首先来看看对于<h1>Hello World<h1> 这个语句，React 是怎么渲染的：
React.createElement(
'h1',
null,
'Hello World'
)
怎么理解上面这段代码呢？
JSX 是一个JavaScript 的语法扩展，我们利用JSX这个语法糖来更好地描述 UI 和数据的交互形式。但是我们最终要交给浏览器去渲染的，应该是html文件，这才是浏览器能识别的，所以我们需要利用 Babel 来做语法转译。
Babel 会把 JSX 转译成一个名为React.createElement() 的函数调用。
让我们来看看 React.createElement() 函数的参数定义：
React.createElement(
type,
[props],
[...children]
)
它接收的第一个参数是 html 的标签名，第二个参数是 props，第三个参数就是标签包裹着的所有 children。
好了，理解了 React的元素渲染机制之后，我们再来看看加上console.log之后，完整的渲染语句：
render() {
return React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello'
),
'console.log(menus)'
)
}
可以看到，对于 div标签来说，它的孩子有两个：由h1 标签包裹的 Hello World 文本<h1>Hello World<h1> 以及没有任何标签包裹的 console.log(menus) 文本（是的！在这里，console.log(menus) 语句已经被 React.createElement 函数识别成了 文本！！！）。
所以，Babel转译后交给浏览器渲染的节点就是下面这样的：
现在，我们再回过头来看文章开头的那个渲染结果就一点都不奇怪了。
以上的 Babel 转译过程你可以点击这里来体验
如果我一定要在 JSX 中打印出数据呢
哼，虽然搞懂了为什么不能在JSX中直接使用 console.log 这个打印语句来打印数据，但是有的时候我们就是想要把数据打印出来调试（大部分前端 er 都习惯使用console.log 来调试代码 ），怎么办呢？
还真有几个好办法，下面就听我细细道来。
在 JSX 之外打印数据
第一种方法最简单了，应该大家都想得到——你可以在JSX之外写 console.log 啊。
render(){
console.log(menus)
return console.log(menus) || (
<div>
<h1>Hello World</h1>
</div>
)
}
如果你要打印的数据是对象或者数组，你还可以使用 console.table 这个API 来打印，效果更佳：
使用 { } 来包裹 console.log 语句
首先我们要明确一个点：
在
JSX语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName或formatName(user)都是有效的 JavaScript 表达式。
所以，你可以这样写：
render(){
return (
<div>
<h1>Hello World</h1>
{
console.log(menus)
}
</div>
)
}
使用 || 操作符
这个方法就比较秀了，虽然不难也不复杂，但是一般人可能想不到。
我们可以这样写:
render(){
return console.log(menus) || (
<div>
<h1>Hello World</h1>
</div>
)
}
好了，看看浏览器渲染结果：
正确！没有渲染出什么我们不想要的东西。
再看看控制台：
也按照我们的预期打印出了 menus 数据！
为什么可以这样写呢？
因为 console.log 的返回值是 undefined，我们可以巧妙地利用这一点再结合 || 操作符短路的属性，自然而然地实现既打印数据又正确渲染 UI 的效果。
使用JSON.stringify
第二种方法就是我们可以直接用JSON.stringify 将数据包装一下，然后放在 div 标签中渲染，这样我们就可以直接在界面上看到数据，而不用一直盯着控制台。
render(){
return console.log(menus) || (
<div>
<h1>Hello World</h1>
<div>{JSON.stringify(menus)}</div>
</div>
)
}
当然，这种方式更适合于打印比较小的数据。
有什么更好的调试方法吗
如果你已经看到了这里，恭喜你！你已经掌握了四种在 React 使用执行 console.log 语句的姿势了～
不过使用 console.log 终归不是一种优雅的方式，下面简单介绍几种 React 项目调试代码的方式：
- 使用 Chrome DevTools
- 使用 Chrome 扩展商店的插件：React Developer Tools，这是 Facebook 官方提供的
- visual studio Code 插件：Debugger for Chrome
因为篇幅关系这里就不展开讲了，感兴趣的同学可以点击链接进去看下官方文档了解下。
本文已同步发表于我的掘金专栏
