React.Toptal Developers的最佳实践和技巧

使用React时另一个非常常见的场景.Js是开发应用程序使用的 webpack-dev-server 具有热重新加载支持. 就我个人而言，为此我使用了一系列可以在a中找到的组件 React Transform样板.

一旦你的热重新装填工作正常, 你最终可能会遇到第三方React中一些JavaScript引用的问题.Js组件，比如 react-chartjs 标题中提到的组件. 在这种情况下，很有可能 react-chartjs和它的叉 rc-chartjs，都有同样的问题:他们找不到指向 window 对象绑定脚本时 webpack 并由 webpack-dev-server.

为了解决这个问题，我使用了webpack提供的import-loader. 看一下 webpack 配置示例如下:

module: {
  loaders: [
    {测试:要求.解决(“图.. Js ')， loader: 'imports . Js?this=>window'}, 
  ]
}

如你所见，我们正在注射 this 参考a window 物体直接进入 chart.js library.

依赖注入是JavaScript开发人员可以使用的最好的软件设计实践之一. 通过使用依赖注入，我们可以避免应用程序中出现大量重复的代码, 主要是关于服务初始化和配置.

在下面的例子中，我使用了一个依赖注入库 Jimple 管理我的服务层代码注入到组件中. 但首先，我需要确保Jimple容器在每个React上被正确注入.js组件.

让我们先看一下容器的定义:

从' Jimple '中导入Jimple;

import {UsersService} from./服务/ UsersService”;

export let container = new Jimple();

container.设置('API_URL'，函数(c) {
  返回“http://localhost: 8080 / api”;
});

container.set('API_VERSION'， function (c) {
  return '1.0.0';
});

container.set('USERS_SERVICE'， function (c) {
  c .返回新的UsersService.(“API_URL”),c.(' API_VERSION '));
});

接下来，在 Router 我们需要在每个组件上注入容器 Component 由它的路线呈现. 为此，我们定义了一个函数 createElement 它允许我们将容器作为属性转发给组件:

从react-router中导入{Router, IndexRedirect, Route, History};

导入{container}./container';

类MoneyApp扩展React.Component {
  render() {
    return 
{this.props.children}
  }
}

//将容器作为道具传递给子组件
函数createElement(组件，道具){
  return 
}

render((

  
    
    
      
    
    
  
),
document.getElementById(“软件”));

最后，我们可以像下面的例子一样检索依赖项:

类概述扩展React.Component {
  构造函数(){
    super();
    this.state = {pending: []， lastMonths: []}
  }
  componentDidMount () {
    让service = this.props.container.(“服务”);
    service.yourMethod ();
  }
  render() {
	return 
Some content
  }
}

当开始使用一个新框架时, 许多开发人员经常落入陷阱，以一种它没有设计的方式使用它, 或者应用从以前的使用中学习到的实践和模式. As React.js和Flux挑战了其中的一些做法, 有可能我们一开始就没有做到最好. 让我们在下面的场景中看看这一点.

In Flux, 一个叫做dispatcher的东西负责通知所有商店app中发生了一些动作, 这样那些商店就能更新应用状态然后通知关心那些商店的视图有更新了, 让那些视图重新渲染自己. 那个dispatcher基本上作为一个事件总线.

A new React.js developer, 来自以前的MVC库或框架, 会很快想要监听那些操作，或者滥用“调度器”来触发不需要被商店监听的事件吗. 像这样:

componentDidMount () {
  myDispatcher.register((action) => {
  	if (action.type === "whatImListeningFor").doSomething ();
  });
}

如果你正处于这种情况，或者你正在从事的项目中有这种情况，请三思而后行. 在这个架构中, 国家是真理的源泉, 以及应用中发生的任何有意义的事情, 你应该有一些状态来表示发生的事情所造成的一些变化.

有些事情最初似乎是错误的模型状态, 或者基于事件而不是基于状态进行建模更有意义. For example, 动画是你可能认为应该由事件触发的东西, 而不是在州旗上说 动画:真 或者类似的东西. 但实际上，动画实际上是一个可视化的 transition 国家间的. 在这个例子中，我们可以不听事件，而是听 状态转换 触发特定组件中的动画. 你说，我们怎么能做到呢? Well, React 为我们提供了一些 生命周期的钩子 它允许我们做我们想做的事情: componentWillReceiveProps, componentWillUpdate, componentDidUpdate，是要在前面的链接中查找的. 它们允许我们比较以前的道具和新道具(或以前的本地状态), 和新的地方州)，并在发生这种情况时采取行动. 我们可以在那里触发动画，或者任何我们想要的东西. 这样我们也可以检测到返回到另一个状态的转换, 然后恢复动画. 它使我们能够更好地控制要做什么，并与应用程序的状态保持同步, 与从其他地方触发一个想对我们说点什么的单一事件相比, 并将该事件的发射器与调用者耦合.

从个人经验来看，我还没有发现需要发射事件, 并且总是能够通过倾听来解决这些问题 状态转换. 如果有真正需要的用例, trust me, 它们非常罕见，你应该在尝试之前考虑一下这里解释的方法. 如果您需要特定用例的帮助，并且不知道该怎么做，您可以在下面留下评论.

话虽如此，值得一提的是，我们正在讨论的国家没有 necessarily 意思是它应该在商店里生活. 如果把它放在那里没有意义，你可以直接使用本地组件状态(this.state and this.setState)，并有相同的工作方式(如前所述， componentWillUpdate and componentDidUpdate 与当地政府合作). 如果您发现将其移到存储中是有意义的(因为它与其他组件共享), 您可以通过操作而不是直接在组件中轻松升级和修改它.

总而言之, 避免将调度程序用作存储库无法处理的事件的事件总线, 试着去听 状态转换 提供的生命周期钩子 React 在你的组件中. 不要仅仅因为dispatcher是事件发射器就滥用它，它的角色就是事件发射器 非常具体的.

您希望您的应用程序具有一致的外观和感觉，因此您不希望传递 classNames 并以特别的方式进行样式设置. 有可能通过任何风格或 className To一个组件意味着:

• 你必须考虑需要什么样的风格才能使它看起来像你想要的那样.
• 您必须知道默认的样式集，以便从一开始就了解样式.
• 你可以传递任何没有意义的样式，可能会破坏你的UI.

让我们用一些例子来看看我在说什么.

让我们先渲染一个“primary”按钮:

Press me!

在上面的例子中，我们必须知道我们需要通过这些类 btn and btn-primary. 同样，我们也可以通过其他的 className 这说不通，就像 make-this-look-like-a-pig.

相反，请考虑以下代码片段:

Press me!

在上面的代码示例中，我们使用了一个自定义的Button组件，它可以在内部使用第一种方法, 只是暴露了 primary 布尔属性如下:

类Button扩展React.Component {
  render() {
    //使用http://github.com/JedWatson/classnames
    var className = classNames(' btn '，此.props.primary && “btn-primary”);
    return 
      {this.props.children}
    ;
  }
}

让我们考虑另一个例子. 我们想把主要内容渲染在左边，边栏渲染在右边:

  主要内容


  侧边栏内容

如果我们想使用flexx呢? 我们需要到这里修改我们传递给div的样式. Also, 我们可以传递任何我们想要的样式, 包括那些没有任何意义或者我们不希望别人使用的样式.

现在，看看下面的代码:

  主要内容


  侧边栏内容

我们将这块布局包装成单独的组件, 谁把样式实现细节隐藏起来了, 我们只是使用它们. 这段特殊的代码甚至不关心侧边栏是在左边还是右边.

另一个例子，显示一个成功的通知:

  一个好的通知

和第一个例子一样. 我们需要知道需要使用这些类.

  一个好的通知
 

使用接受类型的自定义通知组件，可以通过 React.PropTypes 使用预定义集合的任意值使得该组件的用户不需要记住任何类约定.

最后一个例子. 我们来看看如何通过定义a来简化布局 Layout 组件，该组件指定其子元素的宽度.

在这里，我们首先在同一行中布局三个输入, 前两个大小相等，第三个大小是其他两个的一半, 行取容器的全宽度. 然后我们用一个按钮渲染另一行.

  
  
  


  Submit

请注意如何避免风格和 classNames 强制您分离样式关注点，例如外观和布局, 这意味着您将有不同的组件来执行每个组件. 在最后一个例子中， Input and Buttons 不知道他们将如何布局. 这是父组件的工作.

把组件的属性看作它们的API. 暴露样式或 classNames 就像暴露一个可以有数百个选项的“options”对象. 你真的希望你自己的组件也这样吗? 当你使用它们的时候，你真的想要考虑每一个可能的选择吗?

最好留下风格和 className 在您的最叶组件中使用, 并生成一组组件来构建您的外观, 另一个用来定义布局的集合.

当你这样做的时候, 创建新组件将简单得多, views, 以及应用程序的页面, 因为你只需要安排你的外观和布局组件集，并传递正确的道具，甚至不需要考虑CSS或样式.

还有一个额外的好处, 如果您想调整样式或更改应用程序的外观和感觉, 您只需要修改库组件即可. 此外，如果您为它们保留相同的API，那么使用它们的组件将保持不变.

不要用大的组件直接渲染一堆东西. 它使你的组件难以维护，也使你难以利用React的优化, 因为它仍然需要创建很多元素并计算差异. 此外，拥有具有大型渲染方法的组件意味着组件要做太多的工作. 就像函数体很长一样. 相反，可以考虑将组件拆分为许多小组件.

创建小组件来呈现页面的特定部分或向UI添加特定的新行为. 你可以单独思考每一块, 您甚至可以从性能优化中获益，例如 shouldComponentUpdate 以更细粒度的方式，或其他生命周期组件. 此外，它们将在整个应用程序中变得更易于重用. 更不用说React社区了，如果它们足够通用的话.

以下提示可以帮助您了解是否应该分离组件:

• 保持你的渲染函数小而简单. 您可以将呈现函数拆分为同一组件中的几个函数, 但如果有意义的话，尝试将这些渲染块拆分为单独的组件.
• 您是否在同一个组件中处理应用程序状态逻辑和表示? 尝试将其分离为仅处理状态的组件和处理表示的一个或几个组件, 在哪里状态作为属性传递给子组件.
• 你的渲染方法中是否有一些元素需要比其他元素更频繁地更新? 将该块提取到一个单独的组件中, 并尝试在内部本地化状态更新(如果有意义的话), 或实现 shouldComponentUpdate 在其他组件中避免不必要的重新渲染.
• 你是否有一个包含很多部分和字段的表单，但你真的不关心所有的中间状态, 只有初始值和提交值? 将该表单提取到它自己的组件中(甚至将表单的不同部分提取到它们自己的组件中)，这些组件接受初始值作为属性, and have an onSubmit 使用表单的最终值调用的回调属性, 使父窗体不需要在每次表单发生中间更改时重新呈现. 在这些部分组件的内部, 要么使用不受控制的组件，要么使用组件内部状态.
• 您是否为一组组件的布局做了大量的样式化工作? 将其提取到具有可配置但预定义布局的布局组件中，并将您的组件作为它们的子组件.
• 您是否通过悬停等状态向某些组件添加行为, collapsing, expanding, 或者让它弹出来? 将该行为移动到单独的组件中，这些组件接受一个要呈现的子函数, 并通过该函数的参数设置状态, like:

    {hovered => 
{hovered ? “我徘徊!” : “I’m not hovered”}
}

当然，有更多的理由将当前组件拆分为更多组件. Remember, React中的组件很像函数, 您可以将一个函数拆分为多个函数，并以您想要的任何方式组合或组合, 仍然达到同样的结果.

使用React时.Js，你可能遇到了如何访问的问题 this 从承诺的深处. 例如，如下面的代码所示，其中一个问题可能是 this 承诺里的决心是什么 undefined :

类组件扩展React.Component { 
  componentDidMount () {
    axios.(“http://..”。).然后(函数(数据){
      this.setState({name: data.blah } );
    });
  }
}

需要解决的问题不止一个 this 承诺内部的引用. 旧的方法是设置 self = this reference. 虽然这是可行的, 推荐的解决方案, 哪个更符合ES6, 将在这里使用箭头函数:

类组件扩展React.Component { 
  componentDidMount () {
    设component =这个;
    axios.(“http://..”。).然后(函数(数据){
      component.setState({name: data.blah } );
    });
  }
}

如上所述，箭头语法是一种更智能的方式 this 提到… React.Component 类，如下所示:

类组件扩展React.Component { 
  componentDidMount () {
    axios.(“http://..”。).then(data => {
      this.setState({name: data.blah } );
    });
  }
}

请注意，而不是使用 函数(data){//主体}, we used data => { //body }，在这种情况下 this 引用将无法取回承诺实例.