React 初學者須要知道的一些知識

做者：valentinogagliardi

譯者：前端小智

來源：medium

---

阿(a)裏(li)雲(yun)服務器很便宜火爆，今年比去年便宜，10.24~11.11購買是1年86元，3年229元，能夠點我時行參與

---

使用箭頭函數時不須要 .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)來解決 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 workers 很是適合漸進式Web應用程序，它容許離線訪問並優化互聯網鏈接較差的用戶。

可是當你不知道服務工做者正在緩存靜態文件時，你會反覆上傳熱修復程序， 卻發現你的網站一直沒有更新。

不要驚慌，查看 src/index.js：

// 將它註銷掉
serviceWorker.unregister();
複製代碼

從16.8版本開始，默認爲 serverWorker.unregister()。

99% 的狀況下不須要運行 eject 命令

Create React APP 提供了一個選項 yarn eject，能夠彈出項目來定製構建過程。

我記得曾嘗試自定義構建過程，使SVG圖像自動內聯到代碼中。 我花了幾個小時試圖瞭解構建過程。最後，咱們獲得了一個導入文件，該文件注入 SVG 標記，咱們將網站的加載速度提升了0.0001毫秒。

彈出 React 項目就像打開正在運行的汽車的引擎蓋，同時動態地更換引擎，使其運行速度提升1%。

固然，若是你已是一個 Webpack 高手，那麼定製構建過程來定製項目的需求是值得的。

當你想按時完成任務時，把精力集中在它能推進你前進的地方。

ESlint Auto 保存自動格式化可節省大量時間

你可能已經從某些沒有格式化的地方複製了一些代碼。由於你沒法忍受它看起來有多醜，你花時間手動添加空格。

使用 ESLint 和 Visual Studio 代碼插件，它能夠在保存時爲你格式化它。

要怎麼設置

1.在你的 package.json 中，添加一些dev依賴項並執行 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 和 Hook，你還須要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，但事實並不是如此，由於 setState 是異步的
  // isFiltered尚未改變
  if (this.state.isFiltered) {
   // Do some filtering
  }
 };
複製代碼

正確作法一：將狀態傳遞下去

toggleFilter = () => {
 const currentFilterState = !this.state.isFiltered;
 this.setState({
  isFiltered: currentFilterState
 });
 this.filterData(currentFilterState);
};
filterData = (currentFilterState) => {
 if (currentFilterState) {
  // Do some filtering
 }
};
複製代碼

正確作法二：使用 setState 回調函數

toggleFilter = () => {
 this.setState((prevState) => ({
  isFiltered: !prevState.isFiltered
 }), () => {
  this.filterData();
 });
};
filterData = () => {
  if (this.state.isFiltered) {
   // Do some filtering
  }
};
複製代碼

總結

這些技巧爲我節省了不少時間，我相信還有更多,歡迎在評論區留言討論。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：medium.freecodecamp.org/what-i-wish…

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。