[譯] 我多但願在我學習 React.js 以前就已經知曉這些小竅門

• 原文地址：What I wish I knew when I started to work with React.js
• 原文做者：David Yu
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：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 在緩存你的靜態文件，你會反覆嘗試進行熱替換操做。

卻發現網站一直得不到更新。😰

莫慌張, 確保你的 src/index.js 文件中有如下內容：

// 確保註銷 service worker
serviceWorker.unregister();
複製代碼

從 React.js 的 16.8 版開始，上面一行默認就是 serverWorker.unregister()。

可是，若是之後版本有變化，你也會知道在哪兒進行修改。

99% 的狀況下你不須要使用 eject

Create React App 提供一個命令 yarn eject，使得你可以定製項目的構建過程。

還記得我曾爲了在代碼中自動內嵌 SVG 圖片而嘗試去本身配置構建過程。我花了大量的時間去了解整個構建過程。最終咱們獲得了一個注入了 SVG 標籤的導入文件，並將站點的加載速度只提升了 0.0001 毫秒。

eject 你的 React 項目就像是打開運行中汽車的引擎蓋，並在行駛中更換引擎同樣。

固然了，若是你是一名 Webpack 大佬，那麼爲了知足項目的需求而去定製構建過程也是值得的。

若是你只是想按時完成任務，那就把精力所有集中在可以推進你前進的地方。

ESlint 的 Auto Fix On Save 會讓你節省不少時間

你可能也曾從某些地方拷貝過格式混亂的代碼。因爲沒法接受它「醜陋」的格式，你不得不花時間手動加一些空格啥的。

有了 ESLint 和 Visual Studio Code 插件，代碼會在你保存文件時自動對齊。

如何進行設置呢？

1. 在你的 package.json 文件中添加一些 dev dependencies 並執行命令 npm i 或 yarn：

"devDependencies": {

 "eslint-config-airbnb": "^17.1.0",

 "eslint-config-prettier": "^3.1.0",

 "eslint-plugin-import": "^2.14.0",

 "eslint-plugin-jsx-a11y": "^6.1.1",

 "eslint-plugin-prettier": "^3.0.0",

 "eslint-plugin-react": "^7.11.0"

}
複製代碼

2. 安裝 ESLint 擴展

3. 勾選 Auto Fix On Save

你並不須要 Redux、styled-components 等庫

每種工具都有其用途，瞭解不一樣的工具也確實是件好事。

若是你手裏有一把錘子，全部東西看上去都像釘子。—— 亞伯拉罕·馬斯洛

使用一些庫時你須要考慮引入它們的時間成本，還要考慮下面的幾個問題：

• 我將要去解決什麼問題？

• 項目可否長久的受益於這個庫嗎？

• React 自己是否是已經提供了現成的解決方法？

當 React 有 Context 和 Hooks 時, 你真的還須要 Redux 嗎？

當你的用戶處於糟糕的網絡環境時，我尤爲推薦你使用 Redux Offline。

重用事件處理器

若是你不喜歡重複編寫相同的程序，那重用事件處理器是一個不錯的選擇：

class App extends Component {

 constructor(props) {
  super(props);
  this.state = {
   foo: "",
   bar: "",
  };
 }

 // Reusable for all inputs
 onChange = e => {
  const {
   target: { value, name },
  } = e;
  
  // name will be the state name
  this.setState({
   [name]: value
  });

 };
 
 render() {
  return (
   <div>
    <input name="foo" onChange={this.onChange} />
    <input name="bar" onChange={this.onChange} />   
   </div>
  );
 }
}
複製代碼

setState 方法是異步的

小白時期的我可能會寫下面的程序：

constructor(props) {
  super(props);
  this.state = {
   isFiltered: false
  };
 }

 toggleFilter = () => {
  this.setState({
   isFiltered: !this.state.isFiltered
  });
  this.filterData();
 };
 
 filterData = () => {
  // this.state.isFiltered 值應該爲 true，但事實上卻爲 false
  if (this.state.isFiltered) {
   // Do some filtering
  }
 };
複製代碼

建議 1：向下傳遞 state

toggleFilter = () => {
 const currentFilterState = !this.state.isFiltered;
 this.setState({
  isFiltered: currentFilterState
 });
 this.filterData(currentFilterState);
};

filterData = (currentFilterState) => {
 if (currentFilterState) {
  // 作些過濾操做
 }
};
複製代碼

建議 2：在 setState 的第二個回調函數中操做 state

toggleFilter = () => {
 this.setState((prevState) => ({
  isFiltered: !prevState.isFiltered
 }), () => {
  this.filterData();
 });
};

filterData = () => {
  if (this.state.isFiltered) {
   // 作些過濾操做
  }
};
複製代碼

總結

這些小竅門節省了我不少時間，我也相信還有不少關於 React.js 的小竅門。請在評論區自由評論、分享你所知道的小竅門。

（廣告時間）若是你但願你的網站與微信平臺進行結合，並得到 10 億以上的用戶，快註冊獲取微信經常使用術語詞彙表.

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。