摘要：自年月日首次發(fā)布以來(lái)，已經(jīng)占領(lǐng)了互聯(lián)網(wǎng)。我和許多其他開(kāi)發(fā)人員將他們的成功歸功于這個(gè)了不起的框架，這已經(jīng)不是什么秘密了。不要驚慌，查看將它注銷(xiāo)掉從版本開(kāi)始，默認(rèn)為。彈出項(xiàng)目就像打開(kāi)正在運(yùn)行的汽車(chē)的引擎蓋，同時(shí)動(dòng)態(tài)地更換引擎，使其運(yùn)行速度提高。

自2013年5月29日首次發(fā)布以來(lái)，React.js已經(jīng)占領(lǐng)了互聯(lián)網(wǎng)。我和許多其他開(kāi)發(fā)人員將他們的成功歸功于這個(gè)了不起的框架，這已經(jīng)不是什么秘密了。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

通常，如果有一個(gè)受控組件時(shí)，會(huì)有如下的結(jié)構(gòu):

class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event){
    // your event handling logic
  }
  render(){
    return (
      
      Click Me
      
    );
  }
}

可以給每個(gè)方法加上.bind(this)來(lái)解決 this 指向的問(wèn)題，因?yàn)榇蠖鄶?shù)教程都告訴你這樣做。如果你有幾個(gè)受控組件，那么constructor(){}中就會(huì)有一大堆代碼。

class Foo extends React.Component{
  handleClick = (event) => {
    // your event handling logic
  }
  render(){
    return (
      
        Click Me
      
    );
  }
}

ES6 的箭頭函數(shù)使用詞法作用域，它允許方法訪(fǎng)問(wèn) this 觸發(fā)的地方。

Service workers 非常適合漸進(jìn)式Web應(yīng)用程序，它允許離線(xiàn)訪(fǎng)問(wèn)并優(yōu)化互聯(lián)網(wǎng)連接較差的用戶(hù)。

但是當(dāng)你不知道服務(wù)工作者正在緩存靜態(tài)文件時(shí)，你會(huì)反復(fù)上傳熱修復(fù)程序， 卻發(fā)現(xiàn)你的網(wǎng)站一直沒(méi)有更新。

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

// 將它注銷(xiāo)掉
serviceWorker.unregister();

從16.8版本開(kāi)始，默認(rèn)為 serverWorker.unregister()。

但如果你想改變它的狀態(tài)，你就知道在哪里改了。

Create React APP 提供了一個(gè)選項(xiàng) yarn eject，可以彈出項(xiàng)目來(lái)定制構(gòu)建過(guò)程。

我記得曾嘗試自定義構(gòu)建過(guò)程，使SVG圖像自動(dòng)內(nèi)聯(lián)到代碼中。 我花了幾個(gè)小時(shí)試圖了解構(gòu)建過(guò)程。最后，我們得到了一個(gè)導(dǎo)入文件，該文件注入 SVG 標(biāo)記，我們將網(wǎng)站的加載速度提高了0.0001毫秒。

彈出 React 項(xiàng)目就像打開(kāi)正在運(yùn)行的汽車(chē)的引擎蓋，同時(shí)動(dòng)態(tài)地更換引擎，使其運(yùn)行速度提高1%。

當(dāng)然，如果你已經(jīng)是一個(gè) Webpack 高手，那么定制構(gòu)建過(guò)程來(lái)定制項(xiàng)目的需求是值得的。

當(dāng)你想按時(shí)完成任務(wù)時(shí)，把精力集中在它能推動(dòng)你前進(jìn)的地方。

你可能已經(jīng)從某些沒(méi)有格式化的地方復(fù)制了一些代碼。因?yàn)槟銦o(wú)法忍受它看起來(lái)有多丑，你花時(shí)間手動(dòng)添加空格。

使用 ESLint 和 Visual Studio 代碼插件，它可以在保存時(shí)為你格式化它。

1.在你的 package.json 中，添加一些dev依賴(lài)項(xiàng)并執(zhí)行 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.啟動(dòng) Auto Fix On Save

每種工具都有其目的。也就是說(shuō)，了解不同的工具是件好事。

如果你手上只有一把錘子，那么所有的東西看起來(lái)都像釘子

你需要考慮使用的一些庫(kù)的設(shè)置時(shí)間，并將其與之進(jìn)行比較。

我要解決的問(wèn)題是什么

這個(gè)項(xiàng)目能長(zhǎng)久地受益于這個(gè)庫(kù)嗎

React是否已經(jīng)提供了一些現(xiàn)成的東西

現(xiàn)在可以使用 React 的 Context 和 Hook，你還需要Redux嗎？

當(dāng)你的用戶(hù)處于糟糕的互聯(lián)網(wǎng)連接環(huán)境時(shí)，我強(qiáng)烈建議使用 Redux Offline。

如果您不想反復(fù)輸入相同的內(nèi)容，可以選擇重用事件處理程序：

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 (
   

    
       
   
  );
 }
}

天真的我會(huì)寫(xiě)一些像如下的代碼：

 constructor(props) {
  super(props);
  this.state = {
   isFiltered: false
  };
 }
 toggleFilter = () => {
  this.setState({
   isFiltered: !this.state.isFiltered
  });
  this.filterData();
 };
 
 filterData = () => {
  //  this.state.isFiltered 應(yīng)該是 true，但事實(shí)并非如此，因?yàn)?setState 是異步的
  // isFiltered還沒(méi)有改變
  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
 }
};

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

這些技巧為我節(jié)省了很多時(shí)間，我相信還有更多。請(qǐng)?jiān)谠u(píng)論區(qū)與我們分享。

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。