React 中的 console.log()

在 React 中，console.log() 会把值发送到浏览器开发者工具的控制台，方便你在调试时检查 JavaScript 数据。应在值可用的位置调用它：在组件中查看 props 或当前这次渲染的 state，在 effect 中观察已提交的 state，或在事件处理函数中检查用户输入。

console.log() 在 React 中的作用

console.log() 是 JavaScript 方法，并非 React 功能。它会把传入的参数写入开发者控制台，不会把它们显示在页面上。打开浏览器开发者工具并切换到 Console 面板即可查看消息。组件可以正常渲染而不产生任何日志；只有代码实际执行到调用处时，才会输出日志。

如需了解 console API 及其方法，请参阅 MDN 的 console 文档。

基本的 JavaScript 控制台日志

可以把字符串、数字、对象、数组或多个值传给 console.log()。下面这个独立的 JavaScript 示例会向开发者控制台写入一条问候字符串，显示结果如下：

console.log("Hello, React!");

Hello, React!

例如，console.log("user", user) 会为对象添加一个标签，便于在控制台中辨认。浏览器控制台通常会将对象格式化为便于检查的形式，但具体显示方式因浏览器而异。若要为消息设置样式，可以使用 console 的 %c 格式说明符，例如 console.log("%cImportant", "color: red; font-weight: bold")；%c 会将后面的样式字符串应用到消息文本。console.important() 并非内置方法；如果要使用它，必须由自定义封装自行定义其行为。

记录组件状态

在函数组件中，将 console.log(count) 放在组件函数体内，可以检查该次渲染中的 count 值。React 每次重新渲染组件时都会再次执行函数体，因此这条日志可能出现多次。开发环境中的行为（包括 Strict Mode）也可能导致额外渲染，不要假设每次用户操作只会产生一条日志。

更新 state 会安排后续渲染。在调用 setCount(count + 1) 后立刻记录 count，读到的仍是当前这次渲染中的值。若要观察每次提交后的值，可以在依赖项为 [count] 的 effect 中调用 console.log(count)；组件初次挂载后，该 effect 也会运行。若只想记录触发状态更新的特定操作，应在相应事件或操作发生处记录，而不要把带副作用的日志调用放进 state 更新函数中。

检查 props

在接收 prop 的组件内部记录它。例如，接收 user 的子组件可以在函数体中调用 console.log("user prop", user)。这样可以查看该次渲染收到的值，并追踪从父组件到子组件的数据流。由于组件函数体会在后续渲染中再次执行，同一个 prop 可能被重复记录。对于嵌套数据，可以只记录正在排查的具体字段，让输出更容易浏览。

记录事件数据

在事件处理函数中记录数据，就能在用户与页面交互时检查它。对于输入框的 change 处理函数，console.log(event.currentTarget.value) 会读取处理函数运行时输入框的当前值。如果处理函数同时更新 state，事件值可以立即记录，而新的 state 要等到后续渲染才能观察到。在处理函数中记录也能避免无关的组件渲染反复输出同一条消息。

安全使用并清理日志

把日志当作临时调试工具。发布前应搜索并删除已无用途的日志，尤其是可能包含个人信息、令牌或其他敏感值的消息。生产构建并不一定会移除 console.log() 调用；是否移除取决于项目的构建配置。只有符合应用日志策略的日志才应作为有意保留的运行日志。

要检查某个值，应在它可用的位置记录：组件数据可在渲染期间或 effect 中查看，交互数据则适合在事件处理函数中查看。较大的调试任务还可以使用浏览器断点和 React Developer Tools 检查执行过程及组件数据，无需在代码中留下长期存在的日志语句。你可以使用浏览器控制台的清除按钮，或调用 console.clear() 清空当前显示的内容；但清空控制台不会从代码中删除日志调用。如果希望生产构建剔除日志，请检查构建配置；否则，应在发布前从源代码中移除临时调用。