[译] 我多希望在我学习 React.js 之前就已经知晓这些小窍门

Posted 2021-03-30 掘金开发者社区

• 译文出自：掘金翻译计划

• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/what-i-wish-i-knew-when-i-started-to-work-with-react-js.md

• 译者：xionglong58

• 校对者：xujiujiu，wznonstop

自从 2013 年 5 月 29 日发布初始版本以来，React.js 迅速抢占互联网。很明显，包括我在内的很多开发者都从这一神奇的架构中获益。

在 Medium 中有很多关于 React.js 的教程，我真希望在初学 React.js 的时候，其中能有一篇能告诉我下面所列的一些小窍门。

使用箭头函数的时候不需要 .bind(this) 操作

通常，当你有一个受控组件的时候，你的程序多少会包含下面的内容：

 
   
   
 

  
    
    
  
class Foo extends React.Component{
  
    
    
  
 constructor( props ){
  
    
    
  
 super( props );
  
    
    
  
 this.handleClick = this.handleClick.bind(this);
  
    
    
  
 }
  
    
    
  


  
    
    
  
 handleClick(event){
  
    
    
  
 // your event handling logic
  
    
    
  
 }
  
    
    
  


  
    
    
  
 render(){
  
    
    
  
 return (
  
    
    
  
 <button type="button" 
  
    
    
  
 onClick={this.handleClick}>
  
    
    
  
 Click Me
  
    
    
  
 </button>
  
    
    
  
 );
  
    
    
  
 }
  
    
    
  
}
 
   
   
 

你之所以会针对每一个方法使用 .bind(this)，是因为大多数教程告诉你得那样做。当你有很多受控组件的时候，你的 constructor(){} 将会显得特别臃肿。

其实，你可以这样做：

 
   
   
 

  
    
    
  
class Foo extends React.Component{
  
    
    
  


  
    
    
  
 handleClick = (event) => {
  
    
    
  
 // your event handling logic
  
    
    
  
 }
  
    
    
  


  
    
    
  
 render(){
  
    
    
  
 return (
  
    
    
  
 <button type="button" 
  
    
    
  
 onClick={this.handleClick}>
  
    
    
  
 Click Me
  
    
    
  
 </button>
  
    
    
  
 );
  
    
    
  
 }
  
    
    
  
}
 
   
   
 

咋样？

ES6 中的箭头函数使用 词法作用域 让方法能够访问其被定义位置的 this。

当 service worker 阻碍你开发时

service worker 有利于 渐进式 web 应用，它使得网页能够离线访问，并在用户的网络连接状态差时进行优化。

但是，如果你没有意识到 service worker 在缓存你的静态文件，你会反复尝试进行热替换操作。

却发现网站一直得不到更新。