React 开发者的 5 个小技巧

废话不多说，开始吧。

1. 漂亮地打印你的道具。

你刚刚创建了一个包含大量 props 的新组件。为了快速理解它们，你可以使用原生的 JSON.stringify 函数，并在页面上添加更多参数，从而让它们更美观地显示出来。

const NewComponent = (props) => (
   <pre>
      {JSON.stringify(props, null, 2)}
   </pre>
);

2.解决围绕一个组件的多个 HOC？

由于某些原因，你无法使用 Hooks，所以最终只能使用 HOC（高阶组件）。这很快就会变得棘手。使用 compose 函数来清理你的代码。你可以创建自己的 Hooks，或者如果你使用 Redux，也可以从 Redux 中导入一个。

export default connect(mapStateToProps, mapDispatchToProps)(i18n(format(Component)));

// vs.

import { compose } from 'redux'; // or your implementation

const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
   i18n,
   format
);
export default enhance(Component);

3. 使用简洁主体（主体没有返回语句）的 console.log 函数。

你有一个使用简洁代码体的函数组件，因此你可以立即返回代码体，而无需任何return语句。这确实节省了不少时间……但是，如果你想要 console.log 属性，那该怎么办呢？你必须用 return 语句将其转换为块体。或者不用？其实，你可以使用条件逻辑来实现。

const Component = (props) => console.log(props) || (
   <div>
      {props.children}
   </div>
);

这既记录props到控制台又呈现组件，因为 console.log 返回 falsy 值，所以它跳到条件的第二部分。

4.手动重启nodemon

有时您想手动重启 nodemon 服务器。无需对某个文件进行一些随机更改，然后按下 Ctrl + S，只需rs在运行 nodemon 的终端中输入回车符 (Enter) 即可。服务器将重新启动。

5. 将 HTML 字符引用作为 props 传递

想要在 JSX 中将 HTML 字符引用作为 props 传递吗？它适用于简单的字符串，但无法处理更复杂的逻辑。您可以使用 String.fromCharCode 函数来实现。

// <Component charCode={160} />
// 160 -> non-breaking space

const Component = (props) => {
   const divider = String.fromCharCode(props.charCode);
   return (
      <div>
         <SubComponent text={`${divider}-${divider}`} />
      </div>
   );
}

在我的 Twitter 上查找更多技巧！
https://twitter.com/Michalhonc

文章来源：https://dev.to/michalhonc/5-canny-little-tricks-for-react-devs-2bjj