React 项目的流行配置使用 Webpack 和 Babel。 两者都允许使用此特性并将其编译为所有浏览器都能理解的内容。 只有工作流中有 Webpack 或 Babel 之类的转译工具，才能使用 import/export。
但是，在 React 打包应用程序中 import/export 不意味着可以随意使用它们！ 例如，如果你还通过最新的 Node 进行服务器端渲染，会行不通，你很可能会收到“unexpected token” 错误。
要让 Node 理解 import/export（如果你在前端使用它们就是你需要了解它们，并且也想要做 SSR 渲染的话），你需要有可以编译其的 Babel preset（像是_env_ preset），才能在Node 端运行。 你可以在开发时使用像 *pm2_、 _nodemon* 和 _babel-watch_的工具做到这点，，并在每次更改内容时重新启动 Node。
15. 不绑定处理程序方法我把这个留到最后，因为这是一个大问题，一个很常见的问题。
你可以在 React 组件中定义类方法，然后在组件的 render 方法中使用它们。 例如：
class Greeting extends React.Component { whoIsThis() { console.dir(this); // "this" is the caller of whoIsThis return "World"; } render() { return `Hello ${this.whoIsThis()}`; } } ReactDOM.render(<Greeting />, mountNode);我在 render 里以 this.whoIsThis 的方式调用 whoIsThis 方法，因为在 render中，this 关键字指的是与表示组件的 DOM 元素关联的组件实例。
内部 React 确保其类方法中的 “this” 指向实例。 但是，当你使用 whoIsThis 方法的引用时，JavaScript 不会自动绑定实例。
whoIsThis 方法中的 console.dir 可以正确告诉我们当前组件实例，因为该方法是使用显式调用方（this）直接从 render 方法调用的。 执行上面的代码时，在控制台中看到Greeting 对象：
然而，当在延迟执行通道，例如事件处理里执行同样方法时，调用对象将不再是显性的，console.dir 也不会打印当前组件实例。
在上面的代码中，当单击字符串时，React 会调用 whoIsThis 方法，但它不会让你访问组件实例。 这就是我们点击字符串时得到 undefined 的原因。 如果类方法需要访问像this.props 和 this.state 这样的属性，这会是一个问题，因为它根本行不通。
对于这个问题有很多解决方案。可以将方法包装在内联函数中，或使用 .bind 来改变 this 指向。 对于不经常更新的组件，两者都可以。
还可以通过在类的构造函数中而不是在 render 方法中执行来优化 bind 方法。 但是，此方法的最佳解决方案是通过 Babel 来使用 ECMAScript 类字段我（目前还是stage-3），这样对于处理程序只需使用箭头函数就可以了：
class Greeting extends React.Component { whoIsThis = () => { console.dir(this); } render() { return ( <div onClick={this.whoIsThis}> Hello World </div> ); } }这样会和预期一样执行：
原文：React.js Commonly Faced Problems
关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！
