當我開始使用React 時，我但願我知道這些知識

時間 2019-11-15

標籤開始使用 react 但願知道這些知識欄目 React 简体版

原文原文鏈接

自2013年5月29日首次發佈以來，React.js已經佔領了互聯網。我和許多其餘開發人員將他們的成功歸功於這個了不得的框架，這已經不是什麼祕密了。html

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！前端

使用箭頭函數時不須要 .bind(this)

一般，若是有一個受控組件時，會有以下的結構:react

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(){}中就會有一大堆代碼。git

相反，你能夠這樣作：

class Foo extends React.Component{
  handleClick = (event) => {
    // your event handling logic
  }
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

ES6 的箭頭函數使用詞法做用域，它容許方法訪問 this 觸發的地方。github

當 service worker 與你的代碼衝突時

Service workers 很是適合漸進式Web應用程序，它容許離線訪問並優化互聯網鏈接較差的用戶。npm

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

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

// 將它註銷掉
serviceWorker.unregister();

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

但若是你想改變它的狀態，你就知道在哪裏改了。緩存

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
  }
};