12.20 React 初學者需要知道的一些知識技术頭條網

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

通常，如果有一個受控組件時，會有如下的結構:

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

可以給每個方法加上.bind(this)來解決 this 指向的問題，因為大多數教程都告訴你這樣做。如果你有幾個受控組件，那麼constructor(){}中就會有一大堆代碼。

####相反，你可以這樣做：

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

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

當 service worker 與你的代碼衝突時

Service workers 非常適合漸進式Web應用程序，它允許離線訪問並優化互聯網連接較差的用戶。

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

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

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

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

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。

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：

<code>"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"
}
複製代碼/<code>

2.安裝 ESLint 插件

3.啟動 Auto Fix On Save

你不需要Redux、styled-components 等等

每種工具都有其目的。也就是說，瞭解不同的工具是件好事。

如果你手上只有一把錘子，那麼所有的東西看起來都像釘子

你需要考慮使用的一些庫的設置時間，並將其與之進行比較。

我要解決的問題是什麼
這個項目能長久地受益於這個庫嗎
React是否已經提供了一些現成的東西

現在可以使用 React 的 Context 和 Hook，你還需要Redux嗎？

當你的用戶處於糟糕的互聯網連接環境時，我強烈建議使用 Redux Offline。

使用事件處理程序

如果您不想反覆輸入相同的內容，可以選擇重用事件處理程序：

<code>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 (
    

    
       
   

  );
 }
}/<code>

setState是異步的

天真的我會寫一些像如下的代碼：

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

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

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

  // Do some filtering
 }
};/<code>

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

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

作者：前端小智
鏈接：https://juejin.im/post/5db0ea3ef265da4d4f65aaf6

分享到:

閱讀更多 小白沖沖沖沖 的文章

關鍵字: Studio 初學者 Visual