资讯专栏INFORMATION COLUMN

当我开始使用React 时,我希望我知道这些知识

suosuopuo / 1416人阅读

摘要:自年月日首次发布以来,已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架,这已经不是什么秘密了。不要惊慌,查看将它注销掉从版本开始,默认为。弹出项目就像打开正在运行的汽车的引擎盖,同时动态地更换引擎,使其运行速度提高。

自2013年5月29日首次发布以来,React.js已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架,这已经不是什么秘密了。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

使用箭头函数时不需要 .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 (
      
    );
  }
}

可以给每个方法加上.bind(this)来解决 this 指向的问题,因为大多数教程都告诉你这样做。如果你有几个受控组件,那么constructor(){}中就会有一大堆代码。

相反,你可以这样做:
class Foo extends React.Component{
  handleClick = (event) => {
    // your event handling logic
  }
  render(){
    return (
      
    );
  }
}

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 iyarn

"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 (
   
); } }
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
  }
};

总结

这些技巧为我节省了很多时间,我相信还有更多。请在评论区与我们分享。

你的点赞是我持续分享好东西的动力,欢迎点赞!

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

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

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109703.html

相关文章

  • 通过阅读源码来提高js知识

    摘要:在这篇文章中,分享了他如何克服恐惧并开始使用源代码来提高他的知识和技能。不久之后,你正在阅读的源代码将引导您进入规范。 通过阅读源码来提高js知识 原文传送门:《Improve Your JavaScript Knowledge By Reading Source Code》 showImg(https://segmentfault.com/img/remote/14600000197...

    浠ラ箍 评论0 收藏0
  • 7个 HTML 面试题及回答策略

    摘要:接下来,我会检查每个页面以确保它使用有用的标签,包括标题标签。这个问题让面试官有机会了解潜在员工对工作难以胜任的部分。面试官可能需要考虑这种弱点对团队的影响。面试官可能会发现自己公司的计划与未来员工的职业目标是否保持一致。 翻译:疯狂的技术宅原文:https://www.indeed.com/hire/i... 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你...

    Luosunce 评论0 收藏0
  • 是如何在自学编程9个月后找到工作的

    摘要:昨天在我在国外网站上看到一篇文章,作者分享了他自学编程个月后找到工作的经历。而本文中,我主要针对想要通过学习编程找工作的角度来谈。我在年月犯了一个错误我认为首要任务是找到一份前端开发的工作。 昨天在我在国外网站 reddit 上看到一篇文章,作者分享了他 自学编程 9 个月后找到工作 的经历。文章不到一天就得到3千多赞,2百条回复。我看了下内容,非常中肯,其中有不少建议也是我在编程教室...

    gaosboy 评论0 收藏0

发表评论

0条评论

suosuopuo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<