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

前端小智發表於2019-10-24
React

作者：valentinogagliardi

譯者：前端小智

來源：medium

使用箭頭函式時不需要 .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 儲存自動格式化可節省大量時間

你可能已經從某些沒有格式化的地方複製了一些程式碼。因為你無法忍受它看起來有多醜，你花時間手動新增空格。

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

使用 ESLint 和 Visual Studio 程式碼外掛，它可以在儲存時為你格式化它。

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

要怎麼設定

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 外掛

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

3.啟動 Auto Fix On Save

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

你不需要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…

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

乾貨系列文章彙總如下，覺得不錯點個Star，歡迎 加群 互相學習。

github.com/qq449245884…

因為篇幅的限制，今天的分享只到這裡。如果大家想了解更多的內容的話，可以去掃一掃每篇文章最下面的二維碼，然後關注我們們的微信公眾號，瞭解更多的資訊和有價值的內容。

clipboard.png

相關文章