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

本文适合哪些人阅读

本文从「为何不能直接在 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/

由于篇幅关系这里就不展开讲了，感兴趣的同窗能够点击连接进去看下官方文档了解下。