为什么不能在 JSX 里直接写 console.log？

image-20191211171822674

本文适合哪些人阅读

本文从「为什么不能直接在 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 能让你通过吗？

答案是否定的。让我们来看看这样写实际上会渲染出什么效果：

image-20191211134413837

这显然不符合我们最初的预期——将 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转译后交给浏览器渲染的节点就是下面这样的：

image-20191211141414092

现在，我们再回过头来看文章开头的那个渲染结果就一点都不奇怪了。

image-20191211134413837

以上的 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 来打印，效果更佳：

image-20191211143630652

使用 { } 来包裹 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>
  )
}

好了，看看浏览器渲染结果：

image-20191211142711353

正确！没有渲染出什么我们不想要的东西。

再看看控制台：

image-20191211142801259

也按照我们的预期打印出了 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 语句的姿势了～

img

不过使用 console.log 终归不是一种优雅的方式，下面简单介绍几种 React 项目调试代码的方式：

• 使用 Chrome DevTools
• 使用 Chrome 扩展商店的插件：React Developer Tools，这是 Facebook 官方提供的
• visual studio Code 插件：Debugger for Chrome
  • https://jerryzou.com/posts/vscode-debug-guide/

因为篇幅关系这里就不展开讲了，感兴趣的同学可以点击链接进去看下官方文档了解下。

本文已同步发表于我的掘金专栏