首頁»JavaScript»當我開始使用React 時,我希望我知道這些知識

當我開始使用React 時,我希望我知道這些知識

來源:前端小智 發布時間:2019-05-29 閱讀次數:

  自2013年5月29日首次發布以來,React.js已經占領了互聯網。我和許多其他開發人員將他們的成功歸功于這個了不起的框架,這已經不是什么秘密了。

 使用箭頭函數時不需要 .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 的 ContextHook,你還需要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
  }
};

 總結

  這些技巧為我節省了很多時間,我相信還有更多。請在評論區與我們分享。

  原文:https://www.freecodecamp.org/news/what-i-wish-i-knew-when-i-started-to-work-with-react-js-3ba36107fd13/

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共0條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
登錄會員中心
大发国际网址 铁岭县| 抚松县| 新乡县| 云安县| 桃江县| 吴堡县| 泗洪县| 新宾| 定边县| 银川市| 天镇县| 京山县| 鄢陵县| 来安县| 大安市| 贺兰县| 壤塘县| 郑州市| 琼海市| 蒙阴县| 绥棱县| 白山市| 托克逊县| 双鸭山市| 日土县| 阳西县| 庆安县| 临海市| 临洮县| 若尔盖县| 平湖市| 商河县| 黄骅市| 南通市| 顺昌县| 西乌珠穆沁旗| 涞源县| 翁牛特旗| 仁化县| 余庆县| 德化县| 永登县| 准格尔旗| 马尔康县| 谢通门县| 寻乌县| 江门市| 黄大仙区| 印江| 吕梁市| 双城市| 平阴县| 安陆市| 潮州市| 涿鹿县| 嫩江县| 丹巴县| 科技| 四川省| 会东县| 四子王旗| 遂川县| 佛坪县| 潜江市| 乌拉特中旗| 远安县| 扬州市| 集安市| 图木舒克市| 西吉县| 广宗县| 鸡西市| 右玉县| 苍梧县| 寿光市| 珲春市| 永嘉县| 呼伦贝尔市| 宜阳县| 阳新县| 怀安县| 阳新县| 瑞金市| 玉田县| 尼木县| 江阴市| 青浦区| 开平市| 清原| 宁都县| 新余市| 泽普县| 湘西| 台北县| 玉林市| 北碚区| 伊金霍洛旗| 苏州市| 柳林县| 郁南县| 丹凤县| 札达县| 北流市| 阳江市| 新营市| 河南省| 克山县| 喜德县| 五指山市| 孟州市| 凤阳县| 琼结县| 贡嘎县| 耿马| 囊谦县| 临夏市| 文水县| 宜都市| 徐汇区| 北京市| 漯河市| 交城县| 米易县| 扎鲁特旗| 佛学| 曲靖市| 遵化市| 兴义市| 法库县| 永年县| 西贡区| 南康市| 白河县| 平和县| 定日县| 宁明县| 永吉县|